drop's picture

Posted by drop on Wed, Apr 24, 2019 - 8:54pm --- Updated: Apr 24 '19 - 9:06pm

This was a great question asked by Joel Goodman on Facebook:

can you tell me how to optimise images in backdrop. Example: the images are scaling responsively in display size on the page but always sourcing the full large image. How would I allow the responsive scaling to also generate smaller size images per screen break size?

Comments

jenlampton's picture

Wed, Apr 24, 2019 - 9:04pm by jenlampton

For most of my sites, I actually need *larger* sized images on smaller sized devices.

Mobile phones are megapixel devices these days, so images will look best if the files are 2x as large as the images are displayed (and scaled down with CSS).

Additionally, I find that the display size of most of my images increases when going from desktop to tablet, because an image that used to span only the widest column on desktop, now needs to span the whole screen on tablet.

When setting up my image styles, I set the image dimensions to be 2x as large as the image at it's largest display-size, regardless of which breakpoint that might be.

One thing to note here is that when you are going for crispness/beauty, you need to be sure that the images are optimized for web use before they are uploaded into the CMS. If you upload an uncompressed image directly from a high-quality digital camera, the file size for that image would be HUUUUGE -- and definitely not suitable for web, let alone web on a mobile device. However, if you start with optimized images, the rendered file size is far less important. 

I know there are modules that would allow you to implement srcset or similar, but I have never used them. Maybe others have some recommendations on other approaches? 

Wed, Apr 24, 2019 - 9:52pm by auxiliaryjoel

I would like to keep my images crisp and clear also,

I do have to keep my clients skill level in mind though.

And I find the best way to manage that is to give them a maximum file width in pixels that they should upload all images at.

If I give them a list of different sizes for different uses in the site they will often ignore it and just start uploading 5mb files straight off their camera, but I find if I give them one size to aim for (1200px wide max. for example) then they can handle that.

This allows them to upload images that look clear as full width slideshow images and everything form there down.

However, some of those images I still would like to downsize for XS size screens to say max. 700px for example. I want to do this because in Australia our internet is quite crappy on mobiles and also is still charged quite highly, especially on mobile data plans.

So I don't want to be forcing my client's visitors to download the larger image sizes if they are viewing the site on their phones.

Sat, Apr 27, 2019 - 4:01pm by auxiliaryjoel

Just seeing if anyone could give me tips on how to generate smaller images for responsive screen breaks?

Thu, Aug 12, 2021 - 4:44pm by auxiliaryjoel

Thank you @stpaultim that is exactly what I'm after