If you are confident about preparing images for the web, the only thing that you need to know is that the maximum width for images in the A&P template is 450 pixels. Please don’t load any images larger than this unless you select the thumbnail option. If you are using the thumbnail option then any size is possible, but a realistic maximum is 950px wide, by 650px high (for 1024×768 screens).
If you are less confident about preparing images for the web, then here are some things that you need to think about.
- Getting the image right
- Ensuring people see the image the way that you prepared it
- Not ruining the image by adapting it for the web
There are too many image editing programs to do a click by click guide, although if you use one of the more popular ones there may easily be another A&P contributor who can help you.
Getting the image right
This essentially means getting it so that it looks right to you, but there is a signficant catch. If you aren’t using a calibrated monitor, then you are not in control of the way that the image really looks. It is only right on your own screen. Monitor calibration hardware is not expensive and is a must for anybody regularly looking at artwork on a screen. A few percent too much blue, for example, really can destroy most pictures. And it doesn’t matter how expensive your monitor is, it still needs to be calibrated.
Ensuring that people see the image the way that you prepared it
Most browsers handle colours badly. There is a lot of theory behind this, but the practice is quite straightforward. The only colour space (set of colour instructions) that are handled anything like reliably is the one known as sRGB.
This means that you need to convert your image into the sRGB space and embed that space into the file through any final steps.
Picture editors will typically have a ‘convert to…’ menu option. Note: do not ‘assign’. You must convert.
Once you have converted, ensure with any subsequent step that you select the ‘keep embedded profile’ or ‘keep ICC’ option. Otherwise, the colour information gets stripped out.
If this sound complicated (and it is) then consider the fact that images will look wildly different in different browsers unless you do this. If the image matters, then this matters.
Not ruining the image by adapting it for the web.
For a 450px wide image, about 50kb file size is about right. You file is currently 5mb, or even 50mb. What to do?
First off it is important to undestand that no monitor will display high resolution images. It is a waste of everybody’s time to post 300 pixel per inch (ppi) images unless you want to share the file. Picture editors should allow you to change the ppi setting without resampling (i.e. the file doesn’t change it is just presented for monitors rather than printers). Don’t choose a ppi higher than 100 and don’t choose one lower than 70. Many people choose 72.
Now you need to make the file physically smaller. What you are doing here is resampling the file to meet your desired size. Select (say) 450 pixels as a width and let your picture editor resample the image downwards. Your picture editor may use the word interpolate rather than resample. Bicubic interpolation is a common resampling method.
The resulting file is now at the right display resolution and physical size, but probably is still too many megabytes for loading. The final step is to compress the file into one of the Jpg formats. Experiment with either medium or high settings. Photoshop has a simple ‘save for web’ option, but most picture editors will have something similar. Sometimes this is an option at the point of saving rather than one in the menu structure.
How do you know that the result is right? Well, if you compare the new, small, file with the original on your screen and you can see obvious differences then you have gone too far. If you look at the file size and it is above about 100kb, then you haven’t gone far enough. (Guideline sizes are 50kb for 450px, 100kb for 650px, and 250kb for 950px – but individual picture variation is enormous).
