imgtopicture (itp) is a Joomla 3.x plugin to convert your images to the new amazing HTML5 super smart element called picture.  So, you can save bandwidth and get a faster web :)

You can get more information in html.spec.whatwg.org

The picture element has the skill to show different versions of your images depending on the device width.
Imgtopicture will generate automatically the different versions of your images and will store in cache directory to increase the speed. Then, it writes the code for the different versions of your images.

This is your boring image code:

<img src="/path/to/your/image/your_image.jpg"/>

 

imgtopicture writes down:
<picture>
<source media="(min-width: 700px)" srcset="/your_image_converted_to_webp_if_your_browser_and_server_supports.webp">
<source media="(max-width: 350px)" srcset="/your_image_converted_to_webp_and_scaled_to_350px.webp,your_image_converted_to_webp_and_scaled_to_700_for_retina.webp 2x">
<img width="1920" src="/your_original_image_fallback_to_cover_old_browsers.jpg"/>
<picture>

 

Picture element is supported by this browsers:

Chrome: v39+

Firefox: v38+

Safari: 9.1+

Opera: v30+

Android browser: v40+

Chrome for Android: v42+

Edge: 13+