Special Offer: FREE website speed test for Google ranking

Google PageSpeed

Google uses page loading speed as a ranking factor.

Your report will show you your page's overall speed score (1 to 100), comprehensive speed metrics, actions to take to reduce loading time.

Click to get your free test

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


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, below.

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
Share This Article

   
   
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