Hello & welcome to the image optimization tutorial.
Before we jump in, let me give you an overview of what topics I am going to tackle:
- What is Image Optimization?
- Benefits of Image Optimization
- Optimizing Images for Web Performance
So let’s get started!
1. What is Image Optimization?
Did you know that images, most of the time, account for the most occupied space on a website and therefore are the most often downloaded bytes on a page?
If that is the case for you, image optimization is a necessity for you to ensure you a fast page speed and good user-experience.
But what exactly does Image Optimization mean?
Image Optimization is the process of reducing the file size of your images as much as possible but at the same time, delivering them in high quality, right format, size, and resolution.
Example of resizing an image to the correct dimension:
2. Benefits of Image Optimization
There are 3 main benefits to optimize your images:
- Faster site speed
- Search Engine Optimization (SEO)
- Less Bandwith
2.1 Site Speed
Under site speed, we usually understand the amount of time it takes a website to fully load. There are a few tools with which you can measure your site speed, e.g. GTmetrix, Pingdom, and Google Page Insights.
Many factors play a role for fast page speed – starting from your hosting provider, the theme you are using, which caching plugin you use, image optimization, etc. (more details on how to optimize your page)
Images are an important piece of content on most websites, and without optimization can slow down your site significantly.
You probably know this from yourself, but most users expect that a website loads as fast as possible. To give you a little more perspective on how important site speed is:
By optimizing & compressing your images you will make sure that your page is loading quickly and improves your user experience. Keep reading to find about the specific methods & tools for image optimization.
2.2 Search Engine Optimization (SEO)
Besides a fast speed, image optimization will also improve your SEO scores.
High-quality images, correctly optimized, can improve the quality of your site immensely and encourage more engagement with your users.
What do we understand under a “well-optimized” image? It’s a combination of formatting the image, setting a proper title, having a title text, having an alt text – all of this goes into your Image SEO.
Not only will this give the search engines an idea of what your page or website is about, but it will also make it easier for people to find your site.
A website with well-written content, good images that are optimized has a good chance of ranking high on Google, earn shares on Social Media, and maybe even earn backlinks from others. All of these points will contribute to build up your site’s domain authority and increase your traffic.
The points mentioned above are just a few important reasons why you shouldn’t neglect image optimization. At the same time – image optimization alone won’t guarantee you fast site speed performance & great user experience.
Factors starting from your hosting provider, the theme you are using, which caching plugin you use, image optimization, etc. (more details on how to optimize your page) will play an important role.
2.3 User Experience
The last benefit of Image Optimization is the enhancement of your user experience. Through compression, you are allowing the user to have a faster user experience without reducing the image quality.
By giving each image a proper title and alt text you will ensure that users who will find your website via search engines (most likely Google) will get exactly the results that they were searching for. If you look at it from the “technical side” – you are feeding the search engines information for them to properly “understand” what your site is all about.
By optimizing your images you are not only improving your SEO but also improving the user experience on your site. “You get two birs with one stone”.
3. Optimizing Images for Web Performance
Let’s jump into the actual process and what you need to do to optimize your images. There are quite a few different factors that we are going to discuss:
- Identify unoptimized images
- Formats you should use for your images
- Different compression types
- Tools & plugins for image compression and optimization
3.1 Identify Unoptimized Images
The best way to identify if your website has unoptimized images is to run it through GTmetrix. GTmetrix doesn’t only supply you with your website’s performance score but also gives you detailed information about what you actually need to optimize.
Each of the points mentioned in the “recommendation” will give you a breakdown of what exactly needs to be optimized which will make our life a little bit easier.
Here is an example how the suggestions looks like from Bestbloggingresources.com:
3.2 Image Formats & Compression Types
What different image format do exist and which one should you choose?
There are three popular image formats:
- JPEG or JPG
JPEG or also known as JPG is short for Joint Photographic Experts Group. JPEG images are widely-spread and next to PNG one of the most used formats to save images. They are well suited for high compression levels and are perfect for photographs because they can display millions of colors.
When we are trying to compress images, the “lossy compression” is one of the most common settings that plugins or caching tools use. JPEG images support this setting but the result after the optimization has a slight drop in image quality. It will be visible especially in bigger images. Of course, you can always control the level of compression to ensure the best quality of your images but it might slow down your performance.
The PNG image format, next to JPEG, is one of the widely-spread formats for images. It stands for Portable Network Graphics. Because PNG images can display millions of colors, they are perfect for screenshots, infographics. etc.
As mentioned above, the “lossy compression” is one of the most common settings that plugins use to compress the images. Another common setting is the “lossless compression” which is supported by PNG. During it, no data is lost which allows PNG images to remain crisp and sharp compared to JPEG images after compression.
Make sure to save & upload your images in the PNG format to your WordPress site, especially if your website has a big focus on images.
The biggest difference between JPEG – PNG & GIF format is that the GIF format supports both animated and static images. Many animations that are used on social media are GIF images. At the same time, GIF images only support 256 colors which makes it unsuitable for illustrations with a lot of color gradients.
Just as the PNG images, GIF uses the “lossless compression” to reduce file size without losing and visual quality.
The decision which formats you should use depends 100% on your needs. As mentioned above PNG images are ideal for screenshots, infographics, or maybe even your logo. JPEG is great for small images on your website – like thumbnails. GIF images are ideal for animations or short videos if you want to avoid uploading complete videos on your website.
3.3 Tools & plugins for image compression and optimization
To optimize your images you can use plugins like Imagify, ShortPixel, or Smush which are all free. The only hick-up with free image optimization plugins is that they have a monthly limit for how many images you can optimize per month. After hitting the limit, you have to wait till next month until your credits are restored or you pay money for the image plugin, that you are using
An option that I prefer instead of using multiple plugins is to buy one plugin that does it all, Swift Performance.
After downloading and installing the image optimization plugin of your choosing, you will need to follow the initial instructions to set-up the plugin.
The following settings will be important for optimizing your images:
Step 1: The main setting that you want to adjust is the compression level of the images.
Step 2: Swift Performance offers the options “lossless“, “slightly lossy“, “standard” and “aggressive” for images.
Step 3: The option “lossless” should be your go-to option which reduces the image size but preserves the quality!
Step 4: After you chose the compression level, go ahead and bulk compress your images.
Step 5: The free versions of Imagify, ShortPixel or Smush will just give you a certain amount of “credits” per month which you can use to compress your images. After that, you either wait for another month or pay their fee.
If you are looking for an all-in-one plugin that includes caching, image optimization, database cleanup, font hosting, plugin organizer – you should definitely consider going for Swift Performance.
This is how the settings overview for images looks like at Swift Performance:
After you follow the instructions you should be able to improve your site speed and loading times!
Let us know if those settings helped you to improve your website speed. If you have any questions – drop them in the comments!
- Great & easy to use Setup-Wizard (recommended for beginners)
- Offers advanced caching features
- Cache Preloading
- Database Optimization
- Image Optimization
- GZIP compression
- Five-star reviews
- Multisite Compatibility
Join Our Weekly Newsletter
Get our tutorials about blogging, hosting, Pinterest, how to drive traffic to your blog, caching, and image optimization. No charge. No spam. Only knowledge.