Categories
Digital Marketing

Optimize Image Loading Speed

Image - Optimize Image Loading Speed
Image – Optimize Image Loading Speed

Image file size matters while 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. Understand what lossy and lossless compression is all about. A small quantum of memory storage makes lossy compression good for Optimize Image Loading Speed on the web. Images can be saved in any dimension. CSS for HTML can resize images but 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.

Optimize Image Loading Speed – Introduction

Web Images play a crucial role in any website as they are responsible for visual appeal, communicating information, and drawing attention. But care has to be taken to optimize image loading speed thereby preventing issues of slower loading speed of websites. This loading speed is nothing but the time required by a website to display its images. This in turn affects the ranking on search engines, user experience, and even conversion optimization.

Many factors contribute to the loading speed of images such as the browser, content, server, and network. High resolution, uncompressed not properly optimized images are considered problematic when it comes to consumption of brand-width. Rectify these issues by

  • Serving the right format
  • Resizing and compressing Images
  • Serving relevant image versions to the user by use of responsive images
  • Lazy loading images that load only when they come within the users’ viewport
  • Use of CDN services for storing and delivering images that are nearest to the user.

Optimize Image Loading Speed – Formatting & Compression

Spaces around images need to be reduced by cropping. Use CSS for padding with JPEG image formats. Decrease the file size of images and restrict them to 200KB using a script/ plugin to speed up the load time of the page. Limit dimensions to about 2500 px wide to avoid the blurry appearance of images that stretch and fill the container.

Several free and paid WordPress plugins such as WP Smush, Compress JPEG, PNG images, Short Pixel Image Optimizer, and 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 ‘Image Optimization for SEO‘.

1 - GTMetrix test for 'optimizing images'.
1 – GTMetrix test for ‘optimizing images’.

After running a speed test in GTMetrix the ‘Optimize Images’ results are displayed above in Fig1.

Fig2 - GTMetrix score after optimizing images with reSmush.it
Fig2 – GTMetrix score after optimizing images with reSmush.it

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.

Optimize Image Loading Speed – Serve Scaled Images

Identify images that need to be scaled by clicking the down red arrow below Fig3.

Fig3 - Optimize Image Loading Speed: GTMetrix test for 'serve scaled images'.
Fig3 – Optimize Image Loading Speed: GTMetrix test for ‘serve scaled images’.

The score for GTMetrix ‘Serve scaled Images’ is shown above in Fig3.

Fig4 - GIMP-Scale_Image
Fig4 – GIMP-Scale_Image

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.

Fig5 - GTMetrix test for 'serve scaled images'.
Fig5 – GTMetrix test for ‘serve scaled images’.

The score for GTMetrix ‘Serve scaled Images’ is shown above in Fig4.

Fig6 - Serve Scaled Images optimized by reSmush.it
Fig6 – Serve Scaled Images optimized by reSmush.it

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 Fig5. But there is room for further improvement. Hence, scale the 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).

Fig7 - GTMetrix test after image scaled down to 80*80.
Fig7 – GTMetrix test after image scaled down to 80*80.

Above is the GTMetric score – A(100%) after the logo image has been scaled to 80*80 Fig7.

Optimize Image Loading Speed – Lazy Loading of Images

Implement Lazy Loading of Images on your website to bring out faster website loading times. The lazy loading technique ensures images get loaded only when visible on a person’s screen thereby decreasing initial load times. By adding the loading= “lazy” attribute to the HTML <image> element or <iframe> element, images/ videos can be made lazily loaded without applying any Javascript code. Firefox, Chrome, etc support this loading= “lazy” attribute which tells browsers to postpone the loading of images/ videos unless it approaches the visible part of the page. The main application of lazy loading is for user interactions during scrolling or navigation.

<img src="image.jpg" loading="lazy" alt="Image..”>

<iframe loading="lazy" src="video-player.html" title=“video.."></iframe>

Optimize Image Loading Speed – Prevent hotlinking to Images

By preventing hotlinking to your images, avoid overworking your server and increasing bandwidth consumption resulting in slow load times for your users.

Prevent hotlinking of images – Find if your images are hot-linked

Go to Google Maps and type the below in the search bar. Replace yoursite.com with your website URL and you will find locations where people have hotlinked your images.

 inurl:yoursite.com -site:yoursite.com

Prevent hotlinking to Images – Add Code to the .htaccess file

Disable hotlinking to your server by adding code to your .htaccess file. In the below code change yoursite.com to your website URL. The last line of the code may point to any image you like. This ensures any hot-linked image fails to load.

Fig8-File Manager - .htaccess file
Fig8-File Manager – .htaccess file

Add the below code snippet to your .htaccess file through the File Manager Fig8 | c-panel or by using a free FTP program such as FileZilla.

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)://(www\.)?yoursite.com/.*$ [NC] 
RewriteRule \.(gif|jpg)$ http(s)://www.yoursite.com/hotlink.gif [R,L]

