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

Flip your Smartphone between Portrait and Landscape mode to see the HTML 5 Picture Tag in action

When displaying a web page in PORTRAIT mode, 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.

I only use two different size images

✅ A small size image that is used for all Smartphone devices.

✅ A medium size image that is used by tablets and desktop/laptop devices.

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 load the small image.

✅ When you turn the Smartphone to LANDSCAPE MODE, the web browser will DYNAMICALLY load the medium size image!

Anything that you can do reduce the transfer size (i.e. bites sent from web server to the device), will help your web page load faster!

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 to date with my latest Mobile News 📰 Postings!

Back to 🔝 of Page

Share with FacebookShare with Google+Share with LinkedInShare with Twitter