Images can be difficult to work with on websites. Almost any novice website builder or expert will tell you the same. Images are easy to display on websites, but it can be a tough job trying to strike a balance between file size and image quality.
Ultimately you want to work towards keeping image file sizes as small as possible. Images with a large file size will result in pages taking longer to load, the website will become frustratingly sluggish for people to browse and you will start burning through bandwidth and disk space at an alarming rate. Likewise in extreme situations, an underpowered web browser or device (like a smart phone) might run out of the amount of processing power required to display the page, and your page could fail altogether or crash the browser. Not good.
So with this in mind, you should take image file sizes seriously. Ensure that image optimisazation is part of your everyday workflow and ensure that colleagues or clients around you are also abiding by the same best practices. Image optimization is not a ‘bug’ or something that can be fixed in WeaverPix or RapidWeaver. It is a fundamental part of modern web design, applicable to almost any publishing platform.
Tools of the trade
Any decent graphics editor is essential to have in your workflow. These provide all the options to perform basic modifications to images (like image dimensions and file format), plus tweaks to colors, contrast and other adjustments. Here are a few suggestions:
- GIMP (free)
- ImageWell (free)
- Seashore (free)
- Pixelmator (paid)
- Acorn (paid)
- Photoshop (paid)
Searching online will probably reveal many other image editors too. In addition to one of these image editing applications, you should also go ahead and download the free ImageOptim plugin. This plugin does a superb job of optimising images immediately before they are published online or added to your page.
It is wise to keep your original images separate from your web-optimized images. This means you avoid overwriting your originals and can return back to them at a later time. You could easily have a system as simple as two folders on your computer - one for original images and another for re-saved (optimized) images.
Ensure that all your images are included in Time Machine or other backups.
Finally it is worth putting plain text files into each folder of images. This text file can include useful comments like the date of the images, location, photographer, copyright information, optimization method, compression settings etc. In other words, just useful editorial information for yourself that you can refer back to in future.
The first stage is to look at the image you want to use in a web page, versus the size of the space for the image to go in. Most digital camera’s and other devices like scanners and slide scanners can create images well over 4000px wide or tall. But if the space to display the image (e.g. a slideshow) on the website is only 1000px wide, then you have an option to scale the image down. Images can be scaled in two ways; either using the web browser or by scaling them yourself in an image editor. There’s a big difference between the two:
If you scale an image down in an image editor, you merge and remove surplus pixels. Less pixels means less data, thus smaller file size. Also an image editor is intelligent enough to merge certain neighbouring pixels together, but preserve others intact. So an image scaled down in a graphics editor will always look better.
A web browser can scale an image down to fit the page. This is especially true in responsive setups. However the web browser will always use the original image you provide, and this can be quite inefficient because you’re serving more pixel data than what the web browser actually needs to display the image. Also a web browser will scale an image down using a simple height-width aspect ratio algorithm - and this can lead to images loosing clarity and looking more blurry.
So it is always wise to do your image scaling in a graphics editor. This will give the greatest file size efficiency savings and also the best possible image quality. Most image editing applications include an option to scale images. Cropping an image can be another method of reducing image sizes.
The file format of the image is an important consideration. JPG, PNG and GIF are considered the ‘web safe’ file formats for images. Anything else like TIFF, PSD, BMP, TGA or SVG is unlikely to display in certain web browsers or without the aid of extra plugins or software. Here is a breakdown of what each web-safe file format is suitable for:
JPG is ideal for ‘flat’ images with a high depth of color. Differing levels of compression can be applied on JPG images, to get a fine balance between file size and image quality. JPG is very well supported on all major web browsers.
PNG is useful if images contain transparent regions, like rounded corners, box shadows or more integrate regions of transparency. PNG does not compress as well as JPG does, but is still well supported on all newer web browsers.
GIF is better suited for images with limited colors, like maps, line drawings, illustrations and monochrome images. Multiple GIF images can be stitched together in special software to make basic animations. GIF files are typically very small.
There is a brand new, opensource format for images worth mentioning called ‘WebP’ that is slowly becoming available. Some web browsers like Firefox, Opera and Internet Explorer 10 have added support for this format. WebP images can be created in software like Pixelmator and strides to offer the same functionality as PNG, but with the ability to make image file sizes even smaller than JPG (while still retaining very high image quality). WebP should be considered experimental at this stage, due to the lack of browser support. But it could be a viable alternative in specialist projects you might be working on. Expect it to become a widely used and supported image format in a few years time.
Exporting for web
Sophisticated image editors like Gimp, Acorn, Pixelmator and Photoshop often have a Save for web or Save for web and devices option in the file or export menu. Typically these all work in much the same way - they provide a preview of your image, a choice of file formats and then options to adjust the image compression, versus the file size. Different settings are often presented, depending on what file format you choose to save an image in. Some graphics editors have significantly more settings available to you.
This is a setting available in some software like Photoshop, when you save an image for the web. Progressive loading saves an image in multiple layers. When the image loads over the internet, it gives the illusion of an image building-up in stages. It can look a bit more attractive than just having images load down the screen in blocks. Progressive loading does not do anything to optimize images - in fact it can add a few killobytes to the size of images. However it can give an optical illusion of images loading faster on a webpage. So it is worth mentioning nonetheless. It’s personal preference if you decide to use progressive loading or not. Normally progressive loading is only available on JPG images.
The final stage of preparing your images for the web should be running them through ImageOptim. This free application does a brilliant job of compressing images, and removes surplus components in saved images like color profiles, EXIF data and comments. A lot of these surplus components in images never need to be used on the web, so removing them reduces file sizes. In some instances, ImageOptim can reduce an image file size by over 50% in extreme instances, and often does so without damaging the quality of the image. ImageOptim is a very smart little utility - and has long been a little-known favourite with some web developers.
Using ImageOptim is pretty easy. Start by launching the application. In the new window (pictured below) drag and drop in the images you want optimized. ImageOptim is able to batch-optimize multiple images at the same time.
Image optimization occurs automatically in ImageOptin (you do not need to choose any settings or press a button). Everything is done for you. ImageOptim displays the size of the modified image (in bytes) and the file size saving ImageOptim has achieved, compared to the original.
The 200 KB rule
Most web developers tend to agree that 200 KB is the maximum file size for an image to be published online. This figure has been arrived at by combining several factors like the average dimensions of images, format, number of images per page, the internet connection speed and many other parameters. Running over this 200 KB limit a couple of times is not going to hurt. Sometimes we have a very valid reason to publish large images onto websites. But repeatedly running over this 200 KB can lead to problems. If you find that after image optimization you still have many images over 200 KB in size, it is time to apply the brakes and rethink things. Either image dimensions need reducing again, or compression needs increasing.
Once your images have have all been optimized, you’re ready to use them in your websites. They can either be dragged and dropped into your WeaverPix page, uploaded to an image warehouse or published to an online service. The information provided in this image optimization guide is applicable to any plugin or web publishing platform you are using, that makes use of published images. More information on the topic is available online.