Image Optimisation
Images are a key component of many websites. Therefore it's important to ensure images are correctly optimised. Simply dragging and dropping images straight into RapidWeaver is often not the most effective approach and is a mistake some people make. Image optimisation strikes a fine balance between file size and image quality. It's important your website users see good-quality images, but without the problems of pages taking a very long time to load. Handheld devices typically have less processing power, and lots of images greater than 200KB in size could present problems.
Image Optimisation Video (YouTube)
Choosing the correct image format
The file format of images can play a significant role in file size and image quality. There are many image formats available for different purposes. Most modern computers and handheld devices can support different formats, but it is worth remembering that some formats (like Photoshop PSD files) will only display on computers with the supporting software installed. Therefore you should stick with using common, web-safe file formats for your images.- JPG is the best format to use for general images, including photographs and theme banners or headers. JPG lets you control image quality, and therefore the finished file size can be fine-tuned.
- PNG images typically result in larger files sizes. But unlike JPG images, PNG images can support alpha-channels (transparency and semi-transparency); making them a good choice for logo images or vector artwork containing text.
- SVG (scalable vector graphics) is an interesting image format which is particularly popular with Adobe Illustrator users. Compatibility has improved in recent years, making it a feasible choice for many web designers. As the name suggests, SVG is ideal for vector graphics that need to scale.
- GIF images are best suited for simple vector images (with limited colours) and for basic animated images that loop. Like PNG, there is support for transparency.
- WebP is a new image format employing both lossy and lossless compression. Excellent image quality and small file sizes. But only compatible with newer web browsers, so you will need to use a stack like WebPStack to offer a fall-back.
JPG and PNG images are the ones you are most likely to encounter in modern web design. Browser support is excellent and you have the choice of many apps for editing and saving images in either JPG or PNG format. All images should be saved at 72 dpi.
Another thing worth mentioning is that colours can have a significant impact on file size. For example, a JPG or PNG file with lots of green hues in it will be significantly larger, compared to an image that might contain more yellow.
Scaling images to the desired size
It is pointless to just drag and drop images (a couple of thousand pixels in size) straight into RapidWeaver. If the image is going to be scaled down, then that means a lot of wasted data is going to be transmitted. Wasted data means more bandwidth and slower loading pages.Lots of free and paid apps are available for scaling images down and re-saving them at a smaller file size. Some apps will even bulk-resize two or more images at the same time.
People often ask what dimensions images should be saved to. For images that are going to span the full width of a page (like theme header or banner images) then 2000px is realistic for most situations. For images placed within a theme content container that has width settings applied, then simply scale your images to the same width you have the theme set to (e.g. 1200 px). For images that are only going to occupy a small amount of space (like images going into grid column cells or with text wrapping around them) use your best judgement.
Image quality
This is mostly only applicable when using software (like Preview, Pixelmator, Acorn or Photoshop) for saving images in JPG format. You will often be presented with a slider or number input box to adjust the image quality.
Try to reduce the image quality as low as possible, before the image quality begins to degrade too much. This will help you create images with a smaller file size which still retains good image quality.
Remove surplus metadata from images
Images often have additional metadata attached to them. This data can comprise of just about anything; ranging from the author name to EXIF information (like the camera make, model or firmware version). Plus profiles and lots of other complicated data. Removing this metadata can reduce image file size even smaller, with zero impact on image quality. The free ImageOptim app (picture below) is perfect for this task.
