Responsive Images

[UpstateLeafPeeper]

What is the proper way to handle images on a responsive website?

My understanding was that in the past you would take your base image, and scale it to a couple different sixes using Photoshop. So maybe you would have 300x300, 200x200, 100x100, and 50x50 pixel images. Then your HTML/CSS would choose the appropriate sized image for the device.

In an earlier thread here, I believe that someone suggested this CSS…

.products img{
    width: 50%;
    max-width: 350px;
    height: auto;
}

As I see it, the problem with that second approach is that you are stuck with the original file-size even if you are adjusting its size in the browser. For example, if your original image was 800x800 and 1MB in size, even if you use CSS to shrink that image down to 100x100 for a smartphone, you would still be serving up a 1MB file, correct?

We recently had a party at work, and I want to build a super simple site to display the photos. The pictures I took average over 1MB in size, and I would like to have a way for people to download the original high-quality pictures, but for the gallery I am building, I want thumbnails that are smaller and that people can view whether on a desktop or their smartphone, and so I figured I should some here and get a better understanding of the correct way to do responsive photos!

Thanks!

[Gandalf]

Well, first thing, if you’re displaying thumbnails to start you’re not going to have to download the large images till they are requested.

Also, if you optimise your images they should be a lot smaller than 1MB. I have several 1200 x 1600 images which when optimised are about 200 - 300 KB.

[coothead]

Hi there UpstateLeafPeeper,

perhaps you should consider using the download attribute.

There would then be no need to display the large file.

Further reading:-

Caniuse - download

coothead

[UpstateLeafPeeper]

@Gandalf

Well, first thing, if you’re displaying thumbnails to start you’re not going to have to download the large images till they are requested.

But what I was asking is a.) should I have multiple version of thumbnails and display them depending on device?

Maybe 200x200 for a desktop, but 100x100 for a smartphone?

Follow me?

And if so, then do I do that by just having a 200x200 picture and shrinking it with CSS for mobile, or do I use CSS to display a 200x200 image or a 100x100 image depending on the device?

@Gandalf

Also, if you optimise your images they should be a lot smaller than 1MB. I have several 1200 x 1600 images which when optimised are about 200 - 300 KB.

How do you optimize images?

[coothead]

@UpstateLeafPeeper

How do you optimize images?

most image editors will optimize images.

I mainly use,

https://www.irfanview.com/

…which is free and photoshop if I happen to be using it.

coothead

[UpstateLeafPeeper]

@Coothead,

What about my prior question?

@UpstateLeafPeeper

But what I was asking is a.) should I have multiple version of thumbnails and display them depending on device?

Maybe 200x200 for a desktop, but 100x100 for a smartphone?

Follow me?

And if so, then do I do that by just having a 200x200 picture and shrinking it with CSS for mobile, or do I use CSS to display a 200x200 image or a 100x100 image depending on the device?

[coothead]

@UpstateLeafPeeper

What about my prior question?

If your prior question was…

…should I have multiple version of thumbnails

…then I would say my answer was no.

coothead

[UpstateLeafPeeper]

[quote=“coothead, post:7, topic:344306, full:true”]

@UpstateLeafPeeper

…should I have multiple version of thumbnails

…then I would say my answer was no.

coothead

So that approach is no longer used?

Then what size should a thumbnail be? Should it be small enough to work on all devices down to 320px?

[John_Betong]

Try this Topic:

How Large Is Your WordPress Website?

Try adding the free AmpProject.org plugin because it is now quite refined, stores your original image on Google’s free CDN and supplies an optimised image version depending on the browser’s viewport. No need to optimise images, use their App for that This works seamlessly not only for mobiles but also for desktops. This feature saves a tremendous amount of coding and I especially like the built-in feature that instantly renders images only for the available viewport, remaining…

[UpstateLeafPeeper]

@John_Betong.

Thanks, but this is a home-grown site, so no plugins.

If anyone knows the answer to my question that would be the most helpful.

Restated, I recall in the past that you’d have 3-4 versions (i.e. sizes) of your photos and serve up the appropriate size per device.

If you just use CSS to resize things, you get the right sized image, but you will be choking mobile devices with a larger file size.

Maybe for this mini project, I can just take the original larger file, resize it in some software to make a thumbnail that will work on any sized device and call it quits.

But I would like to understand if the approach I mention above is still used, and also understand how to tackle this topic for larger sites like the e-commerce site I am working on.

[bwclovis]

Srcset, available in most browsers.

[UpstateLeafPeeper]

I don’t understand what you are referring to?

[Gandalf]

@UpstateLeafPeeper

But what I was asking is a.) should I have multiple version of thumbnails and display them depending on device?

Maybe 200x200 for a desktop, but 100x100 for a smartphone?

I wouldn’t. 100x100 on a mobile would be quite small to see and a 200x200 thumbnail should only be about 10KB when optimised.

@UpstateLeafPeeper

How do you optimize images?

I use tinyjpg.com

[chrisofarabia]

@UpstateLeafPeeper

I don’t understand what you are referring to?

Have you tried https://lmgtfy.com/?q=srcset ?

[UpstateLeafPeeper]

@chrisofarabia

Have you tried https://lmgtfy.com/?q=srcset ?

Just what the world needs - more sarcasm!

[coothead]

@UpstateLeafPeeper

Just what the world needs - more sarcasm!

Lighten up a little bit, did you not click the
“Google Search” button on that page?

coothead