Slow loading images
When visiting a website, there is nothing more off putting than having to wait while a page slowly loads. The number one reason this happens? Poorly optimised image files.
Every image on a web page needs to be downloaded from a server in order to view it via a web-browser. If the image files are large, it will naturally take longer for the page to load. Optimised images are a lot smaller and, therefore quicker to load.
Slow websites rank poorly with the major search engines;it is therefore, critical to your business that you adopt the correct optimisation practices.
Understanding just three points will revolutionise the way you populate your website with visual content.
The following tutorial for optimising images for WordPress can be broken down into three sections:
- Image size: The optimal height and width.
- Image type: Colour mode and file-type.
- Image filename: The best practice for naming image files.
What is the best image size for WordPress?
Web images are made up of rows small blocks of colour information called ‘pixels’. DPI (Dots Per Inch) is only relevant for print and not web use.
Whenever you upload an image into WordPress, the image file is duplicated several times and each version is saved at a different size. The following is a typical list of WordPress image sizes in pixels, although this may vary with your active Theme:
- Thumbnail (150 x 150).
- Medium (300 max x 300 max).
- Large (640 max x 640 max).
- Full Size (the original size of the image).
As you can see from the list above, Thumbnail, Medium and Large are automatically image sized, so we don’t need to worry about these. However, the Full Size image may cause issues if it hasn’t been set correctly. If the image is too large, it might not upload at all. We need to ascertain the image’s future usage. The following list shows typical widths in pixels for various operations:
- Complimentary image (an image you would use to ‘colour’ a page): width no greater than 300 pixels wide.
- Diagram or product image (used for closer scrutiny or examination): width no greater than 600 pixels wide.
- Artwork or downloadable resource: There is no limit as such, but I would suggest that you use a thumbnail or medium size image and link through to the full size file for download.
Note: All uploaded media can be found in the /wp-settings/media/ folder in the root folder of your installation of WordPress.
Now that we have looked at the correct optimal image sizes for various tasks, we will examine methods to apply changes to our files. You will need to have an appropriate image editor installed on your computer. I tend to use Adobe Photoshop. However, Photoshop is very expensive. Adobe Photoshop Elements is an excellent application, if the budget is tight. It will do most of the things that its bigger brother will do at a tenth of the cost. You may also want to take a look at the ultimate Photoshop alternative – GIMP. Despite its name, GIMP is very popular and powerful application. Best of all, it is totally free!
For the sake of this tutorial, I will be using both Adobe Photoshop CC and GIMP 2.8
Step 1: Load image
Load up the image you wish to change the size of into your selected image editor.
Step 2: Change the pixel width and height
Adobe Photoshop CC: Click on the ‘Image’ menu item and select ‘Image Size’ from the drop-down. This will bring up the Image Size dialogue box.
GIMP: Click on the ‘Image’ menu item and select ‘Scale Image’ from the drop-down. This will bring up the Scale Image dialogue box.
In either application, type in the appropriate width and height in pixels and then click on OK/Scale.
Note: You will notice a small chain graphic between both sets of sizes. This is a proportional constraint. It must remain active, otherwise you will stretch or squash you image.
Choosing colour mode and file-type for WordPress
This is a very easy step to take in the process of optimisation.
Choosing colour Mode
The most commonly used colour mode for web use is RGB (images made of Red, Green and Blue channels of information). To set the colour mode within Adobe Photoshop or GIMP, do the following:
Adobe Photoshop CC: Click on the ‘Image’ menu item and click on the sub-menu ‘Mode’ from the drop-down. Then choose ‘RGB color’ from the list. This will convert your image to RGB. Save your image (CTRL + SHIFT + S). Continue reading for file-type.
GIMP: Open up your CMYK image and re-save it with GIMP. GIMP automatically converts CMYK images into RGB as it doesn’t handle CYMK images. Export your image to save it (SHIFT + CTRL + E). Continue reading for file-type.
You should now see that the tab above your image denotes that it is an RGB colour image.
Selecting a file-type
There are three acceptable image file-type for using within WordPress. Jpeg, Gif and PNG. Each file-type has it’s pros and cons:
- Pro: Great for photographs.
- Con: Not very good for fine-line artwork or clean graphics such as logos.
- Pro: Can compress a file down typically to achieves 10:1 ratio, but can compress to a much higher degree.
- Neutral: High compression = low quality / small file size.
- Neutral: Low compression = high quality / large file size.
Most images can be saved with about 30-40% jpeg compression. Anything below this may look messy.
- Pro: Great for clean logos and simple graphics.
- Con: Not very good for photographic images.
- Pro: The simpler the image, the smaller the file size.
PNG (24 bit)
- Pro: Will allow for variable levels of opacity/transparency.
- Pro: Good for both graphics and photographic images.
- Con: Large file size, but the only format that allows for true transparency.
If you are using PNG file format, then further optimise each image using tinypng.com. This free service will typically reduce a PNG to 50% the overall file size.
Optimising a file name for SEO
This section involves a little SEO (Search Engine Optimisation) know-how.
The name before the image file extension really matters. Never use something as non-descriptive as ‘untitled-1.jpg’. Instead, label your images properly. If you are writing a blog about WordPress and your image is the WordPress logo, then call it just that. As long as you stay on theme within your posts, then the search engines will recognise this. If you convince the search engines that your are serious about your subject and make it clear what your subject is, then you will be rewarded with plenty of traffic.
Here are my guidelines for naming an image file:
- Include your keywords (most important words and phrases) into the filename of your image.
- Don’t over pack keywords, but be descriptive so that visitors with visual impairment may understand your content.
- Use hypens ‘-‘ to separate each word in your filename.
- Keep your filename short. 2-4 words should be enough.
- Don’t use ‘stop words’, such as ‘the’, ‘and’, ‘a’, ‘is’, etc.
Images are important on any website. However, so is written content. Optimising your images should results in a fast, cleaner site and will use less server space.