Images for Responsive

What is the best, easiest, and most affordable way for me to prepare images for a responsive design?

I am on a Mac and don’t have Photoshop. I do have Gimp and Inkscape, but can barely figure out how to open them!

To give you some perspective on my design background, the last time I used Photoshop was version 6. :sunglasses:

Before I undertook this RWD thing, I tried “optimizing” photos - using Gimp - for my client’s website, and they were worse than before I did it!

I was hoping to have images in my first responsive site, but fear that if I don’t come up with a better approach, that images will kill my site!

BTW, I have no money!!!

Try searching for free image resizing, there are loads and my Delphi was dropped because of the overwhelming competition :frowning:

I can resize in Gimp, but it seems to me that one of many areas where Photoshop excels is its ability to “optimize” photos - i.e. make them super small in file size, yet look great.

You would think Gimp could do a decent job, but not from my experience.

Is it the tool or the operator? :smile:

I will have to hazard a guess without being able to see your attempts at optimising images and think that the free tools require a lot of experience to create images on a par with PhotoShop.

Try this free online drag & drop image optimiser.

Batch Image Resizing Made Easy

Not really. There are free online tools that do a much better job.

There are lots of ways to deal with responsive images, and new HTML attributes like srcset. But I still find the best method is summed up here:

Mind you, that’s more about dealing with retina-friendly images. To make images responsive, you can just put a % width on them. Done. :slight_smile:


What exactly is the approach taken with images and responsive design? (Sorry, trying to cram months of learning into a weekend!)

Do you just create 5-6 versions of an image, and then use media-queries to determine which image-size to serve up?

Nah. Just put an image in a container, make the image max-width:100% or something like that (don’t hard call the image like…

img {

Don’t set widths/heights like that. Just set a max-width or something and let it scale up/down the container. Depends on the situation though / the image.

If I took that approach, then…

  • That assumes you want an image to be the full size/width of the viewport which isn’t always the case

  • It means you would need a fairly high-resolution image to display properly at desktop size

  • It also means you would be forcing a poor iPhone4 user to download that large image

Doesn’t seem like a very good approach to me.

It means that you want the image to fill it’s containing element, whatever that is.

That would be expected, yes.

Probably not. You would replace the larger image with a smaller image in response to the media query. (that’s why it is called “RWD”)

As I said, it depends on the situation. There is no one size fits all when it comes to RWD aspects. Something you do for one page situation might not be a good idea for another similar situation.

But that isn’t what @RyanReese implied.

I would have expected you create 3, 4, 5, 6 different sizes of one image, and then use media queries to serve up the best fit.

What exactly do you think I was implying? To never swap images? I did say it depends on the image / situation.

That means that you should scale an image but there are cases where you should swap it out. THAT is what was implied via the situation/image comment.

Obviously a file that is 1600x900 banner image should not be served up to mobile. That should be replaced.

A 600x250 image that’s meant for desktop is probably fine to keep that for mobile as well.

Hehe, I provided a link that deals with that situation.

Since it was for retina, I just skimmed the first part for now. (I’ll deal with those pesky retina users later once I have a working responsive site!)

The picture element seems to have landed in the latest browsers (apart from IE).

Unless I am mistaken (and I probably am) then rather than helping solve the problem of image weight on the web it seems to me that they are adding to the problem. I just used the picture element to add 3 different images depending on viewport width which is fine when the page initially opens but if you then resize the browser (as I do all the time) the other images load when you cross the breakpoint so now I have loaded three images instead of the one.

Obviously small screens can’t be resized so they only load the 1 image but desktops/laptops may end up loading all the images!

I can see a use for 'art direction" where a smaller image needs a different focus and not just a large image scaled smaller but for most uses just scaling in the browser would still seem to be the way to go.

1 Like

Interesting, I suppose if the browser were smarter, it would load the first image, then stick with it. That would make sense, at least if you start big and go smaller. You have already loaded the big image, so gain nothing by loading subsequent smaller versions. Starting small and going bigger may be different.
But then, do “ordinary” web users mess around changing window sizes all the time, like us people constantly testing for responsiveness?

I guess some (maybe many) users always have their browsers maximised but I do know a number of people (not web developers) who have three or four applications open at the same time and like to be able to switch between each easily so resize the workspace to fit.

I am continually moving and resizing my browser virtually every minute but I guess that’s just me :smile:

It looks like we a dealing with three issues here.

  1. The quality of processing optimised images. What specific problems are you having with the images, bad re-sampling, compression artefacts, bit depth issues, big files or what?
  2. Re-sizing images on the page. Do this by % max-width in css to make them totally fluid, not by replacing image files at increments.
  3. Making best use of bandwidth. This is where you may replace image files, though its not always necessary. There are as mentioned the <picture> element and the srcset attribute for that.

This is a method I use for re-sizing on the page (point 2.) I do set the width in the img tag, if images are different sizes, though there is no need if the image is that size. If all images were the same size, I would set it in css.

If you create different sized images and then use media queries, then you would only ever load the correct image size, right?

I had a photo (.jpg) that was say 200KB and after I tried using Gimp to optimize it, the photo was like 250KB (.png).

Over a decade ago when I had Photoshop on my PC, I know it did a kick ass job of taking a photo, making the file size significantly smaller, and yet you could barely tell when looking at the new, optimized photo.