How To Optimize Images in WordPress To Load Faster

Keeping your website up to date is a constant reminder of a successful business. Nothing makes a website greater than the mere existence of a qualitative content. And we know how powerful words are. Still, as delightful a story might be, there comes a time when scrolling down lots of lines becomes boring and rather a total turn-off. The result is easy to imagine – visitors decide to leave your website, meaning the bounce rate starts to increase overnight. Yet, there are some handy tips and tricks useful enough to stop such a behaviour from happening. These being said, in case you are looking forward to knowing more concerning the subject, make sure to stick with us and keep an eye onto the following lines in order to see how to optimize images in WordPress!

What is image optimization in WordPress?

According to an official survey conducted in the US during 2018, it has been shown that the bounce rate in websites is as high as 87 percent. This can be translated into the number of visitors who decide to drop off a page as soon as the required loading time is delayed by only two seconds. Technically speaking, displaying high resolution images takes longer than the scaled ones. It is all mathematical – an image with 820×820 pixels might be loaded by the browser with only 400×400 pixels, yet the requested time will basically be the same. Among the best editors used for optimizing images in WordPress are:

• Photoshop – probably the most worldwide renown photo editor, it is used by millions of users in photo retouching, editing and improvement in dimensions. You can either go for the trial version or for the paid one, which comes with astonishing features. To manually change both the image’s resolution and dimensions, click on Image -> Image Size or File -> Export -> Save for Web for web upload;

• Lightroom – this is another preferred photo editor for WordPress image optimization which is also an application to be paid for. While using it, you can adjust both the image’s resolution and dimensions only manually, by following File -> Export.

Regardless of the chosen photo editor, the ideal image size should be set at a maximum of 1,500 pixels. You can also reduce the width as much as possible until you hit the mentioned number.

Why is image optimization in WordPress important?

Making a website profitable is both rewarding and enjoyable. The more unique visitors any website gets, the better it is for the total number of visits. A high traffic is known to generate a better Google rank, but not everyone gets it from the very beginning. Different SEO techniques are being used and image optimization makes no exception. It provides you not only with the ability to improve your GTmetrix and Pingdom scores, but also with a faster content loading. But here are the top 3 arguments why bad image optimization in WordPress can affect your website’s ranking:

• Using images that are too big – nothing makes a website less appealing than a set of images that are low on loading. It is recommended to use smaller images for a proper load time;
• Using more images than required – any image demands a HTTP request. Mathematically, more images demand more HTTP requests which, in turn, are ought to prolongue the load time. A CDN is a great tip to use at this point;
• Makes it harder for the whole content to load properly – in order to load, a mix of HTML, JavaScript and CSS is requested. This adds up to the requested time for image loading.

This is why image optimization in WordPress is so important. Shortly put, it affects the required loading time for the whole output.

Manage the size of Unoptimized images

First things first – before managing anything, it’s time to spot the ones which should receive special attention. There are various methods to identify unoptimized images used on your website, but the easiest method implies GTmetrix. It is a tool specially designed to scan the content of a website and provides a report with all the identified problems. As soon as you open it, go to the Page Speed/YSlow tabs and see if you spot the following items (known as website errors):

• Serve scaled images – proper sign that lets you know the images found on your website are too large and should be resized with the right dimensions provided by GTmetrix;
• Know the right image dimensions – covers the HTML or CSS part in WordPress. In short, it helps you know the width (and the height) the HTML or CSS of the image should have;
• Automatically optimize images – elements to automatically solve the identified unoptimized images;
• Mix up images with CSS sprites – is a great way to combine more images into one, which leads to a reduced website load time – not to mention it is extremely appealing and can be done with a CSS sprite generator;
• Don’t go for URL redirects – HTTPS, www or a CDN are delightful features your website should one day obtain. Still, using them by default might lead you to bad redirects, reason why tools like Better Search Replace are helpful enough to automatically provide your website with the right URL at all times;
• Use a content delivery network (CDN) – fasten the load time of your images by accessing them from a remote location, such as a CDN;
• Leverage browser caching – is a great way to cache your images and decrease the load time per each and every one of them, since they are being stored in the browser cache. WP Rocket is one of the top caching tools used in the world;
• Make favicon small and cacheable – the rules of thumb in here are 16×16 pixels, favicon.ico format and is stored within the cache (of your preffered cache plugin).

Although GTmetrix is extremely useful and reliable, bear in mind that a proper result will be provided only when scanning each page individually. It means the resulted metrics are relevant only for the page you specified, and each page comes with a different result.