To allow particular search engines such as Google, Bing, Yahoo, etc, and social media such as Facebook, Twitter, etc to access your files, add the hotlink protection rule to the .htaccess files as shown under

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yoursite.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?bing.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yahoo.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?facebook.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?twitter.com [NC]
RewriteRule \.(jpg|jpeg|png|gif|svg)$ http://yoursite.com/stophotlinking.jpg [NC,R,L]

Prevent hotlinking to Images – Use a WordPress Plugin

install a free plugin called WordPress Content Copy Protection & No Right Click and make use of the basic features to make content selections for a copy & right-clicking, prevent the saving of images & show alert messages, disabling keys such as CTRL+A, CTRL+C, CTRL+X, CTRL+S or CTRL+V, etc. You can activate additional features with the paid version. Another similar plugin is No Right Click Images by WebFactory. Further, enable hotlinking protection functionality in the All in One WP Security (AIOS) & Firewall multipurpose plugin and prevent image hotlinking.

Prevent hotlinking to Images – Use a CDN

Use Content Delivery Networks (CDN) such as Cloudflare, KeyCDN, Sucuri CDN, etc to prevent the hotlinking of your images. In Cloudflare CDN all you have to do is enable the feature “Scrape Shield”{ and switch ‘ON’ the hotlink protection. This action protects your content and email addresses from the server side.

Use a Cache, Compress images, and Media cleanup – WordPress plugin

Optimize images of your website by using the WP-Optimize plugin to improve loading speed, user experience, SEO, etc thereby decreasing bounce rates and saving server storage space. Clean out unwanted images or set them to the correct sizing.

Optimize Image Loading Speed: WordPress Plugin – reSmush.it

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.

Fig9 - reSmush.it tab is in the media folder
Fig9 – Tab – reSmush.it is in the media folder

Go to the media folder in the WordPress dashboard sidebar and locate the tab – ‘reSmush.it’ Fig9. View all the files in the media folder by clicking on this tab. Anytime restore your original image by choosing the ‘Disable of reSmush.it’ option. While compressing the EXIF data of images is removed but the original is preserved.

Fig10 - Optimize UnSmushed pictures display page.
Fig10 – Optimize the UnSmushed pictures display page.

The ‘Optimize UnSmushed Pictures’ display page currently shows 12 images that need to be optimized Fig10. Compress images altogether with the bulk optimization features. Go to settings and choose options by checking the box for – Optimize on upload, Enable statistics, and Enable logs. Save settings. Click the ‘Optimize all pictures’ tab to optimize these media files.

Fig11- Optimize Image Loading Speed: Combine images using CSS sprites
Fig11 – Optimize Image Loading Speed: Combine images using CSS sprites

Optimize Image Loading Speed – Combine images using CSS sprites

A collection of small images put in a single image is CSS sprites Fig11. 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 for HTML.

Fig12 -Optimize Image Loading Speed: Screenshot_CSS Sprite Generator
Fig12 -Optimize Image Loading Speed: Screenshot_CSS Sprite Generator

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 fig12 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; }

HTML code generated by the CSS sprite generator fig11 is shown below. Use it to insert the sprite images.

<div class="icon-facebook"></div>
<div class="icon-pinterest"></div>
<div class="icon-rss"></div>
<div class="icon-twitter"></div>

A demo of how your sprite image will look is shown in fig12.

Fig13 - Optimize Image Loading Speed: Specify Image Dimensions
Fig13 – Optimize Image Loading Speed: Specify Image Dimensions

Optimize Image Loading Speed – Specify image dimensions

For a browser to display the page, it has to layout the web page around the images. Specify the width and height for all images in the HTML <img> tag or CSS for a quick rendering of text and images Fig13. 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 are 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.

Conclusions

If you go through your WordPress Media Library you will understand how images have been accumulated over a while and this continues to grow. Such images in their uncompressed state can slow your site. Numerous ways can alleviate these issues by serving images in modern formats like AVIF or WebP format. Most modern browsers support these formats. AVIF offers smaller file sizes whereas WebP gives superior lossy and lossless compression for web images. reSmush.it plugin supports AVIF & WebP. Moreover, CDNs can replace raster icons with SVGs and improve the loading of images on your site. WP SVG Images Plugin permits you to upload SVG files to your media library safely.

Image-optimized CDNs such as ImageKit, Cloudinary, etc will give you an optimized image supported for the device relative to its screen size. Settings for cache functions are also provided by a CDN such as Cloudflare. Provide image dimensions so that the browser can adjust within the reserved space before loading. Disable hotlinking to your images by using various methods such as adding code to your .htaccess file, Cloudflare CDN, WordPress plugins, etc. Disrupt hotlinks by changing file names or the path. Prevent Direct Access plugin protects WordPress Media Library File Uploads and puts an end to others stealing your images and directly linking from your website resulting in a slow down of your site. The free WordPress plugin ‘Image Watermark’ can protect your website images by watermarking your images.

By D Anthony

D Anthony is a SEO content writer and blogger with a passion for digital marketing. When not at work, he goes site seeing.