When creating web content, you want your images and graphics to be as crisp and clear as possible. But sometimes the steps to optimize your images can feel a bit blurry. 

Today we’ll be walking through the most common reasons for blurry images and the most effective way to improve image quality in HubSpot.

A Tale of Two Sizes

There are 2 types of sizes that are important for image clarity: dimensions and file size.

Dimensions are what you're likely more familiar with — they're the width and height of an image, and they determine how much space an image takes up on the page.

The file size is the size of the file itself in KB or MB, and in HubSpot it’s only visible within the file manager. File size is a key indicator of image quality. Let's use my favorite designing dog, Bailey, as an example. I uploaded 2 versions of the same picture of Bailey to the file manager: one that's 1.61MB, and one that's 706KB. You can see them side by side below:  


While these images have the same dimensions, their sizes are different. The bigger image (1.61MB) is crisp and clear while the smaller image (706KB) is significantly blurrier, and this is because of the amount of information contained in each image. If you find that your banner image is blurry and the file size is only a couple hundred KB, you should investigate using a larger file size.

It's important to note that while larger file sizes result in clearer images, they are slower for the browser to load. Keep this in mind when exporting your images (don't just export the biggest size possible).

Image Resizing

If you’ve uploaded an image with a bigger file size to HubSpot but it still appears blurry on your page, then the most likely culprit is image resizing. When an image with large dimensions is made smaller and becomes blurry, this is because the image is trying to cram too much information into too few pixels. Similarly, making an image with small dimensions larger will stretch too little information over too many pixels.

This means if your image is blurry, you should check to see if the image is being resized compared to its originally uploaded dimensions, which can be seen in the file manager:

BaileyDimensions

How to Ensure the Best Image Quality

For the best image quality, you should upload images to the file manager at the dimensions you intend to use them. If your logo is 160px on the page, you should have a 160px logo in the file manager. Additionally, be mindful of the file sizes of your images — banner and full width images should be at least 1MB, and if the image is below that size then file size is likely the culprit of any blurriness.

A note about optimizing images for web

Some imaging tools offer a web-optimization option when exporting images. A web-optimized image is an image with a smaller file size, so that it loads faster. If you web-optimized your image, but it's blurry, it might be a little over-optimized. Try reverting to a larger file size in your image software and go easier on the optimization process.

How ?noresize Works

While we're on the subject of image resizing, let's talk about automatic image resizing. In general, HubSpot will automatically resize images that have a width parameter. For example:

<img src=“hubspot.com/bailey1” width=“300”>

Let’s call this image Bailey1. Bailey1 was uploaded to the file manager at 600px wide, but with that width parameter of 300px, HubSpot will create a series of sources for that image, a “srcset.” This srcset resizes the image in HubSpot, so that the browser doesn’t have to. By having HubSpot feed the image to the browser at 300px wide, loading time improves.

When you use ?noresize at the end of your image URL, it prevents HubSpot from automatically resizing your image. However, this doesn’t mean that the image won’t be resized.

Let’s look at Bailey1 again. When I use:

<img src=“hubspot.com/bailey1?noresize” width=“300”>

It doesn’t change the size of my image on the page. Bailey1 is still 600px wide in the file manager, and 300px on the page. However, because there’s still a width parameter, the image now has to be resized by the browser. Your browser has to load the image, then resize it, before displaying it to you.

Unless you’re using an image without a width parameter, image resizing in HubSpot will help to optimize your website. And if you're adding "?noresize" to an image with a width parameter, you're only forcing the browser to resize the image instead of HubSpot.

So what does this mean for you? In most cases, you won't need to disable automatic image resizing, but if you're running into issues with image clarity, this is another piece to check.

Start the free HubSpot Design Certification course from HubSpot Academy.

Originally published Sep 12, 2018 10:00:00 AM, updated September 05 2019