Introduction to optimising
Back when Internet speeds were slow, you either didn’t use images on your website or you optimised them to the point of a badly taken identity document photograph. With the Internet speeds increasing astronomically since then, the art of image optimisation has become a less known and even lesser practiced skill. So here’s the low-down on what image optimising really is, why you should do it, and how you should go about optimising your images.
There are two major camps for digital graphics: vector (What is a vector? ) and bitmap (What is a bitmap?). However, simply put, vectors are more commonly reserved for digital illustrations (see the image below for a visual referance), and are their own subject. Bitmaps are bit based (as in bits and bytes) where each pixel present in the digital image has a colour value that it remembers. So the more pixels your image has, the more values the image has to remember, and the bigger your file size will be. So there are two options to optimising your digital images: reduce the pixels used, and reduce the information/colour value each pixel holds.
Why you should do it:
One word: SPEED! If you are running a website you have less than 10 seconds to retain you viewer. If you have a downloadable file (I’m meaning apps too), optimised images can transform a 100MB download file into a 80MB file. And while that may not seem like much, it can be translated in to money for you and your user when you are both saving money on bandwidth and time!
How you should go about optimising your images (Using Adobe Photoshop):
1. Ensure your image is digital
Sometimes in publishing houses and design agencies the same content is used over different media – print and digital for example. Print-ready images are digital but have properties designated for printers, which is CMYK at 300 dpi. Since our digital world has no printers we cater our images for screens, which is RGB at 72dpi. To ensure or change an image’s settings, navigate to the top Photoshop menu and under Image, select Mode, from the drop-down list select RGB colour.
Then under the same Image menu option, navigate to Image Size… A dialog box should appear. There ensure the Resolution is set to 72, if is not change it to 72. You’ll notice there’s an option to choose between pixels per inch or pixels per centimetre – pixels per inch is the industry standard. You’ll also notice a dramatic change in the pixel dimensions of your image if you change your resolution down form 300dpi to 72dpi – fret not as you still have more than enough room to play with. Click OK to commit the changes and close the dialog box.
2. Resize to the right size
What is the destination for the image? Decide what is the available size in that destination area, then resize your image to the actual size you need the image to be. This is one of the major steps to minimizing file size. If your content is scalable or is flip-able, rather use a range of sized images over having one image that scales. This means more maintenance and coding, but at least you retain control over presentation and quality rather than relying on the code/application to do so. Let’s open the image resize dialog box again, it’s under the Photoshop top menu, select Image then select Image Resize… Then enter the desired values into the Width and Height input boxes respectively. Ensure the Constrained Proportions checkbox is checked On. If you are happy with the new size click OK to commit the changes and close the dialog box.
*Note* If your image width and height are not matching up to your required output values because of the image’s orientation/aspect ratio, you’ll have to crop the images using the crop tool from the toolbox before resizing the image.
3. Choose a format
There are three major formats used for bitmap images, they are recognised by their file extensions:
- .jpg (What is a jpeg?)
- .png (What is a portable network graphic?)
- .gif (What is a Graphics Interchange Format?)
Jpgs are used for photographs and anytime where the image is not predominantly flat colours, however, it does not have transparency support. Png on the other hand does have support for transparency and handles both soft changes in colour and flat colours, but at a large bit cost, so use it only when you need transparency. And gif is superb at retaining large areas of flat colour at low bit cost, it also handles transparency on a hard-edge level; it has poor quality for photographs. Generally 99% of the images we use for our publications will be optimised jpeg, if you are unsure which format to use, use jpg as a default.
 |
 |
 |
| A .jpg example at 20KB | A .png example at 147KB | A .gif example at 33KB |
4. Export!
The second biggest trick to optimising images is exporting your images via the Save for Web & Devices… menu option. This can be found under the top Photoshop menu, by selecting File and then clicking on Save for Web & Devices…
Assuming you are exporting to the jpeg format the most important box you need to review is the Quality input field, it should be 60 (we’ve found this value to be the most effective compromise between quality and bit cost). Ensure Progressive is checked On if your output is a web-based platform as Progressive allows for a more speedy download of a blurred image the becomes clearer as more of the image is downloaded. However, if your output is an app or download file simply deselect the Progressive, Optimised and Embed Color Profile, I like to keep the Convert to sRGB checkbox On as in my experience it is the most standardised colour profile. All the rest of the funny boxes and input fields can be safely ignored if they are corresponding to all your actions (the image-size should be your resized image etc.). Once you are happy click Save.
*Note* Give us a shout in the comments in you are interested in our opinion in exporting PNG or GIF images too!
*Naming conventions* Now comes a debatable topic, if you don’t name files properly you won’t go to designer-hell, but I believe a strong naming convention can save designer-lives if standardise and followed by all. If your images are aimed at a website, they’re going to be tossed in with a lot of other images on the server, naming your images with a prefix can help group them, which should double-up as an identity for them. And giving them a number (always start your numbering with ‘01‘) will visually order them as well. Adding another number or date will act as display of what version of the image you are looking at. Standardising those basic steps will not only help you find your images easier come edit or re-uploading time, but just by looking at the file name will you and your colleagues (back-end developers most importantly) know what the image purpose is. Naming conventions can be communication tools, allowing for more automated work. Also Search engine optimisation reads the file name of image to get more information about a website, so having descriptive English words in an image title can be functional in many ways. I can suggest adding the ‘img‘ as a prefix, this will sort and identify your image files. Some servers hate spaces so using an underscore or a dash instead of a space is very necessary (just be consistent). Then add a logical, English, descriptive, but simple word – I’d use a page number (‘page01_slide04‘) or place on a page (‘top_right_popup‘) and then a number in case there are to be similar files names and lastly the date as a suffix (in number form from year to month to day ‘2012-06-05‘).So our file names look something like this:
img_bigFIG_compare01_jpg_2012-06-05.jpg
img_bigFIG_compare02_png_2012-06-05.jpg
img_bigFIG_compare03_gif_2012-06-05.jpg
5. Clean-up…
Well done, almost there. Once you get into the habit this should take no more than 30-45 seconds per image, you could even set-up a Photoshop recipe if you super-pro. Now we’ve exported our import and it’s optimised and easy to read and find, however we have used destructed, edited and shaped the original file into something new – never, and I mean NEVER save over the original file. EVER! So simply selecting close and accepting or ignoring changes is a bad idea. If you accept you will lose your original artwork and not have a fresh starting point should you be required to create new artwork (it happens more than you think). By rejecting changes you will have lost the 30-45 seconds of work you have just done – it’s not much, but when you are processing 50-60 images that time will add-up. The best action is to select Save As… from the File drop-down list located in the top Photoshop menu. Save the file as a photoshop document (.psd) and name it the same as the file naming convention you used on the image you export – exactly the same – so anyone can just open-up the .psd and continue using it were you left off. Also put the .psd in a logical place in a community area on a joint sever, preferable in a folder named according to which project the images were to be used.
Wrap-up to optimising
Now that may have seemed like a lot of protocol just to make images as optimised as possible, but it save costs and time in the long-run. It’s also just one of the invisible services we offer here at bigFIG with every project we take on board – along with overcoming all of the other little challenges faced with creating a digital products – get in contact, so we can make your material – digital.
