New pagespeed image rules

Hello, 

Pagespeed Google shows that my images should resized and compressed.

Risk on Google groups said to me:
If you need large images for web and small ones for mobile, use the <picture> element with multiple image sizes. Here's code I use for one image in my banner:

<picture>
<source type=image/webp media="(min-width:1281px)" srcset="/images/slider2/ach_1700.webp 1700w">
<source type=image/webp media="(min-width:1025px)" srcset="/images/slider2/ach_1280.webp 1280w">
<source type=image/webp media="(min-width:801px)" srcset="/images/slider2/ach_1024.webp 1024w">
<source type=image/webp media="(min-width:401px)" srcset="/images/slider2/ach_800.webp 800w">
<source type=image/webp srcset="/images/slider2/ach_400.webp 400w">
<source media="(min-width:1281px)" srcset="/images/slider2/ach_1700.jpg 1700w">
<source media="(min-width:1025px)" srcset="/images/slider2/ach_1280.jpg 1280w">
<source media="(min-width:801px)" srcset="/images/slider2/ach_1024.jpg 1024w">
<source media="(min-width:401px)" srcset="/images/slider2/ach_800.jpg 800w">
<source srcset="/images/slider2/ach_400.jpg 400w">
<img src="/images/slider2/ACH_1700.webp" width=1700 height=398 alt="Ach Processing"></picture>

If a webkit browser like Chrome is used, it'll use the webP images, otherwise it'll use jpg. Image sizes are 1700px for desktop all the way to 400px for iPhone. This might be overkill for your use, but you can see the logic.

Question: How I can upload and set images like his advice? 

Comments

Sign In or Register to comment.