CMS Development

DavidKatz
Miembro

How HubSpot automatically resizes images

resolver

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!

 

HubSpot automatic resizingHubSpot automatic resizing

0 Me gusta
1 Soluciones aceptada
Anton
Solución
Experto reconocido | Partner nivel Diamond
Experto reconocido | Partner nivel Diamond

How HubSpot automatically resizes images

resolver

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

Anton Bujanowski Signature

Ver la solución en mensaje original publicado

1 Respuesta 1
Anton
Solución
Experto reconocido | Partner nivel Diamond
Experto reconocido | Partner nivel Diamond

How HubSpot automatically resizes images

resolver

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

Anton Bujanowski Signature