I recently discovered a simple and effective way to decrease image size of a photo without losing quality. This was an especially important find for me because my website relies heavily on images. With Google now putting more emphasis on page load speed than ever before, any chance to improve a website’s load time is a great thing. Let me show you how you can reduce the file size of your web images without sacrificing quality.
If you’re a designer, you’re probably familiar with Photoshop’s “save for web” option (as seen in the preview below), which allows users find a happy medium between image quality and file size. Saving at a high quality setting will result in better looking photos, but higher file size. Saving at too low quality and your going to end up with pixelated images.
What I discovered is that by simply blurring out part of your image in Photoshop prior to saving, you can reduce your photo’s file size quite drastically. As you can see in the image below, the image size dropped from 31.7K to 22.4k without reducing the quality setting one bit (51 for both). Blurring out part of a photo using Photoshop’s blur tool not only reduces file size, but actually improves the look of many images (in my opinion). It’s a great way to focus the viewer’s attention on the most important part of your image. In the image below you can see how I blurred out everything but the mouse.
While this blurring technique may not be suitable for every image on your site (ex: portfolio images that you don’t want modified), give it a try the next time you create images for a blog post. Saving 10-20% on file size should result in noticeably quicker loading images and may help improve your site’s standing with Google. Hope this tip was helpful!
Thanks for reading. Please share your thoughts by commenting below.