Yes, all the other articles you read about image optimization are very true. It IS very important to optimize your images on your website. That includes your logo, about me picture, header, slider images, etc.
What is Image Optimization?
Simply put:
Image optimization is reducing the file size and compressing the image without compromising too much on quality, so it doesn’t take up too much space on your website.
Why is it necessary?
It is very necessary to optimize your image because unoptimized images have a huge impact on your site’s speed. And the more slowly your site loads, the higher the bounce rate. This means that people will leave your site before even seeing or browsing it.
How horrific is that!
You certainly don’t want people just exiting your site like that after you have put in so much work to build it.
Does it affect Google & SEO ranking?
Yup! Very much.
Google has recently told us that site speed plays an important role in SEO ranking.
This means that even if you have cleverly inserted relevant keyword throughout your site and have the best info about your niche but your site take more than 10 secs to load, you can kiss your potential traffic goodbye.
According to strangle loop research, a one-second delay in website loading time costs you almost 11% fewer page views and a 16% decrease in customer satisfaction.
What is the difference between lossy & lossless Compression?
When I was building my blog, I kept seeing these terms and felt like the new kid at school. You know, dumb and naïve.
These terms were new to me as they are to you (if they are).
So here is the thing you need to know:
Lossy: It means that when you compress your image, some of the data in your original file is lost. It cannot come back. And the more you compress the image to reduce file size the more it loses its original charm (the way it once was). But you can always copy the image before compressing it.
Remember: The more the compression the poor the quality of the image.
You need to find a balance.
Lossless: It means that you can reduce the file size without compromising much on quality (if any at all). The downside is that you can’t reduce the file size too much.
Image compression through the lossless method is great if you can’t compromise on quality at all. eg. Photographers.
But here is the thing: you mustn’t upload any image over 100KB max.
Now you can decide for yourself if you want to compress the image in the lossy or lossless method.
Plugins for Image Optimization
Listed here are some of the most efficient plugins for image optimization.
Short Pixel
It offers:
- Lossy and lossless compressions
- compresses JPG PNG, GIF (still or animated) images and also PDF documents
- Keeps a backup of the original image
- You can choose image thumbnail sizes to compress
- Choose to bulk or manually optimize images
- Free quota of 100 image compressions(no size limit) per month
Its monthly subscription of $4.99 per month offers up to 5,000 image compressions per month, and a one-time package is $9.99 for 10,000 image compressions. (Personally, I loved it)
Imagify
Imagify is made by the same company that made “WP Rocket”. A very good premium caching plugin for site speed.
It offers:
- Lossy and lossless compressions
- Three different image optimization levels (Normal, Aggressive, and Ultra)
- Create and serve WebP images to browsers that support it
- Automatic resize options
- Keeps a backup of the original image
- To keep or delete EXIF information*
- Bulk or manually optimize images
- Free up to 25 MB total per month
Imagify monthly plan is $4.99 per month for 1 GB of images, and the one-time plan is $5.99 for 500 MB of images. Small images are better suited to this plan than larger images found in stock photography sites.
*EXIF stands for Exchangeable Image File Format. EXIF data to put it very simply is all the data your picture stores at the time of its capture. It includes image properties like the location of capture (through GPS), time of capture, camera settings, etc. If you’re going to share the photo, it’s not very security friendly.
Compress JPEG & PNG images
It offers:
- Lossy compressions
- Optimizes new and bulk old images automatically
- Automatically resize image dimensions
- No file size limits
- Remove EXIF information
- Free up to 500 images (no file size limits) per month
Its monthly plan is based upon usage. 10,000 images cost $0.009 per image. Above that, you’ll pay just $0.002 per image.
TinyPNG also has an online site to compress images (free) for anyone who doesn’t want to use a plugin.
EWWW Image Optimizer
It offers:
- Optimizes on your own server (just optimize when it’s not the peak time or it may slow down your site )
- Optimizes images in JPG, PNG, GIF, and PDF format
- Four different compression levels
- Scheduled optimization(at your given time) to save server resources
- Convert PNG to JPG, and vice versa
- Create and serve WebP images
- Bulk optimize images
- Resize images to max dimensions automatically
- Its core features are free for unlimited use
You can choose to pay if you want to:
Connect to CDN and resize images (this method makes your site speed fast as the images aren’t using your server resources to get optimized), Unlock all the compression methods, and a few other features.
Compression plans cost $0.003/image. The plan with the CDN costs around $9 per month.
“Okay, but is there any way to reduce the file size without the need for a plugin?”
Yup! Absolutely!
You can also manually optimize and compress your images if you don’t feel the need to have a plugin.
There are plenty of resources to resize and compress your images online. First, you need to resize then you need to compress (reduce file size) the image.
Resize Image: Be Funky or if you want to resize in bulk then B.I.R.M.E
Compress Image: TinyPNG and TinyJPG
Another great online alternative that handles both resizing and compressing: Pixlr
Copy these sites on your notepad or just bookmark the post, if it’s too much for you. Gradually test and see what’s better for you.
Difference between PNG and JPEG images
PNG is used for graphics and JPEG is used for photos.
For example, all the photos on this post are in JPEG image format. This is because JPEG images are significantly lower in file size than PNG.
But if I want to upload a logo or thumbnail, then it’s gonna be in PNG format. PNG image format makes the graphics of the image sharp and crisp. But this also means more file size.
To the naked eye, both will look almost the same. BUT when the compression happens, things began to change. The more you compress a JPEG image, the more choppy or pixelated it will look.
It’s better to not compress plain/flat colors too much as they show visible compression marks.
I hope I have cleared all the doubts you might have about image optimization.
To test out your site speed and check if your images are optimized enough, use PageSpeed Insights. (You’ll be using that a lot in your blogging journey, so just bookmark it)
Tell me in the comments if there is anything you don’t understand. Also, share this post with people who you think would benefit from it!