Manage featured images

A featured image is used to enhance a website post by being placed close to a post title. Unlike a normal photo, it does not appear within the body of the post, but rather as a hint for visitors to stop and take a glance to what the WordPress post is all about. The benefits of managing featured images rely on the fact that you can show unique and specially designed header images, as well as thumbnails which generate special features upon the desired theme.

One of the greatest aspects in the management of featured images is that the size upon which you have decided will remain the same for the forthcoming ones. This means that you will not have to resize them each and every time you add up a new featured image. Though, the rule of thumb is to set the dimensions with regards to the theme you decided to use. Either way, remember that it should have the following width – 500 to 900 pixels – and to avoid JPEG images which are way too pixelated.

Manage the compression of the images

There is a really thin line between resizing an image and destroying it completely. While the first option is the result of a fine image compression plugin, the second one is just as close to interfere with.

One of the main advantages of using image compression is the reduction of time. Since a raw (uncompressed) photo is bigger and wider, the one obtained after going through the compression process is smaller and takes less time to be displayed on websites. Moreover, the vast majority of the available plugins are automatic (once installed) and immediately generates the compressed image. Without further ado, your visitors will love that – since they won’t have to wait that much to get to the heart of your website.

Another benefit of image compression is professionalism. This is a direct consequence mainly affecting your visitors, which are always critically scanning various websites for making the right choice in terms of source of information (and inspiration).

This goes without a say to the benefit of better user experience and even the opportunity of going for a data plan that is not that expensive.

Don’t Embed Images from External Websites

It is recommended to upload images directly on the website and not go for the copy-paste version. By using the latter, there will be generated more requests than it should for displaying the image since it is not stored within your server – but it rather has to do a detour for that.

If deciding to go for embedding images from external websites, the load time is expected to be higher and the user experience less appealing than desired. This will be directly seen in a drop off in the number of visits (and visitors).

Use plugins for image compression

Increasing and developing your website’s speed and performance can be done with image compression. Among the above mentioned benefits, it is important to note that the entire process is automatic and is used to optimize your images’ resolution, sizes and impact. Here are some of the best plugins for image compression used by most famous website owners:

• Smush

Installs: 1,000,000+ | Rating: 4.8/5 stars

A free and easy to use plugin worldwide renown as being among the firstly used plugins for image compression. Unlike other available tools, this one requires no prior registration to get the free version. After deciding upon the plugin, it will be included into your WordPress configuration setup which means that all images from here on will be automatically compressed (while running in the website’s background). For the best results, it is highly recommended to go for the paid version though;

• Shortpixel

Installs: 200,000+ | Rating: 4.7/5 stars

Makes a great choice especially for photographers who aim at risking not the slightest bit of image quality shown on the website. It features both the lossy and lossless compression types, regardless of file type – even PDFs;

• Compress JPEG & PNG images

Installs: 200,000+ | Rating: 4.5/5 stars

This WordPress plugin works with both PNG and JPEG images in terms of compression (50 to 80% for PNG and 40 to 60% for JPEG images). Once the images are uploaded to the website, they are further analyzed and optimized using the best algorithms;

• EWWW Image Optimizer

Installs: 700,000+ | Rating: 4.6/5 stars

Works best with both soon-to-be uploaded and already uploaded images by automatically optimizing them. It means that any image which is being featured on your website will go through the process of optimization without you even having to do any click further. The price of the plugin varies depending on the server ownership – it is free of charge when using your own server in order to optimize images, in contrast to the paid version if choosing the EWWW service;

• Imsanity

Installs: 300,000+ | Rating: 4.9/5 stars

Is mostly known due to the plugin’s depressive images that can be seen in its repository. Even so, this tool is perfect for resizing images until they get to a “saner” size in which a set of scaling functions are being used. By using Imsanity, any original image is being replaced with the scaled version made to fit your website even better;

• WP Retina 2x 

Installs: 100,000+ | Rating: 4.8/5 stars

This optimizing tool is perfectly designed for Retina images. By definition, this type of image requires twice the loading time of a normal photo, since they are larger and ask for more resources. After being optimized with WP Retina 2x, the WordPress images look flawless and their resolution is skyrocketing. High is too low to explain it;

• reSmush.it Image Optimizer

Installs: 100,000+ | Rating: 4.3/5 stars

