This article was first published on Navii, August 29th.
A common issue with tourism websites is that they load very slowly (and thereby negatively impact their SEO rankings) because the gallery of beautiful images are often billboard-size when they don’t need to be. Or are saved as a PNG as opposed to a JPG.
This article aims to help businesses understand how to resize their images for online use. In particular, the differences in image size, resolution and file type between website, social media and billboard-sized images.
Watch the video below or read along as you will learn how to make these important changes to your images on your website and ultimately reduce your websites bounce rate
Understand How to Reduce your Websites Bounce Rate
Below we have explained some of the terminologies you’re likely to encounter when you’re working with digital images.
Pixels
The size of a photo is measured in pixels, which is the smallest colour component in a photo. Each of the coloured squares in the image below is a pixel. This is what a photo looks like extremely close up.
Lossy vs. lossless compression
Lossy and lossless are two different types of file compression. Lossless compression formats compress the original image without losing the accuracy and detail of the original photo. Whereas, Lossy compression accept some image degradation in exchange for smaller file size.
Think of it like this, Lossless is similar to a PNG whereas Lossy is similar to a JPG image.
Image quality
There are four factors that determine the quality of an image. These are:
- The size (in pixels) of the image. Also called the resolution. For example, a photo that is 2048 pixels x 1536 pixels in size is a total of 3,145,728 pixels (or 3 Megapixels)
- The quality of the recording device (camera’s optics and sensor, scanner’s sensor) which is directly related to the quality of the pixel)
- The digital format it is stored in (lossless vs lossy compression).
- The technical proficiency and the “eye” of the photographer.
- Source images
- When it comes to the original images you use on your website, a bigger source image is better, because you can go down in size, but not up, without losing quality.
Different image formats
JPG/JPEG (lossy format from 1-12, 12 being the best).
This format relies on the blending of colour. It is a “lossy” format meaning it reduces the file size of an image by blending “redundant” image pixels. As the image is compressed blurriness appears around the edges of objects in the photo. It’s great for websites because of the small file size. However, the smaller size does mean that some quality is lost.
Note: there is no difference between the .jpg and .jpeg filename
PNG (Portable Network Graphics)
PNGs are amazing for when you need to use an image with a transparent background. PNGs are “lossless,” meaning you can edit them and not lose quality, however, this means that the file size tends to be fairly large and will hinder your website load speed. The slower the image loads the more likely users will click out of your website (also known as a low bounce rate).
Therefore, we only recommend using PNGs when you need to use a transparent background, for example, your logo file. Or if you are uploading the image to your social media channels.
GIF (Graphics Interchange Format)
Similar to the PNG format, GIFs can be saved with a transparent background. However, GIFs are known for their fun animations. The moving image, however, is unlikely to be used on your website often, if at all.
TIFF (Tagged Image File)
A TIF file is a large file format with no loss of image quality. TIFF files are lossless which means that the original image data is preserved no matter how many times you copy, re-save, or compress it. They are not suitable for use on websites as they are large and will severely impact your website’s loading speed.
RAW (Raw Image Formats including .raw, .cr2, .nef, .orf, .sr2, and more)
RAW images are the first format a photograph acquires when it’s captured (also known as an original image). RAW photos are good because they capture all of the elements of a photograph without losing minute visual details due to processing, however, they are unsuitable for use on your website.
Golden Rule: It is important to keep a copy of your RAW images before you begin editing, resizing and changing the file type.
The trade-off: Image size and quality versus fast load time
When uploading images to your website you will need to find a happy medium between image size and quality and fast load times. The heavier your images are on your webpage, the longer it takes to load. This can result in lost customers and will also penalise your site in terms of Google rankings.
Did you know, bounce rates increase by 50% when your website takes 2 extra seconds to load and conversions decrease by 12% for every extra second.
If you want to test any of your website pages, use tools.pingdom.com:
- enter your webpage address
- select the location closest to your server
- it will analyse your webpage and report on your approximate load time, image sizes and other factors that might be slowing your webpage load time
- you can then take informed action to improve your load time!
The most common screen resolution is 1366 px wide 768 px high. Based on this information, talk to your web developer regarding the best image size for your own website.
As an example, on Tourism Tribe:
- full-width-images are 1,400 px wide and we try to keep them at less than 100kB
- smaller images are generally uploaded at 800 x 600 px or less and are less than 80kB (ideally less than 50kB)
How to resize images
There are many free programs available to edit and resize photos. Many of them are web-based, such as:
- Canva.com or Canva photo editor are great for cropping, resizing and simple image edits
- PNG2JPG allows you to change the format of an image from PNG-to-JPG or vice a versa
- Tinypng.com is excellent for reducing the size of images
- Pixlr.com for more advanced capabilities
Mac users can resize images on their computers without online software tools. To do this, simply open your image, click File, click Export, change the format t0 JPEG and drag the slider until you are at the desired file size (ideally under 100 kb for website use).
There is a demo of this process in the youtube video at the top of this article.
Windows users can use a similar process using the Paint program which natively exists on windows computers. To do this, open an image in Paint, click File, click Save As, click JPG, save the new file.
