0

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 would have:

Based on our layout, I have decided the following breakpoints: For mobile, 320px wide (the smallest screen) For tablet, I want it to be 500px or 600px

There would be basically 2 layouts: one for mobile and one for tablet/desktop (tablet/desktop would evolve - grow- as screensize grows).

For desktop: what width should my Photoshop file be? Assuming my visitor view the site on a retina Imac, shall I choose that size for my biggest Photoshop file (5120 x 2880 pixels)? or a smaller size and then export my files @2x the size?

  • One thing to consider is future technology. Presently we're sitting on the cusp of 4K monitors becoming a standard. Actually being able to see pixels in such a resolution on something like a smart phone is out of the question, unless it's the size of a table. Even with a usually standard 22" office monitor a 4K resolution would be a test of anyone's eyesight to make out a pixel. Perhaps the real question should not be regarding dimensions, but more regarding format and file size? – Paul Jun 22 '16 at 8:27
  • @Paul - great point. Do you have suggestions for format or file size? I understand jpg is good for photos (?) then size-wise, I'm not sure. – Sophie Lepinoy Jun 22 '16 at 12:55
  • I'll expand this into an answer, Sophie. – Paul Jun 22 '16 at 13:02
1

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!
2

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.

  • aren't we running the risk of low-quality images (if viewed on retina imac) if I do not use 2x? – Sophie Lepinoy Jun 21 '16 at 15:02
  • isn't 1280px a bit on the lower size side? – Sophie Lepinoy Jun 21 '16 at 15:04
  • 1
    The point to consider is that you do not upload a image at too high resolution that people can just download and use as they please. A wallpaper or inclusive to ilustrate a website or magazine. - "Low quality" in an image is relative. If the photo is good, it is good. You can apply some sharpness. – Rafael Jun 21 '16 at 15:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.