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 good 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 lowering the quality setting. Blurring part of the image has the added benefit of creating a focal point and de-emphasizing background clutter. In the image below you can see how I blurred out everything but the mouse. A quick way to achieve this is by creating a duplicate of your image layer, applying an overall blur, adding a layer mask and brushing out the intended blur area.
While this blurring technique may not be suitable for every image on your site (ex: portfolio images that you don’t want modified), implement it when you can. Saving 10-20% on file size can have noticeable effects on page load speeds, and may even improve your SEO. Hope this was helpful. Thanks for reading.