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.
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.
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 {
height:400px;
width:400px
}
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.
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.
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.
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
It looks like we a dealing with three issues here.
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?
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.
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.
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.
