This post is for all bloggers and other online entrepreneurs who have difficulties to resize images for their website. It’s is very important that your images, which are uploaded to your blog or website, aren’t too large. An optimal size is around 100KB. If images are too large, it’s going to slow down your page speed, which also slows down your organic traffic. So, if you are looking to learn more about SEO, don’t miss this one out. It’s an easy fix once you know how to do it.
I am going to walk you through my process for the optimal image size
There are 3 tools you should know – I will explain them later:
Step 1 – Lightroom
Adobe Lightroom Classic CC is what I use to organize and edit all images for my food blog. When this task is done, you have to export them to a local folder on your computer to upload them later to your blog. Exporting is very simple, once you know how to do it. You can create user presets, what I highly recommend you, this means you only have to go through all the settings once, save it and use it in the future for all your images.
Let us do one together
In Lightroom go to File – Export – and the Export Mask will appear. In this example, I only show you the important setting which I use.
Lightroom Export Settings
- Export Location: Choose a folder on your hard drive. You can see I made one for all edited images.
- File Naming: Check the box “Rename To” if you want to rename your image. I always rename them, as I prefer to know what it is rather than a 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 have a new dish.
- File Settings: I choose JPEG as the image format and sRGB for the colors space, which is the best for images used on the web. The quality is set to 60% which is enough.
- 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.
- Watermarking: Click “Watermark” if you want to add one to your images. I add a Watermark to all my images. It is the little heart in the lower right corner of my images. You can find the settings for Watermarking in the Print section of Lightroom.
- Add to User Presets: Now, when you have done all your settings, 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 just have to click on the left side on the preset you want, and all your setting are already made.
- Export: Now, you can export your image.
Step 2 – ImageOptim
After your image is exported to your hard drive, we have to compress it. A file size of about 100KB is perfect for the web and doesn’t slow down your website. I do compress all my images with ImageOptim. It’s a free software which you have to download to your computer. Once downloaded, open it. In 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. It will now be compressed. You will see the size of the image in the window. If the file size is still too big, you can go back and set the JPEG quality a bit lower. I do this from time to time if I have a very large image.
ImageOptim – Compressed Image
You can see, my image is now compressed to 112KB, which is perfect for uploading it to my blog. You can also see how much data you just saved by compressing it ☺
ImageOptim does not save the compressed image as a new image, once compressed you cannot go back to the original size. I have a second folder on my hard drive, which is called “Compressed Images”, and I place a copy of each image inside this folder from where I drag it into ImageOptim. This way I always have a copy of my original image in a safe place.
Your image is now ready to upload to your website
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
As you now should know how to fix this issue, I have to go and work on my own page speed…!