Works with any image kind starting from JPEGs, GIF files or PNGs which don’t exceed 5MB. It comes with a free-of-charge version available for optimizing images with less than 5MB. What’s more, this plugin is extremely flexible and can be used also on other CMS systems, like Magento, Drupal and even Joomla. By default, the level starts at 92 and is anytime adjustable;

• Optimus Image Optimizer

Installs: 70,000+ | Rating: 4.2/5 stars

Is designed solely for WordPress to reduce the image size to optimal values. The free-of-charge version has a capacity limit of 100kb per file size which is being sent to its servers based in Germany. After being optimized, images are being brought back to the website. Of course, the entire process takes less than a couple of seconds to finish. It comes with a special feature in which the user is asked whether or not to keep image metadata (who is the author, what can be seen in EXIF data and some copyright information) as well as further file size reduction. From a flexible point of view, it works amazing with WP Retina 2x, WooCommerce and other WordPress multisites. Unlike other image optimization plugins, Optimus does not keep any image up on the server after the process is finished.

It’s not a secret anymore the fact that visitors are highly influenced by how long it takes for a website to display the required pages. They are expected to (and has been actually proven to) drop off the pages as soon as a website takes longer than 3 seconds.

Image compression provides your website with a reduced period of time required for it to load completely. Once an image is compressed, it obtains a lower quality (about 20 to 30% down) which will not be noticed since the size will be changed as well with smaller parameters.

Among the image optimization plugins which have been debated, Smush seems to stand out in the crowd for various reasons. On the one hand, it requires no fee, since it implies no upgrade for a premium account. Moreover, it features two benefits in one, being an image compressor and a tool of optimization which is totally automatic. On the other hand, there’s also Smush Pro which could be given a try for free during a month time period. Since the choice of an optimize image plugin is usually made once for a long period of time, remember to think twice before setting your eyes on one you are about to use the next following months.

Decide upon plugins with single functionality

Even though some of the above mentioned plugins would make a great fit on your website, having two of them which come with the very same features is not a great choice. Some of them (such as EWWW Image Optimizer and Smush) have the same characteristics and benefits (we should not forget about the EXIF data removal and impressive compression process), whereas others (WP Retina 2x) have special features used only for specific technology. This means that, without further ado, before deciding upon a plugin it is highly important to know which are the necessities of your own website – and what do you want a plugin to do in order to improve its user engagement.

But a double functionality is not the right path to go for. This will end up in overfilling your website’s server with undesired information and a double image optimization which requires a higher load time and more resources. In short, it leads to bad functionality that affects your website from the very beginning.

And the first ones to feel it are your visitors whose number is about to drop if their expectations are not being met.

SEO related image optimization

Search Engine Optimization is the proper strategy to use in order to format your website accordingly to show up among the first search results on Google (and other search engines). When it comes to image optimization, its benefits are higher than the work it implies. This translates into greater visibility, convenience and accessibility from outer world, coupled with higher traffic generated to your website due to increasing image occurrences on Google Image searches. If you are up for this, some of the following commonly used tips and tricks will have a great impact to your website’s well-being:

• Alt text – known as alternative text, it is a characteristic inserted within the HTML of an image tag. Generally speaking, it is used to give a hint over what your image represents without properly showing it to the search engines. This is a nice way to become one of the choices taken into consideration by Google algorithms. On WordPress, go to Media -> Library and further follow the Edit link that lays just below the image. Regardless of this tip, remember that SEO is never affected by the Title Text;

• Title tags – while alt text is used and seen by search engines, title tags are perceived by human eye. Optimizing title tags is important since it determines the level of persuasion your website has. If done properly, your website can generate an increased traffic, by popping up among the first search results and chosen by possible visitors. The way it works is easy – users hover over the image that is linked to your website while a small text describing it appears.
Between the two, using alt text helps you improve creativity and overall information found on the content. Still, it is recommended not to overfill either the alt or the title attributes, since this might affect the user experience in many ways – even make your website be perceived as spam.

Quick reminder

Nothing beats the success of a website more than a negative user experience. Organic traffic is generated by both visits and visitors, reason why making their stay on your website is definitely a top priority. At the same time, it has been shown that the most appealing and impactful element on human is an image. By coupling these two up, optimizing images in WordPress is clearly an astonishing method of creating the ideal unique experience, which starts with short loading time, high security and website stability.

Moreover, great SEO is linked with accessibility, user engagement and professionalism, which are the top 3 requirements of a successful online business. Help your website make one step further while staying in the market by optimizing images in WordPress – now you know how to do it like a pro.