Despite the preponderance of the extra large image (see just about any college/university site), imaging for the web should be seen in terms of “just enough, and no more”. But the question then is, how much is enough?
As an example, see this page. The image is 600 × 720 pixels, and weighs in at 111K. On my 15″ MacBook Pro, with a Retina display, it displays at 455 × 546px. So, for that display, it is big enough. It was saved as a JPEG at 40% quality, which I have found to be about right for most images.
The image was batch exported from Lightroom, which is a handing thing, but after some investigation, I found that Photoshop gives the same image quality in a smaller file size (78K as opposed to the 111K). Go figure. The drawback is that there is no batch processing with Photoshop, and if you have a lot of images, it takes time.
How to do it
- Open the image in an image editor (Photoshop, Pixelmator). You need somethingthat gives you a bit of control. Apple’s Photos can do it, but probably not as granular as a dedicated image editor. As mentioned above, Adobe’s Lightroom can do it in batch, but produces files that are significantly larger.
- Go to Image > Image size.
- First set the resolution to either 72 or 96ppi (pixels per inch).
- Then set either the height or width to what you have decided is appropriate. Remember: big enough is big enough.
- Finally, export the image to the proper format. Bitmaps (photographs) should use JPEG. The quality needs to be as good as you need, and as mentioned above, around 40% may be sufficient. Higher quality means bigger file size, so go with the least you can get away with. Vectors images should be exported as either GIF or PNG. PNG will usually give you a smaller file size.
That is pretty much it, basically. This whole thing can be fine tuned to better serve different devices, but requires some extra work. Some thoughts on this are here.
