Images on a blog are like a double-edged sword. On one hand, they provide immense benefits to your blog such as increased user experience, makes content visually appealing, further explains your content in a way that text simply can’t, and improves SEO performance.
However, these benefits come at a major cost if you fail to optimize your images properly. If an image isn’t optimized you can experience negative effects such as slower site speed, increased page loading time, and poor SEO performance.
But don’t you worry, since you’re here your blog won’t have to suffer from the negative effect of using images. That’s because I’ll be teaching you how to properly optimize images for the web. The steps that I’m about to outline can be applied to images that you’re about to upload as well as existing images that are currently affecting your blog in a negative way.
Determine The Ideal File Size For The Image
- For Regular images that would be placed within your content, you should aim for an overall file size that is below 100kb.
- For banners and hero images that need to be very detailed, the goal will be 250kb – 300kb.
Determine The Ideal Image Dimensions For In-Content Images
One method of optimizing an image for your blog is to reduce its size by adjusting its dimensions (width and height). Stock and other high-quality images have very large dimensions like 4919 (width) x 3280 (height).
To properly optimize these images you will need to know the ideal width and height values to reduces them to. A good rule of thumb is to use the width of your content.
To determine the width of your content you can use a ruler extension on chrome or the developer tools of your browser.
Using The Page Ruler Redux Extension on Google Chrome
Step 1: Install page ruler redux.
Step 2: Navigate to a page on your blog that you would like to add an image to and find a full-length paragraph.
Step 3: Click on the ruler icon in the extensions menu.
Step 4: Click and drag your mouse pointer from the first letter in the paragraph to the last letter.
Step 5: Record the width of your paragraph which is located in the ruler redux top bar.
Using Browser Developer Tools To Determine Image Dimensions
Step 1: Open an already published page on your blog.
Step 2: Right-click anywhere on the page and select inspect. You can also use the keyboard shortcut CTRL + SHIFT+ I.
Step 3: Click on the “select an element icon” which is located at the top left of the inspect window.
Step 4: Hover your pointer over a paragraph element. You will know that it is a paragraph when you see the letter “P” and in the box.
Step 5: Record the width of the element which is the first number that appears above the color hex code.
Now that we know the overall image size that we are aiming for and the maximum width that our in-content images should be, it’s time to optimize them.
Optimize The Image With Photoshop
Step 1: Start by locating your image then right-click on it and click on “open with photoshop”.
Step 2: In photoshop click on “file” then hover over export then in the slide-out menu select “save for web”. Alternatively, you can use the keyboard shortcut ALT + SHIFT + CTRL + S on Windows.
A new “save for web” window will appear in photoshop. Within this new window, there are a few options that you need to pay attention to.
They are the following:
- Optimized file format
- Compression quality (JPEG only)
- Image dimensions
- Overall image size
When it comes to optimizing images for your blog these are the file formats that you should consider:
- JPG or JPEG for normal images with a lot of detail
- PNG-24 for transparent images
- GIF for animated images
Here we will divide the following steps based on the file format because each optimized file format will give you different optimization options.
Optimizing a JPG/JPEG Image With Photoshop
Step 1: Let’s start with JPEG images. From the save for web window select JPEG from the optimized file format dropdown menu.
Step 2: Next set the compression quality to high and pay attention to the overall image size.
You’ll notice that this simple change has greatly reduced the size of the image.
Step 3: Make sure the optimized box is checked and progressive and embed color profile are unchecked.
Step 4: Make sure that the “retain original image proportions” option is enabled
Step 5: Change the dimensions of the image to a width and height that is appropriate for the purpose of the image.
Let’s say you’re optimizing a hero image then an image width of 1,200px is perfect.
For images that are embedded within your text, the width should be set to the width of your content.
When optimizing JPG/JPEG images if you are able to achieve a smaller than usual image size after changing the image dimensions, you can return to the optimization quality and increase it to achieve better image quality.
Step 6: Click on the “save now” button to finish optimizing your image.
Optimizing a PNG Image With Photoshop
Step 1: Select PNG-24 from the drop-down menu.
Step 2: Make sure transparency is selected.
Step 3: Change the image dimension until an adequate image size is achieved. When you’re done click on save now.
Optimizing a GIF Image With Photoshop
Step 1: Select GIF from the drop-down menu.
Step 2: Set the color reduction algorithm to selective.
Step 3: Set the dither algorithm to diffusion.
Step 4: Colors range from 2 to 256 the lower the color value the smaller the image size. Set the color value based on how colorful the gif you are working with is.
Step 5: Set the image dimensions based on where you are displaying it.
Step 6: Adjust the color range and image dimension until you are satisfied with both the image quality and size.
Optimize The Image With Gimp
Step 1: Locate the image that you would like to optimize, right-click on it and select open with GIMP
Step 2: In the top menu click on the “image” option and then select scale image.
Step 3: Ensure that the image proportions are linked (Put side by side images)
Step 4: Change the width of the image to suit the purpose of the image.
Step 5: Click on scale to confirm changes
Step 6: Zoom In to the image after scaling is complete.
Step 7: In the menu above click on file and then export as.
Step 8: Within the new window select an export destination and click export.
Step 9: A smaller export image window will open. Within this window select show preview in the image window.
Step 10: Move both windows from in front of the image window to view the preview.
Step 11: Adjust the quality slider until you have achieved an image size and quality that you are satisfied with and click export to finish optimizing your image.
Optimize The Image With ShortPixel
Step 1: Download the ShortPixel plugin and activate it.
Step 2: Enter your email address and request a key
Step 3: Navigate to the API key tab or check your email to get your API key.
Step 4: Head back to your WordPress dashboard hover your mouse pointer over settings and click on ShortPixel.
Step 5: Enter your API key in the space provided and click on validate
Step 6: For and express install leave the default settings as is and click on save and go to the bulk optimizer. If you would like an in-depth guild on setting up that plugin watch the video below.
How To Configure The ShortPixel Plugin
Step 7: Click on start bulk optimizing to optimize your current media library.
Step 8: To optimize new images just upload them to your site and ShortPixel will automatically optimize them when after upload.
If you’re on the free plan and have a ton of images to optimize immediately, that is more than 100 images. I recommend that you upgrade to the short plan which starts at $4.99per month and offers 5000 images per month. Alternatively, you can a one-time credit bundle which starts at $9.99 with 10,000 images.
Optimize The Image With ShortPixel Web App
Step 1: Head on over to the ShortPixed Image Optimization web app.
Step 2: Choose one of the following compression levels (Lossy, Glossy or Lossless)
- Lossy optimization is the most aggressive one of the three. Lossy optimization provides the smallest image size while maintaining the best balance between optimization and picture quality.
- Glossy is a midground between Lossy and Lossless. Images optimized using Glossy will result in both a better quality image and a larger image size than when using lossy.
- Lossless Provides the best image quality with indistinguishable differences to the original file. However, the image size is barely reduced.
Step 3: Click on the upload box to open the file explorer.
Step 4: Select the images that you would like to optimize and click on open.
Step 5: When they have finished optimizing click on “download file”.
Final Thoughts on Optimizing Images
The best way to optimize your images if to first use software like photoshop to resize and reduce the quality and save it for the web. Then to upload it to your WordPress website and let a plugin like ShortPixel further optimize it using lossless compression.
If your blog is hosted with Siteground’s Managed WordPress hosting there is no need to use a plugin like ShortPixel since Siteground provides a builtin optimizer that automatically optimizes your images upon upload.
Other Interesting Articles
