Actions

Preparing images

From Unusual Light Wiki

Preparing your images in the right way can be the difference between a fast loading website and a poor user experience.

It is always best to spend time on each individual image to get the best out of them in the same way you would if it was a print. Generally treating the images on the website like a print is a good method when you consider it's likely that more people will see the images on the website than they would a print.

file types

JPEG is the best file type to share photographic images over the internet. GIF is probably only suitable for anyone wanting to use small animation sequences in their images PNG is the best format for images which have text on them.

pixel x pixel

The smaller the number of pixels the smaller the file size is a good guide to go by. We recommend users have images set to around 1000px longest edge or 700px high. You can chose to have them whatever size you want but just keep this in mind.


Compression

The easiest way to reduce the file size with your images is to compress them. There are a few different methods to compress

Photoshop save for web

The simple method with save for web is to drag the quality slider all the way down until you begin to see a lower quality image. From here you should then increase the quality size until the image looks normal again. You'll find this happens around 75% mark.

Photoshop

Similar to the save for web method but the figures go from 0-12 rather than 0-100. This method of saving the image may include additional data such as the image's meta data that can increase the file size.

Lightroom

Similar to save for web in photoshop again, but you won't get to see the results before saving the image. saving at around 75% works well in general but some images may need more or less.

DPI

There's a common misconception that changing the DPI can change the file size. This is only true if the number of pixels is also changed. Setting the DPI to 72 would make no difference to loading times than 320dpi.

Meta Data

Adding meta data in images can be useful to keep track of them, but as easy as it is to add it's just as easy to remove. If you're working with a gallery that has a large number of images, stripping meta data can save several seconds in load time for some users.