Hi,
Thanks to the new Hubl function {{require_head}}, we can place something in the <head> tag based on certain conditions. This way, we can now preload images!
Responsive images are created by Hubspot on the fly when adding a height and width attirbute to your image. This also creates a sourceset for the image. For example:
<img src="{{ img.src }}" alt="{{ img.alt }}" width="{{ img.width }}" height="{{ img.height }}">
creates: <img src="https://www.example.nl/image.jpg?width=542&height=639&name=image.jpg" alt="image" width="542" height="639" srcset="https://www.example.nl/image.jpg?width=271&height=320&name=image.jpg 271w,https://www.example.nl/image.jpg?width=542&height=639&name=image.jpg 542w,https://www.example.nl/image.jpg?width=813&height=959&name=image.jpg 813w, https://www.example.nl/image.jpg?width=1626&height=1917&name=image.jpg 1626w" sizes="(max-width: 542px) 100vw, 542px">
This creates a good srcset within the HTML.
Yet, there is no controle over your sourceset, as HubSpot does all the job. I can not retrieve the sourceset in any way. The {{img.src}} withing an image tag does not give back the same data if an width and height are available. Thus, {{img.src}} is not a reliable function. Why I want to get the sourceset:
With the {{required_head}}, we can now, on the fly, insert a preload with the corrosponding image in the head. When I can not get the sourceset to insert a dynamic preload image or a complete set, the preloaded img URL wil never correspondent to the image that I want to preload. If I can get a grib on the sourceset, i can preload a complete sourceset image and speed up any site. Quick mediocore fix for the people who are interested in this problem: With the required_head, preload an image url that you can insert manually in the module trough a text field. This way, you can load the image, grab the source of the image that most of your visitors will see (for example, the largest image if you have mostly desktop visitors) and insert it into the text field. This way, you atleast preload something for some users.
... Mehr anzeigen