When you need to reduce image size for use online, particularly on your website, blurring parts of the image helps. You don’t always need this technique, but when page speed is critical, selective blur, a little or a lot, yields smaller file size and faster download.
This applies to photographs. This does NOT apply to images that are exclusively shapes and text of solid colors like logos.
Why Reduce Photo File Size
You might need small file size in these situations:
- Mobile visitors are a priority. Mobile networks are sometimes limited, so small files makes for faster download.
- You need a large background image and you want to reduce the file size as much as possible. If the image isn’t visually important, a sharp image might not be important; a blur reduces the size and can make it visually blend into the background.
- Website speed is a priority. If reducing file size to improve speed is a routine practice for your site, apply some blur to your images for some improvement.
Example images below were edited in PhotoShop and saved as WebP files with a Quality of 75.
Example: Blurring the Whole Image
In this example, image detail isn’t important. Even when the background image is blurred, you can still tell what it is. In fact, the blur makes it seem a little mysterious; I like that for this particular image. The blurred version is 45% smaller.
Example: Including Detail Images on a Blurred Background
In this example, some detail images are included in front of a blurred background. Since more of the entire image has more fine details without blur, the file size difference is not as drastic. The blurred version is 20% smaller.
Example: Selectively Applied Blur
In this example, the background was already a little blurred. I selectively painted more blur on the background and very slightly on the foreground. The blurred version is 15% smaller.
Conclusion: Reduce Image File Size with Blur
Anytime you want to reduce the file size of photographs on your website or in emails, try adding a little or a lot of blur before saving them in a web friendly format like WebP or JPEG.
