New pagespeed image rules
Hello,
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.
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
we are sorry but we do not have anything like this included into theme.
Thanks!
However, did you knew that Google made new tool for checking if site is mobile friendly and as we know, it's more important in their ranking? As the message of this tool says http://pasteboard.co/zu3FdcZKf.png:
PageSpeed Insights has moved the User Experience test for mobile pages into the Mobile Friendly Test, which you can try out here.
The new tool is https://search.google.com/search-console/mobile-friendly?utm_source=psi&utm_medium=link&utm_campaign=psi-ux-banner&hl=en-US&id=DTl9CWjzzw37ZpSl9EGAsg
We always stated that Page Speed Insight is not valuable tool as it provides too many limitations that might be realized at least for easy and plain html pages with few sub pages and nothing else (not great looking css scripts, js's, etc. because all these are too heavy in mind of this tool what is totally stupid). For Page Insight, the best are pages without images, just white background with some dark text content.
Anyway, as you can see opening above link or the following screenshot http://pasteboard.co/zu7oSTlM2.png your site is definitely mobile friendly and this is the most important.