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!

Deliver A Consistent User Experience (UX) On ANY SIZE Screen Device

When displaying a web page on ANY SIZE SCREEN, I have a goal to use the appropiate size image for the device by:

✅ Using aproximatly 50% of the top of the screen to display my logo and the appropriate size image for mobile and desktop/laptop devices.

✅ Using aproximatly 50% of the bottom of the screen to display the header title and top of the web page content.

Example of a Mobile First Website design that delivers the same User Experience (UX) on ANY SIZE screen deviceExample of a Mobile First Website design that delivers the same User Experience (UX) on ANY SIZE screen device

Call to Action and Social Media

Picture of Raul Gonzalez, a Mobile First Website Developer in Dallas, Texas

Would love to hear your thoughts and comments so, feel free to call 📱, or send me an email 📧.

✅ Follow me on Twitter to keep up with my latest Mobile News 📰 Postings!

Back to 🔝 of Page

Share with FacebookShare with Google+Share with LinkedInShare with Twitter