How to code website images for fast loading and mobile responsiveness

How to code website images for fast loading and mobile responsiveness
By
13 December 2019 (Edited 30 March 2022)

PICTURE element and SRCSET attribute of HTML 5 make this easy

Making web pages to be fully responsive so that they load quickly and maintain correct layout on screens of all sizes has always been a challenge.

And with Google's "mobile first" policy, it's more important than ever for pages to be optimized for mobile devices without compromising performance on desktops.

The PICTURE element and SRCSET attribute in HTML - new in HTML 5 - make this easy.

Go to my page shown below to get the code syntax and see a live demonstration .

And if you'll be viewing the demonstration in a recent version of Chrome, don't overlook the instructions for tricking it into giving you a smartphone-narrow browser window.


And if you have questions or comments, you can easily send them to me with the Quick Reply form, below, or send me an e-mail.


David Boggs    - David
David@DavidHBoggs.com
View David Boggs's profile on LinkedIn

Google Certifications - David H Boggs
View my profile on Quora
Subscribe to my blog

External Article: http://www.davidhboggs.com/srcset.htm


Subhead PICTURE element and SRCSET attribute of HTML 5 make this easy
Website
Visit Website
Rating
4/5 based on 1 vote.
Show Individual Votes
Related Listings

Sorry, you don't have permission to post comments. Log in, or register if you haven't yet.

Please login or register.

Members currently reading this thread: