: Image size for a responsive photo site I'm working on a Web design for a responsive website for a photographer. Client would like the site to work well on mobile, tablet and desktop. The site

@Kevin459

What's the Key?

As always, with any project, experimentation is the key to success. Play around with the tools at your disposal and see what fits the bill best.

Making your images too large or too small obviously have their advantages/disadvantages, but in this instance you really do need a middle ground.

Formats

There are various picture formats around that offer various advantages and disadvantages, but on the whole there are three which really matter on the web:

JPEG

JPEGs are a great way of compressing images. They use a lossy compression technique that maximises the amount of data that can be taken out of an image. In rather plain images, that have larger expanses of similar colours, massive savings can be made and high compression ratings used. In a much more detailed image, however, this is not the case - a lossy format could destroy the essence of the image.

I would advise seeing how much compression you can apply using JPEG before things turn nasty on many different pictures.

PNG

PNG's are a good non-lossy format to work with, providing excellent final quality of output. They can be compressed, though the compression is nowhere near as effective as the JPEG format.

A further advantage of PNG is that it handles transparency, very useful in some cases.

GIF

Finally, GIF images do have their place, more usually in the animation field, however. For many years they provided web users with the ability to add animation to their pages quickly and easily.

Normally a GIF file is an 8 bit image, utilising a palette of 256 different colours. I have a picture of my daughter in her rain mac bending over and washing her hands in the sea. I converted it to a 8 bit image (GIF) and, though you could tell when it had been done, the selected colour ranges were subtle enough to fool most eyes.

You can consider GIFs, but I don't think they're what you're looking for.

Final Pointers

A final few points to consider are:


Just how much space are you willing to invest in each image?
Similarly, how important is bandwidth?
How important is quality?
Though we may have nice large monitors to work on, what about the potential clients?


Final possibilities...


Play with other applications for converting/compressing images.
Remember that you have to be able to reproduce the process potentially thousands of time to compress images to the right shapes/sizes and compression depths.
Photoshop is excellent at compressing pictures in different ways. Experiment with them and see what works best for you.
Experiment!

Vote Up Vote Down

@Michele215

Do not make the photos that large, only if you expect the people to download them for free.

As they are just a gallery try something like 1280px wide.

In this case, in my opinion forget the 2X option.

Edited. The max resolution I would use for a gallery is Full HD. In this case either 1980px wide or 1080 px height, whatever ocurrs first.

Vote Up Vote Down