How to control custom media sizes

[paulcalver]

The main issue I'm having is the site is creating so many image sizes, 13 in total, from 150px to 4096px. However, the site itself, nearly always loads in the biggest, even if they are only small / medium sized images on a page. Any idea how I get better control of this?

Staging site URL with an example of this is - https://paulcalverstg.wpenginepowered.com/young-lions/

Thanks for any help?

[arminunruh]

mmh
so the image version that is loaded, depends on the size of the browser
so on phones, smaller images will be loaded and on big screens, bigger versions will be loaded

on my big screens the 4096px versions of the full-width images are loaded
on phones, smaller versions will be loaded which is what we want
so not creating the smaller versions could make your website slower on phones

but also i see avif files are loaded instead of the jpgs, and they are pretty small in filesize anways mmh!
are u using a plugin to use avif files?

so if u try that plugin that i mentioned in my post above, does that solve the issue?

[paulcalver]

Thanks for the update. I also have a large screen and maybe i'm reading the info wrong, but it seems to be loading the AVIF full sized file still, where as there's several other small sizes that would easily suffice?

[arminunruh]

yea the image that is being loaded is 2400px wide, but an image of 1024px width would be enough.
at least on my bigger screen.

when u look at the html of the image.
look at where the 1024px wide image is supposed to be.
there is the original image instead:

i think its because you uploaded this image while disabling lay theme's custom sizes like 1024 being generated

so that is one example of how its not a good idea to do that. because now the larger original image is loaded instead of a smaller version of it

but since you're using the plugin to transform jpgs to avif, its still kind of ok. because the avif file is just 300kb.
but if it was a jpg, it would be more like 3 or 5 MB

you could fix it like this:

you can use a plugin like this:
https://wordpress.org/plugins/regenerate-thumbnails/

once you have updated lay theme or enabled the code again that creates all the sizes

then use that plugin to re-generate all sizes

then make sure to clear your wpengine's cache

maybe that'd be enough, but maybe you'd also need to re-insert the images in the gridder

[paulcalver]

Thanks Armin, appreciate your time looking at this!

[konrad]

Hi,

I have the same issue and wanted to add the following:

When setting an image as a column background, the sizes attribute is not set: NaNpx
When setting the same image as a regular image within the column the correct, intended size is updated and the browser chooses the correct image in srcset

["Never show resized versions of your images" was not checked]

as background:

<img class="lazyload entered lazyloaded" src="https://juengerkuehn.com/wp-content/uploads/Untitled-6-265x353.jpeg" data-ar="1.3320754716981" data-src="https://juengerkuehn.com/wp-content/uploads/Untitled-6-265x353.jpeg" data-srcset="https://juengerkuehn.com/wp-content/uploads/Untitled-6-265x353.jpeg 265w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-512x683.jpeg 512w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-768x1024.jpeg 768w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-1024x1365.jpeg 1024w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-1280x1707.jpeg 1280w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-1920x2560.jpeg 1920w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-2560x3413.jpeg 2560w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-3200x4266.jpeg 3200w, https://juengerkuehn.com/wp-content/uploads/Untitled-6.jpeg 3840w, https://juengerkuehn.com/wp-content/uploads/Untitled-6.jpeg 4096w" data-aspectratio="0.75070821529745" data-sizes="NaNpx" data-parent-fit="cover" alt="jüngerkühn" sizes="NaNpx" data-ll-status="loaded" srcset="https://juengerkuehn.com/wp-content/uploads/Untitled-6-265x353.jpeg 265w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-512x683.jpeg 512w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-768x1024.jpeg 768w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-1024x1365.jpeg 1024w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-1280x1707.jpeg 1280w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-1920x2560.jpeg 1920w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-2560x3413.jpeg 2560w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-3200x4266.jpeg 3200w, https://juengerkuehn.com/wp-content/uploads/Untitled-6.jpeg 3840w, https://juengerkuehn.com/wp-content/uploads/Untitled-6.jpeg 4096w">

as regular image

<img class="lay-image-responsive lazyload entered lazyloaded" src="https://juengerkuehn.com/wp-content/uploads/Untitled-6-265x353.jpeg" data-src="https://juengerkuehn.com/wp-content/uploads/Untitled-6-265x353.jpeg" data-srcset="https://juengerkuehn.com/wp-content/uploads/Untitled-6-265x353.jpeg 265w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-512x683.jpeg 512w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-768x1024.jpeg 768w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-1024x1365.jpeg 1024w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-1280x1707.jpeg 1280w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-1920x2560.jpeg 1920w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-2560x3413.jpeg 2560w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-3200x4266.jpeg 3200w, https://juengerkuehn.com/wp-content/uploads/Untitled-6.jpeg 3840w, https://juengerkuehn.com/wp-content/uploads/Untitled-6.jpeg 4096w" data-ar="1.3332435344828" alt="property of juengerkuehn" data-w="3712" data-h="4949" data-id="270" style="aspect-ratio:3712/4949;" sizes="768px" data-sizes="768px" data-ll-status="loaded" srcset="https://juengerkuehn.com/wp-content/uploads/Untitled-6-265x353.jpeg 265w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-512x683.jpeg 512w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-768x1024.jpeg 768w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-1024x1365.jpeg 1024w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-1280x1707.jpeg 1280w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-1920x2560.jpeg 1920w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-2560x3413.jpeg 2560w, https://juengerkuehn.com/wp-content/uploads/Untitled-6-3200x4266.jpeg 3200w, https://juengerkuehn.com/wp-content/uploads/Untitled-6.jpeg 3840w, https://juengerkuehn.com/wp-content/uploads/Untitled-6.jpeg 4096w">

@paulcalver May I ask how you serve avif, or what plugin you use?

Thanks!

[konrad]

hmm -- even with the simple image ( not background) the browser does often choose a unnecessary large image, I set up a test page : left background image Right: normal image

http://juengerkuehn.com/test/

[arminunruh]

When setting an image as a column background, the sizes attribute is not set: NaNpx

do you mean row background?

that shouldn't happen

oh yea i see
let me try to reproduce this and fix this

[arminunruh]

ok this will be fixed with a new update that i will release today or tomorrow

[konrad]

perfect, it works now. Thank you again