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:
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?
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.