Non-Techie Guide To Image Optimization


Image Optimization is one thing many bloggers and biz owners forget to pay attention to. Yes, I know content is king, social promotion is important but how fast your page loads can greatly affect your visitor’s first impression – and thus, may lose visitor’s interest to make the matters worst.

Today, I will share with you what I did to this blog (and continuously implement) to improve and make sure the best customer experience as possible.

Since I am working in the IT Industry, I have seen hundreds if not thousands of websites that lose money and customers every single minute just because of poor page load. And I know, if you’re serious in your l0ve for blogging, you don’t want that to happen.

Why Image Optimization?

Non Techie Guide To Image Optimization
speed up blog with image optimization

For a moment, let’s pretend that you are a visitor to your own site. Make sure to clear your cache (see below for instructions) and go ahead and observe how long does your website take to fully load. If you’re counting now and that exceeds 8 seconds – relax and read on and let’s fix that!

clear cache in mozilla firefox Image Optimization
Go to Options > Advanced > Cached Web Content
clear cache in google chrome Image Optimization
Press Ctrl + Shift + Del

#1. Use GTMetrix

GTMetrix site load test Image OptimizationCounting alone will not help. You need to know what is happening in the background – what’s the biggest resource that’s causing so much time to load. GTmetrix is a free tool that analyzes your page’s speed performance. Just enter your blog URL and wait for a few minutes until it gives you the report you need.

From this tool, you can check almost anything from the Page Speed Score, Page Load Time, Requests which are all very helpful for you. Check Page Speed Tab and see image dimensions.

gtmetrix image analyzeThe tool will give you suggestions on how to fix this problem and you can even download the PDF of the whole report for your reference! And it’s FREE!

#2. Install WP Smush

This baby is my recent discovery and I am so glad I’ve found it. It reduces image file sizes, improve performance and boost your SEO.

wp smush Image Optimization
WP Smush Dashboard
smush images before inserting into post
Smush images before inserting into a post
smush reduced image size
See how much space you saved

#3. Don’t be lazy to name your images

Okay here me out for a second, I know we’ve all been there – you took 100 shots and you’re tired already but to make the most out of your effort, you have to breathe in and name every image as descriptive as possible.

Say for example your camera’s default may go like this:

default image name
Default Image Name

Do yourself a favor and add something descriptive, like:

renaming images better
Descriptive Image Names

Do not forget Alt Tags, Caption and the way you name your images.

Alt Tags should be added as intelligent as possible, they are the “text alternative” to images when the browser cannot fully render them. It also adds SEO value to your site. Associate keywords into it but do not go overboard – or else, you might get penalized by search engines.

#4. Think about Image Dimensions

Who doesn’t like a beautiful large image, right? Just be careful. Never ever place a large image on your webpage and hit the source code with the dimension that you want. It will results to a pixelated, ugly looking image we all hate.

Try to:

  • Get an image with the highest quality with original size
  • Upload to your WordPress Media Library and hit Smush Image, refer to item #2.
  • Crop or scale down the image to your preferred size. I personally like 600px by 400px.
crop image in wordpress Image Optimization
Scale and Crop Image in WordPress

#5. Use the proper image format

JPEG, GIF and PNG are the three most common image file formats that are used to post images.

 JPEG (or .jpg)

Images are able to be compressed considerably, which results in quality images with small file sizes.

GIFs (.gif)

Lower quality images than JPEG and are used for more simple images such as icons and decorative images.

PNG (.png)

Support many more colors than GIFs, and they don’t degrade over time with re-saves like JPEG.

Remember this points when choosing a file format:

  • Images for e-commerce? Use JPEG.
  • Never ever use GIF for larger images
  • Use PNG as an alternative to GIF and JPEG

Bonus Tip!

Do you love using Canva or any other brilliant online photo editing tool? Save your Images as “Save for Web” to ensure god quality and best dimensions.

Was this helpful? PIN IT FOR LATER!


You might also like: