Share this Post
mages are great! They’re an important feature of every web page if you want to get your visitors attention and hold it long enough to leave a good impression. They can also play an important part in your search engine optimisation to keep you ahead of the competition. If you’re not careful though, images can make your website painfully slow and turn your visitors off before they’ve even got started. In addition, there are laws in place that you must follow if you don’t want to risk prosecution. Avoid these 7 common pitfalls and your images will improve your visitors’ experience of your website, safely.
- Choose the correct format
- Use the optimum size
- Use a descriptive name
- Assigning width and height
- Complete the alt attribute
- Don’t use images without permission
- Choose the correct format. There are three main formats that we’re interested in when using images in our website, JPG, GIF and PNG. There are others available, but they’re not best suited to using on a website. These formats each have their pros and cons, just like different cars excel in different areas. If you needed to travel from Lands’ End to John O’Groats on £100 of petrol, you wouldn’t choose a Porsche 911. However, if speed was the only factor involved, you may consider it. To briefly summarise our images, each format is best suited to the following. Use JPG when working with a photograph. Use GIF when working with simple images like logos or text and if you want transparency. Use PNG if you are working with simpler graphics, including transparencies and need to reduce the file size without any loss of quality. If you can reduce the colour palette down to just 16 colours it will result in images that have very small file sizes and that load very quickly.
- Use the optimum size. The bigger the image, the bigger the file size and therefore the longer the image will take to download to your users’ device. Therefore, you should always use the smallest image you can. If you’ve taken a picture with your camera or smartphone and downloaded it to your computer, you’ll have seen that these can be thousands of pixels across and be several megapixels in size, depending on your device. This is huge and if you were try to download that over a 3G connection or via a mobile network, it would bring your web page to a grinding halt. If you want to use one of these photographs in your website, use an image editing program or free online service to resize it to the dimensions you want. This will reduce the file size dramatically. You could also consider creating several copies of an image in different sizes so that your users could view a small thumbnail and then click it to view a larger version if they wish to view a higher resolution version.
- Compress. Have you ever tried to squash a suitcase down in order to fasten it shut before you go on holiday? What happens if you just can’t zip it up? Well, you’d have to go through the contents of the suitcase and take out what you considered to be the least important items, in order to free up some space. That’s kind of how image compression works. Using an image editing program, an image can be compressed by removing some of the complex data that is less important to the human eye. However, the more you compress an image, the lower the final quality of the image will be, eventually pixelating badly. When used carefully though, a compressed image can be significantly smaller than the original without any discernible loss of quality. This compression works very well with JPG images and there are now online compression tools for PNG files such as at tinypng.com. Some experimentation will be required in order to find a good balance for each image, but it’s worth the small effort as file size and therefore load times will be cut drastically.
- Use a descriptive name. What’s in a name? Where would we be without names? Our name identifies us, and we identify others by their name too. In the online world of SEO, Google appreciates it if you can name your images descriptively. That means instead of naming your images “image1.jpg”, “image2.jpg” and so on, you should name them “cat.jpg” and “dog.jpg”. If you need to use multiple words as a description, separate the words with hyphens, not underscores. Why does Google care? Google want to understand what each of your web pages are about, so they can serve up the most relevant ones in response to user search terms. It’s in your own interest to help Google with this. By using descriptive names for your images, you’ll be optimising your page for search engines, and that’s got to be a good thing.
- Assigning width and height. When you load a web page in your browser, elements are positioned and the page built up depending on the instructions that are contained within the HTML and the stylesheets. If width and height are assigned to the image, whether that’s directly within the image tag or by CSS then the browser knows how much room to allow for the image, even before it’s been loaded into the page. If these attributes are missing then the user can get a poor experience as the page resizes and repositions elements as it waits for them to load. This is also true if you send emails to customers containing images. Some email programs automatically block images. Not having width and height information results in email clients guessing what they should be and destroying your beautiful layout when they get it wrong. You’ll get much slicker looking web pages and emails if you assign a width and height to every image.
- Complete the alt attribute. We’re now entering the legal arena when discussing our final two pitfalls to avoid. The “alt” attribute is part of the image tag that’s used when adding an image to a web page. Any text in the alt attribute will be displayed to the user if the image cannot be shown for some reason. This information is also used by Google to try and understand what the picture is, so it makes sense to always complete it as it will help your SEO. It is also a legal requirement under the Disability Discrimination Act (DDA). This is because the visually impaired often use what are called screen readers. These are pieces of software that read out information to them in order to help them use a website. Screen readers rely on the information in the alt attribute to tell their users about the pictures on the page. If these are not completed, then the user is missing out and being discriminated against. You need to be very careful as some content management systems (CMS) still leave this empty by default!. You should take the time to check yours.
- Don’t use images without permission. When searching the web for images to use on your website, it can be an absolute minefield. It’s not always clear whether there’s a fee to use the image, and even less information on who and how to pay. Some people resort to using an image and hoping for the best. This is copywright theft and can be very dangerous. There are companies like Getty Images who collect fees for photographers when their images are used. You may suddenly receive a demand for hundreds of pounds if you’re using images without permission. There are plenty of photographers who would be glad of your custom and these are often cheaper than you may expect, so why not use genuine, unique photographs in your website and make a real impact. If you really want free stock photographs, then see our other blog posts for suggestions on where to look.
Share this Post