Responsive images srcset

[henandstag]

Is delivering scaled images using srcset a good idea?

Thinking of delivering one image size to Mobile and another to Desktop. How can I do this for all browsers?

Thanks Mike

[effectdigital]

AFAIK since the way images are used online hasn't 'significantly' changed in decades (as Zohaib says) - there is no factual industry standard. But this technique seems like it could yield faster page-loading speeds for mobile, which we all know Google does stand behind. Google often come up with an error on Page Speed insights which says, you are serving massive resolution images with a tiny viewport. They actually can and do regard that as an error, so surely if Google documents that the technique is acceptable to them and we know it solves certain issues, it is at least 'worth a try' IMO

[jasongmcmahon]

I've always used CSS to scale images between devices. Though this can increase the page loading times, so for better performance there are plugins available for CMSs to improve page rendering speeds,

[Zohaibkhannn]

Images are some of the most important pieces of information on the web, but over the web’s 25-year history, they haven’t been very adaptable at all. Everything about them has been stubbornly fixed: their size, format and crop, all set in stone by a single src.

[henandstag]

Thanks, yes I had read this article but can't find any websites using this technique. Has it been adopted as an industry standard, or is there another option?

[effectdigital]

Google doesn't seem to have a problem with this:

https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

"TL;DR

• Use relative sizes for images to prevent them from accidentally overflowing the container.
• Use the picture element when you want to specify different images depending on device characteristics (a.k.a. art direction).
• Use srcset and the x descriptor in the img element to give hints to the browser about the best image to use when choosing from different densities.
• If your page only has one or two images and these are not used elsewhere on your site, consider using inline images to reduce file requests.

-

Enhance imgs with srcset for high DPI devices

The srcset attribute enhances the behavior of the imgelement, making it easy to provide multiple image files for different device characteristics. Similar to the image-set CSS function native to CSS, srcset allows the browser to choose the best image depending on the characteristics of the device, for example using a 2x image on a 2x display, and potentially in the future, a 1x image on a 2x device when on a limited bandwidth network."

This part seemed most important to me:

"On browsers that don't support srcset, the browser simply uses the default image file specified by the src_ attribute. This is why it is important to always include a 1x image that can be displayed on any device, regardless of capabilities._ "

... so basically you define your srcset as per Google's documentation, but you must be sure to include a default fallback image that could work on all browsers and devices - that's what gets used if the browser is unable to interpret your srcset (or if your srcset doesn't include anything for the specified browser)