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.
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.
TIF (or TIFF) are the web equivalent of RAW images shot on a DSLR camera. Almost no compression, so you should expect very large file sizes for even quite small / modest images. TIFF images are incompatible with some web browsers and devices.
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.
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. The free DropFix app (pictured below) is a prime example of an app that will effortlessly bulk resize dozens or even hundreds of images within a matter of seconds.
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.
Also, don't forget that retina displays now exist. All of our themes will look for retina images containing @2x in their file name, right before the extension. If these images exist in the same directory as the standard images, we'll exchange them on retina displays. See the retina images article for more information.
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 meta data from images
Images often have additional meta data 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). Removing this meta data can reduce image file size even smaller, with zero impact on image quality. The free ImageOptim app (picture below) is perfect for this task.
If your website reuses the same images over multiple pages (like a logo image or custom header / banner) it may be advantageous to ensure these images are cached. Our article on website optimisation contains more details about caching. To summarise, cached images will only get downloaded the first time someone visits the website, and the web browser will refrain from downloading them again until the cache expiry date is exceeded or a user manually clears their cache / refreshes the page.
Using icons instead of images
All ThemeFlood themes include support for Font Awesome Icons. A separate article has been published about Font Awesome icons. These small vector graphics can offer an excellent alternative to images.