artfolio How do I prepare my art images for the web?
Preparing & Optimizing your Art Photos ready for the web
When preparing images of your artwork to show on the web, you will need to “optimize” them for use on a website. This means preparing them in a size and file format acceptable by a website.
You probably have print quality images of your work which you would use for printed material. It's always best to keep high resolution masters of all your images and then export out smaller web sized images from these. That way you always keep a good quality large image of your work that you can use for printing when needed.
The idea, when you export an image for use on the Web is to get the file size as small as possible [for ease of download] so to this end web image formats tend to actually lose some of the image information in order to cut down on file size. This is why its important to keep a master original of your image at the original resolution.
Reducing the file size of an image is called "compression" (this is very similar to mp3 compression which reduces the file size of music files when compared to other formats).
Types of image compression format suitable for use on the web
There are only a small number of image compression formats that can be used on the web and they each have different characteristics so its quite important to choose the right one.
You will be able to export an image from your chosen image editing software as either a JPEG, GIF or PNG file, all of which are suitable for the web. Use the table below to work out which format might be best for your image.
Its not an exact science so don’t stress too much about it, but using the right format might enable you to get the file a bit smaller [and thus quicker to download].
| Web image compression formats and their different qualities | ||||
| Format | Best for | Opacities Supported? | Limitations | Features |
|---|---|---|---|---|
| JPEG | Large colour photographs |
No - opacities and transparencies are not supported | Large flat areas of colour may look fuzzy, particularly around the edges |
Use compression setting of around 60% for best results |
| GIF | Logos, graphics, text |
Partial - completely transparent backgrounds are possible but partially opaque areas will use a "matte" of a specific colour | Due to a maximum of 256 colours, smooth gradients may look gritty, particularly when there are many different colours present | GIFs can be animated |
| 8-bit PNG | Logos, graphics, text |
Partial - completely transparent backgrounds are possible but partially opaque areas will use a "matte" of a specific colour |
Due to a maximum of 256 colours, smooth gradients may look gritty, particularly when there are many different colours present | 8-bit PNGs are superseding GIFs |
| 24-bit PNG | Graphics, small colour photographs |
Yes - Full range of opacities are possible | Medium to large photographs will suffer from unacceptably large file sizes | The most accurate type of image compression |
Table Tips:
- "Photographs" refers to images with many thousands of colours whether they are literally photographs or created by other means.
- "Graphics" refers to images with only a small number of colours, and often large areas of single colours, e.g. some computer generated images, text, logos etc.Keep in mind, however, that there can be dozens of "colours" in an image that appears to contain only two or three - in close-up, the margins of coloured areas will tend to have a blurring of the colours on either side
Image optimising Dos and Don'ts
Do
- Do check the approximate size of image needed on a web page and resize your image to fit. Remember a very large image on the web means very slow download times.
- Do keep a high-res master copy of your image and export out a smaller one from this for the web
- Do whenever you photograph or scan anything, make sure its of sufficiently high resolution to print from. You can always export out smaller but you can't make the original bigger
- Do experiment with file formats to get the best result.
Don't
- Don't enlarge an image much larger than its original size – the quality of the image will suffer
- Don't just stick to the basic image editing software that came free with your computer. Use one of the free packages mentioned below and dive in.
Free image editing software
The software below is good and free and will help you get the most out of your images
Pixlr www.pixlr
Gimp www.gimp.org
Picasa www.picasa.google.com
More
Read some guidelines on creating great images for your art website
