A common problem with websites and blogs is with huge images that slow it down, which turns away visitors and negatively affects SEO. Solve the problem by choosing the right file format for your images.
Bloggers and website owners often do not think about images until it is too late. One day they discover that their website is slow to access and this is losing them visitors as the impatient ones click away to a faster site.
It also means that Google, Bing, and Facebook are less likely to show your site in search results because it is slow. Yes, even Facebook has said that it will show posts with links to slow websites less often than posts to fast websites.
There are many factors that affect the speed of a website, but large images is often the worst problem. It is also the easiest for non-technical people to fix. Get your images right and you will see an immediate improvement in site speed and therefore better ranking on Google and Bing, and greater visibility on Facebook and other sites.
Image file formats for the web
There are dozens of image file formats, but few of them are suitable for use on the web. You cannot include Photoshop files in a web page for example.
Images must be saved as one of a small number of file formats. In fact, nearly all images are one of three types: .jpg, .png and .gif. A few others are supported, but you will rarely need them and these three are the ones you should use.
PNG vs GIF image file formats
The .gif format was invented back in the 1980s as a way to store images as compactly as possible. In the early days of online services and the internet, images needed to be very small because internet access was very slow. If you think it is bad today, it was a thousand times worse back then.
Unfortunately, there were legal problems and arguments over ownership of the .gif file format and so the .png file format was created as an alternative. It is actually better because it supports more colours and often compresses files more compactly so they are smaller. It is therefore preferable to use .png files instead of .gif files because the smaller size makes web pages load a tiny bit faster.
An image stored as a .png or .gif file can be very small indeed, which means fast loading web pages, but sometimes the files are bigger and it depends on the subject as we will see later.
A limitation of .gif images is that they can contain a maximum of 256 colours. We see the world in millions of colours, so reducing them to 256 for a .gif can cause visual quality problems. However, sometimes an image does not contain many colours or the eye can be fooled so you don’t notice. We will see an example of this later.
The .png file format allows for both 256 colours and millions of colours. It’s your choice and sometimes one is better than the other Just remember that when creating images, choose .png instead of .gif.
JPEG file format for web images
The JPEG or .jpg file format is the most commonly used type on the web. This is because it can produce good quality, compact images that download and display quickly, which is perfect for web pages.
However, .jpg images can be very large and consequently download very slowly if care is not taken when preparing them.
Photos taken on a phone or digital camera are designed to be as big as possible because people might need to print them. Sometimes photographers print digital photos on A4 paper or even bigger. You need a very high resolution image with a large file size to print on a poster.
Phones are digital cameras are optimised for print and not for the web. If you simply post photos straight to your site or blog from these devices you website will be extremely slow because they just aren’t designed to be used that way.
Photos from your phone, digital camera and stock photo services, must be optimised for the web before you upload them to your blog or website. It is possible to fix bad images afterwards using plugins like Smush Image Compression and Optimisation, but it is better to get it right from the start rather.
The JPEG file format is best for most, but not all images. It also needs to be used with care otherwise you will ruin your website performance. Use .jpg for most images, but prepare them carefully and don’t post them unaltered from your camera or phone.
The effects of JPEG compression
When saving a .jpg image, the photo editor always gives you a choice of quality/compression. This is often by means of a slider that goes from zero to 100. It affects both the image size and quality.
I use GIMP for preparing images for the web, but most photo editors have similar features. However, GIMP is free and is fine for most tasks.
Here is an image with zero quality. The file size is 8k, but the quality is awful.
Here is the same image with 100 quality. The file size is 213k, but it’s pin sharp.
Somewhere between 0 and 100 is a good compromise between size and quality:
The quality setting of 60 produces an image that is almost as good as the 100 quality setting, but is only 33k instead of 213k. Set the minimum quality that is acceptable to minimise the size of the file. The smaller the file, the faster your website will be.
The original photo was taken on a phone and is 1,730k. It was far too big for this web page, both in pixels and in file size. It was reduced to 550 pixels wide using GIMP, which is close to the maximum size of an image that will fit on this page.
Should you save as JPEG or PNG?
The choice of file format for images posted on your website is between .jpg and .png. The one you should use depends on the the image content and .jpg is best for one type of image and .png is best for another type.
With experience you can sometimes see which the best format for an image will be, but often you have to try both and see which is best or smallest.
An image saved as a .png file are sometimes bigger and sometimes smaller than .jpg images, but they are always sharper. Photographs with fine detail are best saved as .jpg, but images drawn using an art program on the computer are sometimes best saved as .png files.
Look at these three images:
arrow.jpg = 30k
arrow.png = 45k
arrow1.png (256 colours) = 17k
Can you see any difference between them? I can’t, yet the 256 colour .png file is almost half the size of the .jpg and almost a third of the full colour .png file. The last image will download much quicker than the other two, so choosing the right file format and number of colours, can make your website faster.
How to create 256-colour PNG files
How do you create 256-colour .png images? Just select Image, Mode, Indexed on the menu in GIMP. (You should also select Image, Flatten Image when saving .png files which merges all layers into one.)
It might seem like there is a lot to take in and it may sound confusing and a lot of work at first. When you get used to it, it is not hard to optimise images for speed and quality.
Sometimes you can tell what the best file format will be when you come to save an image, but if not, export as a .jpg file. export again as a .png file, select Image, Mode, Indexed and export as 256 colour .png. It’s maybe 30 seconds work, then you can select the smallest or best image and delete the other two.
