Publication: This content is supported by reader, which means that if you click on any of our links, we may earn a commission.
Image optimization is the process of reducing the file size of an image without sacrificing its quality. If your site has performance issues, including slow page load times, image optimization can help resolve your issues.
Why it’s worth optimizing images for a site
Images and other visual content are valuable assets for any website. Whether you’re using an image to split text into a blog post, showcasing your products, or attracting attention to a landing page, the uses and possibilities seem endless.
The problem with adding images to your site is the file size. Unoptimized images are large, which means they take longer to load on the screen. These delays can lead to high bounce rates and a poor browsing experience for your visitors.
In addition to the user experience, insufficient page load speeds have a direct impact on SEO. Google and other search engines penalize sites with poor page load times.
By taking the time to optimize your images before uploading them to your site, you will benefit from faster page loads, fewer bounces, and higher rankings in the SERPs.
The investment required to optimize images for a website
Optimizing images for your site adds some extra steps to your current process. Fortunately, the steps should take no more than a few minutes at most. The actual cost of optimizing images is free of charge for most of you.
There are dozens of free image optimization tools on the market today, but TinyPNG is without a doubt the best. This web-based platform has been used to optimize more than a billion images.
TinyPNG allows you to optimize up to 20 images simultaneously, up to 5 MB each – 100% free. To optimize over 20+ images and extend the file size limit to 75 MB, the TinyPNG Pro plan starts at $ 25 per image. Year per User.
For WordPress pages, there is even a TinyPNG WordPress plugin that automatically optimizes new images uploaded to your CMS. This plugin drastically reduces the time it takes to go through the image optimization process.
5 steps to optimize site images
Here is a thorough guide to the step-by-step process required to optimize site images. The process described below assumes that you are not using a WordPress plugin for help.
# 1 – Prepare the image and make sure it is saved correctly
Even if you use an image optimization tool or a compression tool, there are a few things you need to do before running the image through compression.
First, make the necessary changes or improvements to the image. Things like filters, cropping, contrast adjustments, exposure, saturation, and other edits need to be addressed before proceeding. You can continue to use the image editing software you are familiar with for this step.
From here, it is important that you save the image correctly. For most site images, you have two main options to consider – PNG and JPEG.
PNG image files – PNG files are larger, but they support a wide range of colors. PNGs are also the only image file format that works with a transparent background on a website. If you edit a photo multiple times, it’s in your best interest to export it as a PNG before uploading it to your site. JPEG image files – JPEGs provide a good balance between quality and file size. This is the most common file format for digital cameras. JPEGs should work for the vast majority of images on your site, especially since the file format is smaller than a PNG.
Overall, PNGs work well for images that do not have lots of color. If an image has many lines, icons or sharpness, PNG will also be a better option. JPEG compression can create some contrast issues in this scenario.
A major benefit of using JPEG files is that you can select the image quality before running it through a compression tool.
Here is an example using Preview, the standard image viewer on a Mac:
If you export images as a JPEG file, you can adjust the quality by simply sliding the bar. By reducing the image quality, you also reduce the file size.
Unless you are a professional photographer, JPEG quality around 40% to 50% should be fine for most of you. For example, if you’re uploading photos to your client’s wedding portfolio, it’s probably in your best interest to sacrifice image size for image quality.
In addition to editing and selecting the correct file format, you must also prepare the correct image dimensions before proceeding to the next step.
Think about where and how the image will be used on your site. Eg. The dimensions of an image used in a blog post are likely to differ from an image icon on a product page.
If the content area of your blog is 700 pixels wide, the dimensions of an image here should never be larger than 700 pixels.
Each time you resize an image, be sure to enable the ability to scale the height and width proportionally. Otherwise the image will be distorted.
Here is an example of a JPEG that was 2634 x 2718 pixels and 1.8 MB:
By changing the width to 700 pixels, the height is automatically scaled to 722 pixels. This also reduces the file size.
Once you have saved the image with the correct file format and dimensions, you can proceed to the next step.
# 2 – Run the image through a compression tool
Now it’s time for the image to be compressed. The easiest way to compress images is with the help of an online tool.
There are countless options to choose from. But for our purpose here today, we need to use TinyPNG.
Thousands of companies around the world rely on TinyPNG for image compression. This includes major brands like Samsung, Walmart, Sony, Lego and Bank of America. As mentioned earlier, you can use this TinyPNG for free to optimize images for your site.
Start by navigating to the TinyPNG website. From here, you can simply drag and drop your image file into the box at the top of the screen.
The tool automatically compresses all image files that you upload without any additional steps or actions required at your end. When the process is complete, just click the download button to download your newly compressed image.
In the example above, TinyPNG took a 534 KB JPEG file and compressed it by 86%, reducing the file size to only 76 KB.
The original image that we started with before step 1 was a full 6 MB! This is a file that would be too large to compress using TinyPNG’s free service.
But after taking the time to save it as JPEG, adjust the quality and change the dimensions, it set us up for success with compression.
Let’s pretend we’ve just changed the quality of the original JPEG without adjusting the dimensions. If you refer to step one, you will see this reduced the file size to 1.8 MB (still significantly less than 6 MB).
If we run the file via TinyPNG, it will be compressed to 446 KB – almost six times larger than our 76 KB file, for which we changed the dimensions.
That is why preparation in the first step is so important. If you jump directly to the compression tool, you still leave a lot on the table in terms of how much you can optimize the image.
The reason why we recommend TinyPNG so highly is that the difference in image quality cannot be seen with the naked eye. Look at this example by comparing two transparent PNGs before and after compression:
Do you see any difference? Did not think so.
# 3 – Upload the image to your site
This step will look a little different for everyone. It all depends on the CMS you use to run your site.
WordPress users want a different interface than Magento, Shopify, Drupal, Joomla, BigCommerce, etc. Since WordPress is the world’s most popular CMS, and that’s what we use to run our site here at Crazy Egg, we use it as an example at this stage.
Navigate to Media on the left side of your WordPress dashboard. Then select Add New and drag and drop the image, or select a file from your computer.
Once an image has been added to your WordPress media library, it’s easy to paste into blog posts or landing pages on your site. Alternatively, you can complete this process in real time when creating new content on your site.
For example, let’s say you’re writing a new blog post on WordPress. Writing the text and then coming back and inserting images later may not work well for your process.
Since the image optimization process only takes a minute or two, you can review the first two steps when you reach a point in your blog post that requires an image.
Then just click the Add Media button on the post and upload the image without leaving the blog.
If you feel like navigating away from the post to take care of the image optimization distracts your writing workflow, it’s ok. Do not forget to add the pictures when you have finished writing.
# 4 – Be your photos on a CDN
Remember why we optimize images in the first place – we try to improve the page loading speed.
In addition to the image optimization itself, you can take this concept a step further by hosting your optimized site images on a CDN (content delivery network).
Instead of storing the images on your own servers, CDNs have networks strategically located around the world. So visitors to the site get images delivered to their screen from a server closest to them, geographically speaking.
For example, let’s say your webpage servers are located in the United States. If a user in Europe lands on your site, CDN can use a server that is closer to the specific visitor, which ultimately increases the page load speed.
Tinify CDN is TinyPNG’s content delivery network. So if you use TinyPNG to optimize your images, it’s only natural to consider them as your CDN provider.
While a CDN does not replace your web hosting service, it can remove a significant load on your servers.
Tinify CDN starts at $ 15 per Month. But the plan really only includes personal websites and small blogs.
Most of you must at least sign up for the Business Package. This plan starts at $ 69 per. Month and you can try it for free for 14 days.
# 5 – Use a Lazy Load Plugin (BONUS)
Now you have already optimized the images for your site. And while there is nothing you can do to further optimize the image, there are still steps you can take to ensure your pages load as quickly as possible.
Lazy loading plugins are your best option here.
The concept behind lazy loading is simple. Images that are not in the field of view are not loaded until a visitor gets closer to that part of the page.
So images at the bottom of your page do not load at the same time as an image over the fold. This tip significantly increases your page load speed, especially for multi-image pages.
Examples of popular lazy load plugins include:
For those of you who want to take your website’s image optimization strategy to the next level, these plugins get the job done.
Now that you’ve mastered image optimization for your site, it’s time to focus on other ways to improve your web site’s performance.
See our guide on the best ways to speed up your site and improve conversions. These tips go beyond basic image optimization.
You should also learn how to clear your cache in WordPress. This five-step guide is extremely useful for WordPress beginners looking for ways to improve their site performance. This is especially useful for sites with many images.
This article was written by today’s Daily Eggspert.
Latest posts by Dagens Eggspert (see all)