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

PICTURE element and SRCSET attribute of HTML 5 make this easy
ACRO Global
ACRO Global
Digital Tourism
Marketing & Advertising

Boothbay Harbor - Boston
Subscribe to my blog

Share This Article

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.


If you found this article helpful and would like to see more like it, please share it via the Share This Article link at the top of the page.

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

   
   
Website
Visit Website
Rating
4/5 based on 1 vote.
Show Individual Votes
Tags , , , , , ,
Related Listings
External Article: http://www.davidhboggs.com/srcset.htm


E-mail:
Quick Reply
Name:
E-mail:
Subscribe to my blog:
Your Comment:


You may use BB Codes in your message.
Spam Prevention:


Members currently reading this thread:

Previous Article | Next Article