Reduce Image File Size Without Losing Quality!

585 396 Derek Kimball

reduce file size

 

 

 

 

 

 

 

 

 

 

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.

photoshop save for web

 

 

 

 

 

 

 

 

 

 

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.

reduced image file size

 

 

 

 

 

 

 

 

 

 

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.

Author

Derek Kimball

Derek is the founder of DesignBuddy and a full time graphic designer. He specializes in logo creation and visual branding. Over the past 13 years Derek has helped hundreds of clients grow their business and establish a stronger brand identity. View his portfolio, or get in touch. If you'd like to receive an occasional free newsletter with useful design related content, please subscribe here.

All stories by: Derek Kimball