Optimize images on your website to speed up how fast your website pages load. This in turn means Google will love your website and done regularly this will help your ranking.
Google loves fast websites and so do customers.
Nowadays, it’s important to find present good quality images on your website.
However, you need to balance quality with the size of the file, because this affects how fast your page loads.
If you directly load images to your store, this guide is for you.
If you have no workflow for optmizing images then this guide will help you.
If your site has tons of images already and your pages load slowly, then this guide is especially for you.
HOW TO OPTIMIZE IMAGES
There are two ways to optimize images. First of all, you need to optimize images before you load them onto your website or blog.
However, if you already have images that aren’t optimized we’ll show you how to sort those out as well.
In this guide, we will share the best image optimization tools for image compression.
Whilst some people do have tools like Adobe Photoshop, most people are looking for an simple, quick and free ways to losslessly compresas images.
Lossless image optimization simply means you reduce the size of the file, without losing any quality of the image.
TABLE OF CONTENTS
- JPEG Optimizer
- Tiny PNG
- Compress Now
Why Optimize Images
Google tells you that you need to opmize images. Why?
According to a study by Microsoft, the average human attention span has dropped from 12 seconds to 7 seconds. More shocking though, is the fact that research from Jampp found that the average attention span decreases by a massive 88 percent each year.
What does this mean for you as blogger or if you run an ecommerce store?
In a nutshell, it means if your website loads slowly people will lose simply move onto to another site.
A slow website then means you potentially lose potential customers before it even loads.
According to case study research involving Amazon, Google, and other larger sites, a 1 second delay in page load time can led to 7% loss in conversions, 11% fewer page views, and huge drop in customer satisfaction, 16%.
How To Check Your Speed and Images
Many people just arting out don’t realise how important website speed is.
Often they think there website is ok and don’t test it. Because browsers hold a cached copy, they don’t experience it like a new person visting the site for the first time.
However, a normal user who is visiting your website for the first time may not have the same experience.
In fact,because where the site is hosted matters, people in different Countries will have totally different load times.
So test your website using tools like Pingdom.
Different Types of Images
There are two main file types you’ll want to optimize for the web: png and jpg.
WORKING WITH JPGS
JPGs (also known as JPEGs) are the most popular file type for images on the web, because they are generally smaller than png files. JPGs are ideal for photographs, or images with color, shadows, gradients, or patterns. JPGs have a huge color pallet and make these type of images look great.
Broadly most people save jpgs in either high, mid or low quality. High quality delivers the full impact of the image but has a much bigger file size. Low quality images start to become pixelated and look more grainy. So imost cases you want to choose a mid to low point for use on the web.
Obviously the size of the image in pixels matters. We will discuss this in a moment.
WORKING WITH PNGS
The main difference between PNGs and JPEG’s is that PNG files can be transaprent.
PNGs are the another commmon file format used on websites.
PNG-24 provides a much higher quality image, however the size of an image file becomes large.
This is where good lossless optimization tools come in.
What To Use and When
Use PNGs for logos, icons and featured images because they are high quality, and offer transparency.
Use jpgs for most other images on your site.
Optimizing Images The Right Way
47% of users coming to your website expect your webpage to load in under 2 seconds Furthermore, 40% will leave a site if a page that takes more than 3s to load. For this reason, it’s vital that your images are small and so load quickly.
There are two things you can do to properly optimize your images:
Use The Right Dimensions
First of all, save the right size image to you website. If you have a blog then the theme usual will have default dimensions for your blog featured images. As an example that might be 800px by 400px. So, you just need to resize images to fit that size and not use bigger images.
If it is for a blog banner then look up the width of your page. There is a simple chrome extension you can use to measure sizes called Page Ruler. For instance, you can use Page Ruler to measure sidebar widgets to get the right size images in your sidebars.
Save The Right Quality
Lossless compression is the ideal. So what you need to consider os the best way to do this. My top recommendation is to save a jpg file to around 30% of original. For png files you need to use a compression software. So one of the online tools or a tool on your Mac or PC.
There are two ways of optimizing your images prior to uploading:
- Using online tools that allow you to upload either single images or a set of images (bulk processing).
- Using tools for your PC or Mac that optimize them either as single images or bulk.
#1 – JPEG Optimizer
JPEG Optimizer is an online image optimization tool that helps you compress images such as png and jpg. The image compression level bar makes it easier for you to optimize your photos as you need.
You can also resize the images in JPEG Optimizer, so the image file size can be reduced and it loads faster on your site.
#2 – Optimizilla
Optimizilla produces good quality results and a low file size. You are able to compress JPEG and PNG photos with this tool.
To optimize images upload up to 20 images and set the compression level for each photo separately.
#3 – Kraken
Kraken has a paid and free option to optimize images. The good thing about Kraken is that it can also take care fo those images that you already have on your WordPress website. Because Kraken has a WordPress plugin you can add this and then optimize images already uploaded.
However, if you have a lot of images on your site, you will need to move to the paid plan. The paid features also allows you to resize images as needed.
#4 – Tiny PNG
Tiny PNG has been around for a while and is one of the more popular online cimage compression tools. It’s a free image optimization tool with which compresses images both JPEG and PNG images.
You can upload up to 20 images in one go and then download the images either to your computer or save them to Dropbox.
#5 – Compressor.io
Compressor.io is another superb and quick tool to optimize images. Because its is able to losslessy compress JPEG, PNG, Gif and SVG files.
#6 – GiftOfSpeed
GiftOfSpeed compresses PNG and JPEG images. Furthermore, it uses multiple image compression methods to reduce the file sizes. Overall, this is a quick and efficient tool to optimize images.
For the more technical of you, Gift Of Speed also has a further range of tools to optimize your website speed.
#7 – JPEGmini
JPEGmini reduces the file size of your images to optimize your page load time. A good tool that has a visual element which shows you a before and after image.
#8 – reSmushit
reSmush.it is great WordPress plugin to help you optimize existing images and new ones.
The plugin use the reSmush API to optimize images You can exclude individual images from compression in case you need to add an image in full size.
#9 – ShortPixel
4. ShortPixel Image Optimizer is great tool to optimize images on WordPress. You sign-up using your email address to the service for the basic account. As an example, the basic account allows you to opitmize 100 images per month. However, if you need more, you will need to upgrade to a paid plan.
#10 – CompressNow
CompressNow is useful optimization online image optimization tool. You can shrink JPEG, PNG and Gif images. For each image you can set a compression level.
The two best software tools for your Mac are:
ImageOptim – is a fantastic lossless image compression tool and our preferred tool. It maintains a high quality image but does a great job of reducing the size. All you do is ‘drag and drop’ the images and compress them as per your convenience. If you are operating on Mac system, then this is best tool to optimize images.Enable Guetzli for the best results.
The two best software tools for your Mac are:
Riot – an easy to use image compressor with a simple and intuitive interface.
PNG Gaunlet – a ligtweight and user friendly tool that losslessy compresses PNG files.
To summarize then here are the key points:
- Know what size image you need and don’t use a size bigger than that.
- Use jpg for complex images and png where you need transparency and/or a good quality.
- Optimize images before you upload them.
- Use a good plugin tool for your WordPress or Shopify account to optimize images you already have.