Optimising images for your website: A complete guide

category

read time

7 min

last updated

April 2021

Optimising images for your website: A complete guide

The visual appearance of your website is extremely important, and you should pay special attention to it. Obviously, serving uncreative content isn’t one of the best decisions you can make as a website owner. Here is a fun fact, when you read a dry piece of information, you forget almost 90% of it. Whereas, if there is a compelling image attached to the same piece, then you will remember about 65% of what you have read. Thus, peppering your website with eye-pleasing images won’t let your audience get bored and will stick your content in their mind. Just a few images and Voila! More views and shares, and a lower bounce rate 😱. It sounds like SEO heaven. What is this if not a dream come true, right?

BUT, there is a vital detail you should keep in mind: your images can also affect your page load time. This is something you should make sure to avoid since, according to Google, about 53% of mobile website visitors abandon the webpage if it doesn’t load within 3 seconds. I know that’s quite harsh, but it is what it is. All you can do is make sure that your images don’t slow your website down.

But here is some good news. Below are a couple of handy resources and platforms you can use to optimize your images. So, if you are looking for a comprehensive guide on how to optimize images for WordPress, then grab a paper and start taking notes. In this article, we will discuss why large images may slow your website down and look at a couple of practical tips on how to compress and optimize your images for WordPress. 

table of contents

Why Optimizing Your Images Is Important

Images are a must for any kind of content strategy. However, large images can become one of the leading causes why websites take too long to load. As mentioned above, slow-loading websites will most probably drive your visitors away. You are not that naive to think that everyone is patient enough to look at the screen and wait until your webpage loads, right? Most of your visitors will simply abandon it and look for substitutes. So, if you’re not looking forward to doing a favor to your competitors, then you should make sure that your website loads fast. Your website’s load time proves “time’s money” aphorism.

Although there are various factors that affect your website’s load time, media files, including images, account for about 63 percent of the bytes of today’s average websites. Therefore, if you want to lighten your webpage, you should optimize your images first. Furthermore, keep in mind that the speed of your website is also a Google ranking factor. Thus, the speed of your website will also determine its ranks in search results. Therefore, image optimization is something you should definitely consider.

To optimize your images, you can improve the number of bytes and the number of pixels. In short, it’s all about getting the best possible quality out of the least amount of bytes and pixels. This helps to decrease the size of your media files, which in its turn will improve the speed of your website.

Average bytes per page by content type

Image File Formats

First and foremost, it’s essential to get familiar with the most common image formats. Knowing the main difference between them and understanding which one is better to use in specific cases can be handy in creating more practical media files for your website.

Lossy vs. lossless

Image files can be either Lossy or Lossless. This mostly depends on the way the chosen format deals with the data of your image.

Lossless formats won’t let anything from your original file get lost since this format typically includes all of the data contained in your initial media file. That’s precisely why it’s called lossless. One of the main pros of using this format is that you can compress it in tandem with maintaining the original state of your file. So, optimization won’t really affect the quality. PNGs, for instance, are the most commonly used lossless formats.

On the other hand, lossy formats may decrease the color pallet of your image and remove the “unnecessary” data detected in your media file. Although these techniques reduce the file size, they may also affect the visual quality of your image. JPEGs are one of the most common “lossy” formats.

What are JPEGs

As discussed above, JPEG files have a lossy format. So, when you convert a large image into a JPEG, some of the information gets lost. Although converting your media files into this format reduces their size, it affects the quality of your images. However, if you are using small images, the impact will most probably be very unnoticeable.

We would recommend using JPEG images if:

  • You are working with online media files: JPEGs are pretty flexible and can be easily compressed, allowing you to quickly download the media files you found online.
  • You want to edit and print an image: If your files have high resolution and low compression, then you can use this format to edit and then print them.
  • When you are sending an email: this format allows you to transform your media files into a very small-sized image which is great for emailing. This can be useful for Email Marketing as well.
  • When you are working with photographs: since the size of your media file can get very large with lossless formats, JPEG as a lossy format can be handy when you are dealing with photos.
What are JPGs: How to optmise images for WordPress
What are PNGs: How to optmise images for WordPress

What are JPEGs

As discussed above, JPEG files have a lossy format. So, when you convert a large image into a JPEG, some of the information gets lost. Although converting your media files into this format reduces their size, it affects the quality of your images. However, if you are using small images, the impact will most probably be very unnoticeable.

We would recommend using JPEG images if:

  • You are working with online media files: JPEGs are pretty flexible and can be easily compressed, allowing you to quickly download the media files you found online.
  • You want to edit and print an image: If your files have high resolution and low compression, then you can use this format to edit and then print them.
  • When you are sending an email: this format allows you to transform your media files into a very small-sized image which is great for emailing. This can be useful for Email Marketing as well.
  • When you are working with photographs: since the size of your media file can get very large with lossless formats, JPEG as a lossy format can be handy when you are dealing with photos.

What are PNGs

PNG, on the other hand, is a lossless file format. So, all of the data contained in your media files are safe and guarded. One of the critical features of PNGs is their transparent background and the ability to display more colors.

You should consider using PNGs when:

  • You want to add a little bit of spice to your website through high-quality transparent media files. One of the most valuable features of this format is its “alpha channel,” which allows you to choose different transparency degrees. Moreover, with its color depths, PNG format creates more vibrant images.
  • You are looking forward to displaying illustrations with a small color pallet. Obviously, any format would work; however, PNGs deal better with limited colors.
  • You nееd smаll filеs: the PNG format allows you to reduce the file to very tiny sizes, making a perfect image file for your website. This is especially relevant for those images which are simple in their shapes, colors, or texts.
