The site uses a series of high resolution images from 2500px .

pageSpeed ​​of course swears, so I try to use the modern srcset attribute for images:

 * { margin: 0; padding: 0; box-sizing: border-box; } img { max-width: 100%; margin: auto; } 
 <article> <img srcset="https://dummyimage.com/2560x400/333/fff 2x, https://dummyimage.com/1280x400/333/fff 1x" sizes="(min-width: 1280px) 1280px, 100vw" alt="A title"> </article>

For a high resolution, I use it at 2500px , and for a normal one, I make the same pictures at 2 times lower resolution.

An example img entry for a real project:

 <img src="images/img-1-1x.jpg" srcset="images/2x/img-1-2x.jpg 2x" alt="" class="img-fluid">

As a result, for all the "possibilities" pagespeed swears at these images and swears at img-1-2x.jpg Ie On phones, instead of displaying img-1-1x.jpg , a large picture is displayed.

enter image description here

enter image description here

And such problems are only for mob. devices:

enter image description here

For desktop everything is fine, speed 90+ !

On the advice of using Echo.js lazy load , but this lazy load on phones (especially with a bad Internet) does not load all photos.

Update:

As it turned out the record:

 <img srcset="https://dummyimage.com/2560x400/333/fff 2x, https://dummyimage.com/1280x400/333/fff 1x" sizes="(min-width: 1280px) 1280px, 100vw" alt="A title">

not valid !

When using the sizes attribute, the entry should be similar to this:

  <img srcset="https://dummyimage.com/2560x400/333/fff 1280w, https://dummyimage.com/1280x400/333/fff 640w" sizes="(min-width: 1280px) 1280px, 100vw" alt="A title">

After reviewing a video tutorial with a recommendation about compressing an image in squoosh.app , I made images with .webp resolution. Connected using picture :

  <picture> <source srcset="images/Image-1x.webp 1x, images/2x/Image-2x.webp 2x" type="image/webp"> <img src="images/Image-1x.jpg" srcset="images/2x/Image-2x.jpg 2x" alt="" > </picture>

Images in the .webp format weigh about 200-300 кб , despite the fact that in high resolution it is about 2 MB.

As a result, the speed on the pages dropped to 10 - 13 , and images are displayed only in chrome. It is the latest version of firefox, but for some reason, it does not display pictures.

caniuse.com/#feat=picture

! And it is not always possible to optimize all images, i.e. change the size or resolution, and there are many such pictures on the site.

Question: Why does a huge resolution work for phones, but not reduced when writing <img src="images/img-1-1x.jpg" srcset="images/2x/img-1-2x.webp 2x" ... ?

How to use srcset , is it worth using this attribute at all?

What are the possibilities to optimize images without losing quality, but with saving speed for mobile? devices (cross-browser lazy load or any other methods, the fallback method not familiar to me :))?

  • Right here, everyone recently chewed on youtube.com/watch?v=gHLPBlzGRT8 - Andrey Fedorov
  • @AndreyFedorov, like webp gives only a smaller size, you can just use img srcset , but for some reason it doesn't work for me pagespeed swears at 2x (large) image, although in theory it should display 1x. - HamSter
  • one
    Well, I did not mean webp, but the <picture> , as a complete solution. - Andrey Fedorov
  • @AndreyFedorov, thanks! Useful lesson, you will need to try and add webp format - HamSter

3 answers 3

Make pictures in webp format and add them to your srcset , this is Google and is waiting for you about what you yourself would know if you unfolded the block with an error and read what is written there.

For images in JPEG 2000, JPEG XR and WebP formats, more efficient compression is used, so they load faster and consume less traffic than PNG and JPEG images.

The picture option is the most cross-browser.

 <picture> <source type="image/webp" srcset="images/img-1-1x.webp" /> <img src="images/img-1-1x.jpg" /> </picture>

First you give him a webp image to webp (as I wrote to you in the example), if he does not support this type, he will load jpg .

But Google Page Speed ​​will regard this as GOOD.

  • one
    <picture> <source type = "image / webp" srcset = "images / img-1-1x.webp" /> <img src = "images / img-1-1x.jpg" /> </ picture> - boneskhv
  • I know that it is possible, only it will not work in almost all browsers. I don’t know how it happened that everyone has, but you don’t, but literally it says: For images in JPEG 2000, JPEG XR and WebP formats, more efficient compression is used, so they load faster and consume less traffic than PNG and JPEG. The picture option is the most cross-browser. First you give him a webp image to eat (as I wrote to you in the example), if he does not support this type, he will load jpg. But Google Page Speed ​​will regard this as GOOD. - boneskhv
  • I no longer understand why for mobile speed swears not at 1x, but at 2x! And the fact that the picture, support, I know. Why does a huge resolution work for phones, but not reduced when writing <img src="images/img-1-1x.jpg" srcset="images/2x/img-1-2x.webp 2x" ))))) - HamSter

In general, you can test and optimize images in gtmetrix , but if you search, you can find other sites for optimization, and still in photoshop save the image with such quality that the optimal размер -> качество would be размер -> качество .

And one more important point. This is for a mobile site.

Images that should not be visible in the mobile. make the block background (if possible) in place of the img tag. And at a certain moment when the block is hidden MANDATORY for this screen resolution, put for this block with the background image background-image: none; .

This is how you optimize your page enough.

  • I like gtmetrix, but does not suit the customer) everyone is guided by page speed. "Images that should not be visible in the mobile." There is a video there, in the question there is a link to it. Yes, it has been tested in practice that at least img though the background, even display: none even though display: block still doesn’t optimize the page (the video explains it in detail) - HamSter
  • @HamSter yes I am not saying not to use pagespeed . but you will run for yourself in gtmetrix as gtmetrix . He will give a lot of useful information. and it can optimize images. I will later take off the site for a good optimization of images. - Raz Galstyan
  • for desktops 90+ and gtmetrix writes that everything is already good, but pagespeed just for phones produces low speed - HamSter
  • @HamSter and how much is low? and yet what swears? Have you looked at the background pictures that I wrote? - Raz Galstyan
  • one
    If you delete, then there are no problems)) - HamSter 1:53 pm

And if in src to put a reduced image, or a stub and after loading with a script, change from an attribute, and you can take it with a window resolution check and for mobiles, for example, from a smaller data-mobile? I do not know if this option will deceive pageSpeed. Can be rewritten on pure JS

 $(function() { $('.big').html(function() { $(this).attr("src", $(this).attr('data')); }); }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img class="big" src="blank.gif" data="https://google.com/favicon.ico"/> <img class="big" src="blank.gif" data="https://yandex.com/favicon.ico"/>

  • one
    In general, it will deceive, but then the whole site will need to be changed to js , and also taking into account window resize . And this is not at all convenient. - Raz Galstyan
  • @RazGalstyan, what does it mean to change the whole site to JS? Just add attributes to the html tags and add a few lines to one JS file - which is actually done in the text of the question, but those results do not suit (in particular, the lazy load plugin) - Nsk
  • Well, yes, a plugin for this, and after Google it will swear for a large number of js - Raz Galstyan
  • @RazGalstyan my solution without plugins in 5 lines of code, if the site does not use jQuery, you can write to JS and paste it either directly into the template or into an existing js file. - Nsk 4:04 pm
  • Well, yes, but I wouldn’t have done it with the plugin - Raz Galstyan