*This post may contain affiliate links.
This is a step-by-step tutorial for online image compression. The file size is significant when it comes to SEO. Let me show you how to compress an image and better up your SEO.
Do you want to know how to compress images for your blog or webpage? This tutorial is for bloggers and online entrepreneurs who have difficulties in resizing images for the web. It’s essential that uploaded images are compressed after editing them, a file size of about 100-200KB is desired. Too large images are going to slow down your page speed and therefore have a negative impact on your SEO. Let us walk through my process on how to compress images, it’s an easy fix once you know how to do it.
Image Compression – My Process Stey-by-Step
There are 3 tools I work with you should know – I will explain them later in detail:
Step 1 – Lightroom
Adobe Lightroom Classic CC is what I use to organize and edit all images for my food blog. After editing, I export them into a local folder on my computer before uploading them to Wordpress. You can create user presets for exporting your images, which I highly recommend if you need your pictures in different quality and sizes. For example, I have one for my Wordpress theme and one for Stock photography. With the presets, you only have to go through all the settings once.
Let’s do one User Preset together:
In Lightroom go to File – Export – and the Export Mask will appear.
Lightroom Export Settings
- Export Location: Choose a folder on your hard drive.
- File Naming: Check the box “Rename To” to rename your image. I always do this, as I prefer to know what it is rather than a random number. Here for example it’s is a Nutella Zopf. Just to let you know, you have to rename it every single time if you export a new dish.
- File Settings: Choose JPEG as the image format and sRGB for the colors space, which is the best for the web. The quality is set to 60% which is mostly enough – if the image is blurry, try it with 70%.
- Image Sizing: I resize all my images on the “Long Edge” to 1,500 pixels (make sure to fit this number to your theme) and a resolution of 72 pixels per inch. *Update: I am now using the Seasoned Pro Theme and go for a image resize on the short edge of 720px.
- Watermarking: Click “Watermark” if you want to add one to your images. I used to add one to all my images (the little heart in the lower right corner you can see on my older images). You can upload a watermark in the Print section of Lightroom.
- Add to User Presets: Now, click the button “Add” in the lower left corner. A new window pops up, and you can give your preset a name. As you can see, I have done a few different ones. The next time when you export an image, you only have to click on the preset on the left side, and all your preferred setting are showing up.
- Export: Export your image.
Step 2 – ImageOptim
After you have exported your image, you have to compress it. A file size of 100-200KB is desired and doesn’t slow down your page. I compress all my images with ImageOptim, which is a free tool you can download to your computer. Did you download it? Open the Menu, go to File – Preferences, and a new window will pop up.
Go to Quality, click “Enable lossy minification” and set the JPEG quality (as we exported the image as JPEG) between 75% and 81%. Close the window and drag the image you want to compress into the ImageOptim window. Now the magic works. Now, you can see the new size of the image in the window. If it’s still too big, you can set the JPEG quality a bit lower, and try again. Sometimes you have to play a bit with it until you reach the desired quality.
ImageOptim – Compressed Image
As you can see, my image has a compressed file size of 112KB, which is perfect for my blog. We saved >50% of data with this step.
The only downside is that ImageOptim doesn’t store your original image. It happens that the compression is too aggressive and the picture is blurry. To avoid that, make a folder with the original images or export it again from Lightroom.
Your image is compressed and ready to be used for your blog
Step 3 – Google PageSpeed Insights
Check your site page speed with Google PageSpeed Insights. Go to the link, type in your URL and press Analyze. Google now runs a test on your website to analyze your page speed. I just run a check on my site and oooops, my page speed for the Desktop view is red! We can see that I have to optimize my images and reduce the size by 72%. I highly recommend you doing this and compress them; it is an easy fix to improve your page speed.
Google Page Speed Insights – Analyzed www.aline-made.com
I hope this article was helpful for you and you know a little bit more about successful blogging. Make sure to check out my other tutorials and please leave a comment if you have a question.