COS-General

What is automatic image resizing?

Last updated: December 23, 2016

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A

Automatic image resizing is a feature enabled by default on all HubSpot portals. It is used to optimize images, decrease browser load-time, and increase Google PageSpeed score.

Automatic image resizing takes an original largely-sized image and optimizes the image based on the size you are displaying it on your website. This drastically reduces the time it takes for the browser to load that image on the page. For example, if a user uploads an image that has dimensions of 5000px by 5000px, but is only displaying it on the website as 500px by 500px, the browser first has to do extra work by downloading the entire image, then resize the image down to the size it is being displayed.

With automatic image resizing, HubSpot looks for height and width attributes on the <img> tags in the page's HTML. Images are automatically resized on the first pageload, then the resized versions are cached on our CDN. This saves the end user from downloading needless content on subsequent visits.

Please note that if you're using custom HTML and the height and width attributes do not exist on the <img> tags in your HTML, your images will not be automatically resized. 

Let's take a look at this process in action:

Before:


User-added image

After:


User-added image

Should I still resize my images offline?

Yes. Sizing images to their exact display sizes will still result in higher quality than what we can do at serving time. Photoshop and even OS X's Preview app have really good image resizing algorithms that make them look really good, even when resizing to very small proportions of their original size. This includes resizing images using the File Manager's built in editor.

What does this mean for retina support?

Images displayed on devices with high-dpi displays (generally over 200 pixels per inch, depending on typical viewing distance) would look very small if they were shown at their native resolution. Safari and other browsers that support retina displays will "blow up" images to make them proportional and that can make them appear blurry. One way to solve this problem would be to upload images at 2x the resolution that non-retina displays would show them at and resize the image in the browser. This is a poor solution because it forces most users to download images that are way bigger (2x the size, so 4x the bytes). While adding noresize is a solution for images intentionally sized at 2x for retina, there are better solutions. Retina.js is a small bit of JavaScript that replaces images with their retina counterparts only on retina displays. You can also do it with CSS. Apple has a pretty thorough developer article on the subject.

Can I disable automatic image resizing?

There may be case by case situations where you want to disable this feature, this can be done by adding the query parameter noresize to the image url.