recentpopularlog in

abberdab : responsive-images   5

Responsive images with srcset and sizes attributes vs picture element – Learnedia
This article is a tutorial to help you understand these underused or misused HTML <img> tag attributes for responsive images. I will also talk about picture vs srcset and when to use each technique.
responsive-images  responsive-design  picture-element  srcset  sizes  web  images  performance  mobile  picture  html  html5  bandwidth  crossbrowser  firefox  chrome  progressive-enhancement 
october 2017 by abberdab
Responsive images: Smaller page sizes with the picture element and WebP – Mike Babb – Web Developer
At a recent Bristol Web Performance meetup Bruce Lawson gave a talk on responsive image techniques using the <picture> element he devised and had added to the HTML spec with help from some other clever people. I happened to be starting work on a project that’s particularly image-heavy for a client, so it seemed like a great opportunity to try out Bruce’s techniques and see what kind of bandwidth savings I could get.

The purpose and syntax of the <picture> element has been covered in a lot of detail elsewhere, so I’ll focus on my actual results here. Bruce talked about two ways to use the <picture> element to reduce page sizes and save bandwidth:

- Serving smaller image assets to devices with small screens, like smartphones, and
- Replacing JPG and PNG images with Google’s WebP format for browsers that support it
responsive-images  rwd 
july 2016 by abberdab

Copy this bookmark:

to read