Difference between PNG, JPEG, WebP, GIF and SVG: How to optmise images for WordPress
Difference between PNG, JPEG, WebP, GIF and SVG: How to optmise images for WordPress

How to Optimize Images for WordPress

Now when you are familiar with the types of the most common formats and know-how critical the role of optimization can be to your website, it’s time to discuss several tools and platforms that will help you optimize your images. So, if your site is among those 75 million WordPress websites, then put your thinking caps on and read further. In this section, we will provide you with different ideas on how to optimize images for WordPress.

How to Optimize WordPress Images With Plugins

Firstly it is worth noting that you can optimize your images for WordPress with or without plugins. If you are not skilled in working with various image editing programs and software, don’t despair. Luckily, there is a range of image optimization and compression plugins that will lend a hand. These plugins will automatically optimize your images and display the final compressed versions on your website.

Let’s take a look at the list below:

  1. reSmush.it
    This is one of the best image compression plugins for WordPress. This plugin helps you optimize your images with only two clicks. Although with “reSmush.it,” you can’t set different compression levels, it is still a great plugin to optimize images for WordPress websites. It’s worth noting that if your media files are not larger than 5MB, “reSmush.it” allows you to optimize them for free.
  2. EWWW Image Optimizer
    This is yet another excellent image compression plugin solution for WordPress. With EWWW Image Optimizer, you can optimize and compress your new image uploads. This plugin allows you to compress your previously uploaded media files as well.
  3. Compress JPEG & PNG
    This plugin allows you to automatically optimize your PNG and JPEG images on upload. It integrates TinyPNG and TinyJPG to compress your files. If spending money on image optimization and compression is not in your plans, then keep in mind that the free account allows the users to optimize only 100 images per month. Furthermore, with this plugin, you can also specify which image sizes you are willing to optimize.
  4. ShortPixel Image Optimizer
    ShortPixel Image Optimizer is another handy WordPress image optimization plugin. This plugin offers multisite support with a single API key, so it’s pretty user-friendly. As in the case of Compress JPEG & PNG, with a basic ShortPixel Image Optimizer account, you can only optimize 100 images per month.

How to Optimize WordPress Images Without Plugins

As you can retrieve from the previous paragraph, there are various helpful optimization plugins you can install on your WordPress site. However, third-party plugins to optimize images for WordPress may have several side effects. Below you can find some of the issues installed plugins can cause:

  • Plugins may be heavy and slow your site down. So, there won’t be a reason for using them since they won’t serve their initial purpose of lightening your website’s load.
  • Your plugins may not be compatible with the theme of your WordPress website.
  • Installed plugins may also change the way your website looks.

It would be bold to claim that you will necessarily face one of those issues. However, if you are not very enthusiastic about risking it, then scroll down and read further. In the upcoming paragraphs we will discuss several tools that will optimize images for WordPress without plugins.

Online Tools to Optimize WordPress Images Without Plugins

As mentioned above, there are many online tools designed to optimize WordPress images without plugins. Below you can find some of the best ones.

  1. TinyPNG
    TinyPNG is one of the best online platforms to optimize images for WordPress without plugins. You can use this tool to compress images with PNG and JPEG formats. One of the best features of this platform is that it reduces your files’ size up to 70% without affecting the quality of your images. This tool can be used for GIF optimization as well.
  2. Kraken
    This platform offers one of the fastest image optimization tools. It runs a unique algorithm that allows you to optimize your media files as much as it is possible without sacrificing the quality. Kraken will definitely improve the speed of your website, and your visitors will leave the latter with a positive user experience in mind. So, if you’re looking for tools to optimize images for WordPress without plugins, then you should definitely consider this one.
  3. JPEG.io
    JPEG.io is another platform you can consider applying to optimize WordPress images without a plugin. This tool supports various formats, including JPEG, PNG, and GIF. You can either drag and drop your images or upload them from different file hosting services such as DropBox or Google Drive. JPEG.io will compress your images without changing their size.
  4. Compress JPEG
    Compress JPEG is also an optimization tool that you can add to your list. It allows you to upload and optimize up to 20 images at once. Additionally, besides using this tool for image compression, you can also use it to change the formats of your media files.

Final thoughts

In short, image optimization is something you should consider if you want to have a fast-loading website. Keep in mind that more than half of your audience will simply abandon your website if it doesn’t load within 3 seconds. The paradox is that they will also leave it if your content is not visually pleasing and attractive. The only solution here to reach the golden middle is image optimization. Above, you can find several excellent tools to optimize images for WordPress with or without plugins. All you need to do now is choose one of them and improve your visitor’s user experience.

General FAQ

How can I reduce the file size of my images for WordPress?

There are many plugins that optimise images by default, such as reSmush.it, EWWW Image optmizer, Compress JPEG & PNG and ShortPixel, however some of the free versions of these plugins have quota limits. If you would like to optimise WordPress images without using a plugin, TinyPNG.com and kraken.io are great free websites to do so.

What's the difference between JPEG and PNG files?

In a nutshell, JPEG file sizes are smaller than PNGs allowing for faster loading times, however the quality may be lower and there is no transparency. JPEGs are suitable for large photographs. PNGs are suitable for smaller, more detailed images.

Which is better: JPEG or PNG?

Neither is superior, it all depends on what your image looks like. If you need to upload small, high quality, detailed illustrations, then choose PNG. If you’re uploading large photographs, then choose JPEG to keep the file size as small as possible.

Share on
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp

I hope you're enjoying this blog post!

If you want my team at Digital Hero to help your online business excel, just book a call.