How to show higher resolution image in mobile and lower resolution image in desktop?

user_3760436 0
Viewed 266

I used some typical bootstrap grid for having a row of images with 4 images in desktop and 1 image in mobile. something like this:

<div class="row">
    <div class="col-md-3 col-sm-12">
        <img src="image1_src">
    </div>
    <div class="col-md-3 col-sm-12">
        <img src="image2_src">
    </div>
    <div class="col-md-3 col-sm-12">
        <img src="image3_src">
    </div>
    <div class="col-md-3 col-sm-12">
        <img src="image4_src">
    </div>
</div>

Rendered size of image in browsers was about 250px*250px but this resolution was not enough for mobile because images where almost fullscreen in mobile. I decided to use images with resolutions about 500px*500px and image quality was very good in both version of mobile and desktop but it faced me with google pageSpeed warning that said:

Image elements do not have explicit width and height

So I decided to use <picture> tag for using two different version of images. small one in desktop and big one in mobile!

<div class="row">
    <div class="col-md-3 col-sm-12">
        <picture>
            <source media="(min-width:701px)" srcset="250px_image1_src">
            <source media="(max-width:700px)" srcset="500px_image1_src">
            <img src="500px_image1_src">
        </picture>
    </div>
    <div class="col-md-3 col-sm-12">
        <picture>
            <source media="(min-width:701px)" srcset="250px_image2_src">
            <source media="(max-width:700px)" srcset="500px_image2_src">
            <img src="500px_image2_src">
        </picture>
    </div>
    <div class="col-md-3 col-sm-12">
        <picture>
            <source media="(min-width:701px)" srcset="250px_image3_src">
            <source media="(max-width:700px)" srcset="500px_image3_src">
            <img src="500px_image3_src">
        </picture>
    </div>
    <div class="col-md-3 col-sm-12">
        <picture>
            <source media="(min-width:701px)" srcset="250px_image4_src">
            <source media="(max-width:700px)" srcset="500px_image4_src">
            <img src="500px_image4_src">
        </picture>
    </div>
</div>

now I'm facing with a new problem that browser pick image with higher resolution automatically in desktop mode and ignore the other one.

bootstrap-4 twitter-bootstrap css image html
1 Answers

There are two independent issues going on here:

First: Google complaining about explicit width and height. If you provide the browser with width/height values, it provides the space needed in the layout, even if the image itself is not loaded yet. If there are no width/height values, the provided space will be zero until the image is loaded, causing a layout shift.

Second: You want to provide your images in different resolutions, because modern smartphones have a much higher screen resolution than common desktop monitors. By using the picture-tag, you tell the browser "these are the images I have, please decide which fits best into the current layout and resolution". Your last img-tag within your picture tag is the fallback option, which the browser will use if none of the media queries above fits. That's why it takes that picture.

See also https://www.w3schools.com/tags/tag_picture.asp

Another way of implementing different resolutions would be using srcset. You find a very thorough explanation on this page: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

user_62122690
Related