Flip your mobile device between Portrait and Landscape mode to see the HTML 5 <picture> Tag in action

The Size Of Webpages Sent To Mobile Smartphones Has Quadrupled In Just Five Years

Images that are too large, too numerous and unnecessary simply slow down page load times and get in the way of the users reading and doing what they need to do.

For the most part, images take a VERY LARGE PERCENT of the total web page size and need to be optimized by choosing the correct image size for the device and compression.

I Only Use Two Different Size Images

✅ A small size image (22 kilobytes) that is used for all Smartphone devices.

✅ A medium size image (41 kilobytes) that is used by tablets, laptop and desktop devices.

Flip Your Smartphone Between Portrait And Landscape Mode To See The HTML 5 Picture Tag In Action

✅ The web browser uses the HTML5 Picture Tag to ONLY DOWNLOAD the appropiate size image from the web server based on the viewport width of the device being used.

✅ Assuming you are holding your Smartphone in PORTRAIT MODE, when the web page gets originally loaded, the web browser WILL DOWNLOAD THE SMALL SIZE IMAGE (22 kilobytes).

✅ When you turn the Smartphone to LANDSCAPE MODE, or when you are using a larger screen size device, the web browser will DOWNLOAD THE MEDIUM SIZE IMAGE (41 kilobytes)!

✅ Anything that you can do reduce the transfer size (i.e. bytes sent from web server to the web browser before a web page is displayed), will help your web page load faster!

Call To Action And Social Media

Picture of Raul Gonzalez, a Mobile First Website Designer and Developer in Dallas, Texas
✅ Check out my Twitter Postings related to the Mobile User Experience!

Back To 🔝 Of Page

Share with FacebookShare with Google+Share with LinkedInShare with Twitter