Image file size matters whilst loading images on websites. Images produced in photo-editing software are attractive to look but the file sizes are sizeable. When these images are loaded on websites they take time to load. Sizing images based on requirements reduces the loading time of web pages. Optimize Image Loading Speed implies that images are served to the user without them having to wait for much time to download. Further, understand what lossy and lossless compression is all about. A small quantum of memory storage makes lossy compression good to Optimize Image Loading Speed on the web. Images can be saved in any dimension.CSS & HTML can resize images but the download would require the entire file size to be downloaded first and next resized and then displayed. Compress images in the correct format to improve your load page times.
Contents
Optimize Image Loading Speed
Spaces around images need to be reduced by cropping. Use CSS for padding with JPEG image formats. Decrease file size of images and restrict to 200KB using a script/ plugin to speed up the load time of the page. Limit dimensions to about 2500 px wide for avoiding the blurry appearance of images that stretch and fill the container.
Several WordPress plugins both free and paid such as WP Smush, Compress JPEG, and PNG images, Short Pixel Image Optimizer, reSmush.it etc are available for image compression. Optimize images for the web by converting image files to JPEG format using image editing software. Read more by clicking on ‘Optimize images for web‘.
After running a speed test in GTMetrix the ‘Optimize Images’ results are displayed above in fig1.
The score after optimizing with the reSmush.it plugin can be viewed in the above fig2. The GT Metrix score recommends files that can be further ‘Losslessly compressed’ to reduce the size of images by another 12.8KiB (2% reduction). The images that have been smushed will not be re-smushed. So it is up to you to set a limit between quality and speed.
Serve Scaled Images
Identify images that need to be scaled by clicking the down red arrow in the below fig3.
The score for GTMetrix ‘Serve scaled Images’ is shown above in fig3.
Go to the ‘Images’ tab in the GIMP software menu and click on the ‘Scale’ tab fig4. The selected image in GIMP fig4 shows logo size 595*585. Scaling of the image can result in saving 52.5 KiB (89% reduction) as applied to this logo image. Enter the new image size of 250×250 and click Scale. Upload this optimized logo to your website to optimize image loading speed.
The score for GTMetrix ‘Serve scaled Images’ is shown above in fig5.
GTMetrix test after using the reSmush.it plugin displays the ‘serve scaled images’ showing the image has been scaled from 595*585 to 250*250 in fig6. But there is room for further improvement. Hence, scale image further from 250*250 to 80*80 based on the GT Metrix recommendation. This will result in an additional saving of 22.3KiB (89% reduction).
Above is the GTMetric score – A(100%) after the logo image has been scaled to 80*80 fig7.
Optimize Image Loading Speed: reSmush.it plugin
reSmush.it is a free plugin, easy to use for beginners. The plugin supports the PNG, JPG, GIF, MMP, and TIF image file formats.
Upload the plugin to your WordPress website. The plugin- reSmush.it tab is located in the Media folder. The tool runs on all images in your media library.
The plugin checks all images that are in your media folder and compresses them thereby reducing the media file size.
Go to the media folder in the WordPress dashboard sidebar and locate the tab – ‘reSmush.it’ fig8. View all the files in the media folder by clicking on this tab. Compress images altogether with the bulk optimization features. Anytime restore your original image by choosing the option – ‘Disable of reSmush.it’. While compressing the EXIF data of images is removed but the original is preserved.
The ‘Optimize UnSmushed Pictures’ display page currently shows 12 images that need to be optimized. Go to settings fig9 and choose options by checking the box for – Optimize on upload, Enable statistics, and Enable logs. Save settings. Click the ‘Optimize all pictures’ tab for optimizing these media files.
Combine images using CSS sprites
A collection of small images put in a single image is CSS sprites. In the example, the collection of small images are icons – Facebook, Pinterest, Twitter, and RSS. CSS sprites can help optimize image loading speed and make your site faster rather than having small multiple images in the background. Use the CSS sprite generator to generate CSS and HTML code.
In the ‘CSS sprite generator’ upload your images by clicking on ‘Browse…’ and selecting images from your computer. Next, click the ‘Create Sprite’ tab. Use the generated CSS & HTML code on your website to optimize image loading speed.
The CSS code has been generated by the CSS sprite generator is as shown below.
.icon-facebook, .icon-pinterest, .icon-rss, .icon-twitter
{ display: inline-block; background: url('png.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
.icon-facebook { background-position: -0px -0px; width: 64px; height: 64px; }
.icon-pinterest { background-position: -64px -0px; width: 64px; height: 64px; }
.icon-rss { background-position: -0px -64px; width: 64px; height: 64px; }
.icon-twitter { background-position: -64px -64px; width: 64px; height: 64px; }
The HTML code generated by the CSS sprite generator is as shown below.
<div class="icon-facebook"></div> <div class="icon-pinterest"></div> <div class="icon-rss"></div> <div class="icon-twitter"></div>
Use it to insert the sprite images. A demo of how your sprite image will look like is shown in fig11.
Specify image dimensions
For a browser to display the page it has to layout the web page around the images fig12. Specify width and height for all images in the HTML <img> tag or CSS for a quick rendering of text and images. Below is the <img> tag with dimensions.
<img src="Image-Optimize-Image-Loading-Speed.png" width="300" height="300"/>.
If the dimensions are not provided or are incorrect the browser will need a reflow and repaint once the images get downloaded. The browser builds once to display all the text. Next, it waits for an image to get downloaded. Then the browser determines the size of the image for rebuilding the page and wrapping the text around the image. This is repeated for every image downloaded on your page. As a result, the load speed of a page is remarkably increased when the images are without dimensions.
