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.
Call to Action and Social Media
Would love to hear your thoughts and comments so, feel free to call 📱, or send me an email 📧.