Last Updated on March 14, 2016

Optimizing images on your website whether it’s an e-commerce store, a blog, or both is the single best thing that you can do to improve its performance. And it shouldn’t be a complex task really. Sure high-res images look great but when you’re loading a 2MB image, it’s going to do more harm than good.

Essentially, you’re going to want to aim for an image size of less than 100kb but if you can go smaller without compromising quality, then better. As a rule of thumb, don’t let the images look bad or pixelated just for the sake of being smaller in size. You should strike a balance between a good looking image and an acceptable image size. Here are a few ways on how to optimize images for the web.

Optimizing Images for Web Using Photoshop

Optimizing images for the web is not at all difficult. If you have Photoshop, it’s a very simple process. You don’t have to be a Photoshop wizard. Just open the image on Photoshop and resize or crop your image to the appropriate size. If you have a style, which you should, you should preset image sizes that you should be using. When that’s done, click on File and Save for Web (Ctrl + Shift + Alt + S). Here you’ll be able to set the quality of the image while being able to see if the image still looks good. On the bottom left section, you can see the size of the image. You’re going to want to aim for an image that looks good, is not pixelated, and is less than 100kb in size. The smaller the size the faster the image loads on the page.

Optimize Images Using WordPress Plugins

If you don’t have Photoshop or just don’t have the time to do optimization for every image you add to your e-commerce store, there are a few WordPress plugins like WP Smush.it that can help you optimize your images. Just upload images as you normally would and the plugin will do its work behind the scenes. You don’t have to do anything extra; the plugin does it all for you. You only have the option to optimize all the images you have previously uploaded but it’s going to take a lot of time especially when you have a lot of images to work on. The free version of the plugin cannot optimize images larger than 1MB though.

Optimizing Images for Web Using MS Paint

If you don’t have Photoshop, then you can use MS Paint but only as a last resort. While using MS Paint for image optimization is usually okay, it doesn’t do as well as the more sophisticated image editing tools. We still highly recommend using Photoshop or an image optimization plugin.

To optimize images in Paint, start by opening the image file on MS Paint. Crop your image if needed. Afterwards, just click the Resize button to resize your image to your desired size. When you save the image, be sure to save it as JPEG or PNG. There is an optimum way of using different image file types and you can find out more about it on the next section below. After saving, you can see the image size will start to show below.

The real downside to MS Paint however is that you can’t really set a specific quality for your image. If you’re working with a BMP file, then saving it as JPG or PNG will already significantly reduce the image size. Other than that, you don’t really have any other control when it comes to image quality which is why you should only use it as a last resort.

A Note on Image Types

An important thing to note to make images look good even as you scale them down is to set the right file type. Notably, the JPEG type is used for real photos as it supports the most number of colors at 16 million. PNG is the better choice if you’re working with graphics such as logos and icons since it makes use of lossless compression. Lossless compression means that the image can be made smaller without affecting quality. PNG supports thousands of colors as well as transparency which JPEGs don’t support.

GIF images are similar to PNG. It uses lossless compression and supports transparency. It however can only store a measly 256 colors. The only reason that you should be using a GIF image is if you’re using an animated image. While PNGs can do animation, it is currently not supported by many browsers and systems.

Properly Naming Files

A thing to note when naming files is to name files as they are. Don’t name files after a keyword. If you’ve got an image of a child playing a violin, name it something like “child-playing-violin.jpg” and not something like “learn-violin-online.jpg” or “free-violin-course-online.jpg”. Believe it or not, this is better for your SEO.

Hope these help in making your site load faster. What other steps do you take to improve your page load speeds? Do you have some advice you’d like to share? Let us know in the comments.

We’ll be covering more steps on how to improve your page load speeds in future posts so stay tuned.