# Avoid auto generating srcset after filling img width & height attributes

**URL:** <https://community.hubspot.com/t/avoid-auto-generating-srcset-after-filling-img-width-height-attributes/65738>\
**Category:** CMS Development\
**Created:** [September 23, 2022, 10:12am UTC](https://community.hubspot.com/t/avoid-auto-generating-srcset-after-filling-img-width-height-attributes/65738 "2022-09-23T10:12:55Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kgwozdz](https://avatars.discourse-cdn.com/v4/letter/k/bc79bd/32.png) [@kgwozdz](https://community.hubspot.com/u/kgwozdz)\
**Post date:** [September 23, 2022, 10:12am UTC](https://community.hubspot.com/t/avoid-auto-generating-srcset-after-filling-img-width-height-attributes/65738/1 "2022-09-23T10:12:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![miljkovicmisa](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/miljkovicmisa/32/86357_2.png) [@miljkovicmisa](https://community.hubspot.com/u/miljkovicmisa)\
**Post date:** [September 23, 2022, 10:49am UTC](https://community.hubspot.com/t/avoid-auto-generating-srcset-after-filling-img-width-height-attributes/65738/2 "2022-09-23T10:49:57Z")

</div>

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:

```lia-code-sample
<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.** _

---

<div class="post-metadata">

**Author:** ![kgwozdz](https://avatars.discourse-cdn.com/v4/letter/k/bc79bd/32.png) [@kgwozdz](https://community.hubspot.com/u/kgwozdz)\
**Post date:** [September 23, 2022, 11:22am UTC](https://community.hubspot.com/t/avoid-auto-generating-srcset-after-filling-img-width-height-attributes/65738/3 "2022-09-23T11:22:07Z")

</div>

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:

```lia-code-sample
<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.

```lia-code-sample
<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" 
/>

```

---

<div class="post-metadata">

**Author:** ![miljkovicmisa](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/miljkovicmisa/32/86357_2.png) [@miljkovicmisa](https://community.hubspot.com/u/miljkovicmisa)\
**Post date:** [September 23, 2022, 12:16pm UTC](https://community.hubspot.com/t/avoid-auto-generating-srcset-after-filling-img-width-height-attributes/65738/4 "2022-09-23T12:16:55Z")

</div>

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):

```lia-code-sample
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.** _