How HubSpot automatically resizes images

Highlighted
Visitor

I'd like to learn more about how HubSpot automatically resizes their images. Does anyone have insight as to what their algorithm does or how it helps with page speed? As a content manager, should I still worry about optimizing and sizing down my images?

 

Thanks!

 

Screen Shot 2020-01-16 at 9.53.44 AM.pngHubSpot automatic resizing

Reply
0 Upvotes
1 Reply 1
Advisor

Hi @DavidKatz 
if you want to learn more about the process itself you will probably need to dive (deep) into development. Personally I don't know how much you (as a HubSpot user not developer) can do to this kind of automations. 
I didn't find anything about this topic in the api board or api documentation.

 

@roisinkirby@jennysowyrda do you know somebody who could answer this?




You could use an external image compressor tool to compress the file size, upload the compressed images to hubspot and add

?noresize

(documented here)

to the corresponding image-url.

 

Some external image compressors I'm using:

- kraken.io
many options, very powerfuland  tool and it's got a api documentation. So your developer could create an "automation" and the princings(for pro version) are good.

- copressor.io  

completly free, only for a few images at a time since it doesn't have a grab url or bulk upload function. results may vary.

If you want to have the ?noresize functionality in (custom) modules

your developer should be able to clone the modules(if not custom) and add a simple boolean field(e.g "no-resize") to the src of the image.

Here's an example:
default image snippet in a custom module:

{% if module.image.src %}
	{% set sizeAttrs = 'width="{{ module.image.width }}" height="{{ module.image.height }}"' %}
	{% if module.image.size_type == 'auto' %}
		{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
	{% elif module.image.size_type == 'auto_custom_max' %}
		{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.image.max_width }}px; max-height: {{ module.image.max_height }}px"' %}
	{% endif %}
	<img src="{{ module.image.src }}" alt="{{ module.image.alt }}" {{ sizeAttrs }}>
{% endif %}

with the boolean addition:

{% if module.image.src %}
	{% set sizeAttrs = 'width="{{ module.image.width }}" height="{{ module.image.height }}"' %}
	{% if module.image.size_type == 'auto' %}
		{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
	{% elif module.image.size_type == 'auto_custom_max' %}
		{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.image.max_width }}px; max-height: {{ module.image.max_height }}px"' %}
	{% endif %}
	<img src="{{ module.image.src }}{% if module.no_resize == true %}?noresize{% endif %}" alt="{{ module.image.alt }}" {{ sizeAttrs }}>
{% endif %}

Here are the widgets
Bildschirmfoto 2020-01-16 um 22.33.30.png

 

note: You don't need the whole image snippet if you don't want to. But I recommend it if you don't style the images with (S)CSS/SASS/LESS. 

 

 

regards, 

Anton








check Did my post help answer your query? Help the Community by marking it as a solution