This week I have been trying to get my head around image size resolution and quality for a responsive design,
In my Google searching I have found many articles on the use of media queries, all of the articles talk about solutions that down size the image by cropping or re-sizing, so for example if you have a 1000 PX wide image it will be 700 for tablet, and 450 for Mobile ( very general)
My problem with this is that a new 7 inch tablet has a resolution of 1024px and a top mobile in landscape is not much smaller, so I still want a 1000 PX slideshow to show my images to the full on a mobile in landscape,
So I have been playing with image quality
I had always saved my images at 85%, but after playing I can get away with much smaller,
Desktop at 50%
Tablet at 20%
Mobile at 5%
And the images still looked excellent,
I have not found a solution yet that uses quality as a reducing factor, do you know of one?
I wouldn’t go much lower on the resolution. All devices are different and the mobile ones now are catching up in terms of PPI. 1080p screens aren’t as rare and the quality difference will be noticeable.
if we have an image at 1080px across its long edge this will fill our 7" tablet, most notebooks, loads of new mobiles and quite a few desktop screens, this is because these devices are physically 1080px wide, but there size is very different, 3" for a mobile, 7" for a tablet, 12" for the notebook and 20" for the desktop,
when you are cramming so many pixels per inch into a smaller size you seam to be able to get away with a much lower quality image, I believe this is because the artifacts that become obvious on a larger screen don’t show up on the smaller devices,
look at these examples on the various devices, this is the same size image, it has just been saves at a different quality, you will see what is unacceptable on a pc monitor is excellent on a mobile