Avoid auto generating srcset after filling img width & height attributes

[kgwozdz]

Hey!
I'm working on my own responsive image function that serves proper image sizes combined with custom lazy load function. I'm using resize_image_url which works great but everything breaks down after filling width & height attributes, because then hubspot generates srcset automatically and overrides my <source>'s rules. 

I want to fill width & height as it's good practice.

Is there any possibility to disable autogenerating srcset after filling width/height? 

Best,
Krzysztof

[miljkovicmisa]

Hello @kgwozdz ! Could you please share some sample code so we could take a look at how everything is setup?

resize_image_url only generates the url, not the srcset, so you should not have any issues with it.

I guess you would do something like the following:

<img
  srcset="{{ resize_image_url(\"http://your.hubspot.site/hubfs/example-image.jpg\", 0, 0, 480) }} 480w, {{ resize_image_url(\"http://your.hubspot.site/hubfs/example-image.jpg\", 0, 0, 800) }} 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="http://your.hubspot.site/hubfs/example-image.jpg"
  alt="Test HubSpot Image" />

 If my answer was helpful please mark it as a solution.

[kgwozdz]

hey @miljkovicmisa thanks for reply!

You're right, resize_image_url does not generate srset, but setting width="" or height="" attrs does. Your example edited:

<img
   srcset="{{ resize_image_url(\"http://your.hubspot.site/hubfs/example-image.jpg\", 0, 0, 480) }} 480w, {{ resize_image_url(\"http://your.hubspot.site/hubfs/example-image.jpg\", 0, 0, 800) }} 800w"
   sizes="(max-width: 600px) 480px,
       800px"
   src="http://your.hubspot.site/hubfs/example-image.jpg"
   width="800"
   height="600"
   alt="Test HubSpot Image" />

I know that the simple solution is just to not set width="" or height="" attribute, but this is good practice regarding e.g. performance so this is important to me.

But it looks that I've already found solution. Adding `?noresize` parameter to the url inside src="" attribute avoids this situation.

<img
   srcset="{{ resize_image_url(\"http://your.hubspot.site/hubfs/example-image.jpg\", 0, 0, 480) }} 480w, {{ resize_image_url(\"http://your.hubspot.site/hubfs/example-image.jpg\", 0, 0, 800) }} 800w"
   sizes="(max-width: 600px) 480px,
       800px"
   src="http://your.hubspot.site/hubfs/example-image.jpg?noresize"
   width="800"
   height="600"
   alt="Test HubSpot Image" 
/>

[miljkovicmisa]

I'm not familiar with the noresize url parameter and I'm not quite sure what it does, is there some documentation on this? I would like to dig more into it.

On another note, the proposed solution is to add width and height to the image - as you very well pointed is good practice because of page reflow during load times - but you should add it to the css with media queries, as now you are going to load the image in various sizes so for example, for the small image it doesn't make sense to declare a width of 800px because the image will end up using only 480px;

This is why with the srcset attribute you shouldn't use width and height attributes, instead add the corresponding css. This will look like the following (I'm adding just the css for my html I shared previously):

img {
  width: 800px;
  height: 630px;
}

@media only screen and (max-width: 600px) {
  img {
    width: 600px;
    height: 400px;
  }
}

If my answer was helpful please mark it as a solution.