June 10th, 2017
Websites should load fast and use no more bandwidth than neccesary. Many factors are involved in making a website efficient. The proper use of images is big factor. Image compression is important and easy to do. Using properly scaled images is a another factor. Resize the image with an image editor, don't ask the browser to do it. A relatively new method to increase efficient use of images is the HTML attribute srcset. The banner at the top of the page will demonstrate the HTML srcset attribute. The image is a place holder from IpsumImage.
<picture> <img src="/media/demo-banner/default.jpg" alt="place holder image" sizes="100vw" srcset= "/media/demo-banner/400x133.jpg 400w, /media/demo-banner/800x267.jpg 800w, /media/demo-banner/1000x333.jpg 1000w, /media/demo-banner/1200x400.jpg 1200w, /media/demo-banner/1500x500.jpg 1500w, /media/demo-banner/2000x666.jpg 2000w"> </picture>
This page offers six different place holder images from 400x133 to 2000x666. These numbers indicate display size in width and height. In practice each image would be compressed with smaller display sizes having fewer bytes. The place holder images are not a perfect example but they are a good visual demonstration of srcset in action. Srcset offers browsers the ability to pick the most appropriate size image. A different image will be requested depending on the device. Fewer bytes being sent to the browser means a faster loading web page and less bandwidth used. Most current browsers support srcset. Internet Explorer does not support srcset and will only display the default image 1000x333. The HTML in the box with the white background is the code used in this page. The browser selects the image that fits it's needs. If you have a desktop monitor, make your browser window smaller, then exit and reload this page. Enlarge the window and you should see a larger place holder load. My Ipad 2 uses the 2000 pixel wide image for both portrait and landscape. My android phone uses the 800 pixel wide image for portrait and the 1000 pixel wide for landscape.
Deferring images doesn't save bandwidth but gives the user an impression of faster page load. Files are downloaded after all other page elements have loaded. I'm using Peter Sexton's technique found at Varvy.com. It works well for images appearing below the first screen of the page. The images load while the user is looking at the first screen. When the user scrolls down the page the images are there. The images at the bottom of this page are deferred. Another example of deferred images can be seen at PhilLowder.com. The Nivo slideshow there contains twelve images. The first image loads and after all other page elements load the last eleven images are loaded. You can find evidence that the last 11 images are loading after the page has finished loading at Web Page Test. There you can see the colorful Waterfall View. Enlarge the Waterfall View to see data showing the final 11 images loading last. Each image has been compressed and resized to fit the slideshow. Although compressed the quality looks fine on my 22 inch monitor. I'm trying to satisfy Retina displays with Retina.js. If the retina images load they will have more bytes. I don't have a Retina display to test my attempt.
Get in touch if you have a comment, find a mistake or just want to talk about HTML and CSS. My contact page has a mailto link and mail form.