Articles - SEO and UXO guide contents - Next: links Images and multimedia Some pictures are there to inform – like pictures of your products or premises – and others are there to decorate. A problem arises if the file sizes of the images are so large that the visitor has moved on before the pictures have finished loading. The challenge is to keep the file size small while retaining quality at the desired image dimensions. To optimise images, you will need access to image editing software. Things haven't been made any easier for website owners and designers with mobile devices and high resolution displays. In some cases it may be necessary to deliver different pictures according to the device on which the page is being browsed/ What follows are mostly UXO issues. Make sure your images pull their weight Part of the image optimisation process is choosing which pictures are actually likely to contribute to visitors’ purchasing decisions. All images should have to justify their existence on the page. In the design process, pictures often get lobbed onto a page to see what they look like, but that doesn’t mean that they should end up in the finished edition. Frequently images can be compressed with no visible deterioration During the website design process, image optimisation can get overlooked. But quite dramatic shrinking of file sizes can be achieved. Check your all your image sizes: go to your images folder and view the sizes through either the Windows Explorer Details view or a Mac’s List view. Sort them by size descending and, starting with the largest, have a go at compressing them using image editing software. To see the file size of an individual image on a web page: using Internet Explorer right-click on an image, then left-click on Properties; or with Firefox right-click on an image and left-click View Image Info. Make sure your image dimensions in the code match actual dimensions of the images It’s sub-optimal if image files have different actual dimensions to those specified in the code. When a website is designed, frequent changes may be made to the dimensions of images. What should happen is that at the end of the process, the image is set to the correct dimensions using image editing software. If the dimensions in the image tag <img> in the code do not match the actual image size, the browser will be called upon to rescale the image. This can result in inefficiencies in download time, possibly a poor quality image and even the wrong image aspect ratio (width to height). Think about mobile users when you add large images or animations to a page It’s very tempting to make a website more attractive with animations on the page – and some designers just love to indulge themselves. We don’t want to be killjoys and sometimes it is really the right thing to do because animations and large images can be very effective at achieving high information density in certain circumstances, but have a thought for: mobile users who may have limited bandwidth (at the moment at least) and/or may be paying by the megabyte for their data – you need to keep the file sizes as small as possible; virtual office users – these people work on a remote computer across the internet and frequently don’t have the bandwidth to show animations smoothly; download speeds for normal users – if a user is only going to spend three or four seconds on a page while they work out where to go next, your fabulous animation may be more of an irritant than a help. Check how your website performs at the lower download speeds at www.dallaway.com/sloppy/. iPhones and iPads do not play Flash or Silverlight files Adobe have stopped development on the Flash Player for mobile devices. As a result of this move, it’s likely that web designers will accelerate their move to HTML5. Although Flash won’t be going away overnight for non-mobile browsers, the clock is ticking. If you do want to use Flash and Silverlight anyway, make sure that the static jpeg image alternative is sensible so that the user doesn’t just see an empty box indicating a broken link. Direct links to images are a wasted opportunity An SEO issue: there may be times when it seems convenient to link directly to an image: an ‘enlarge image’ link being a case in point. However it’s always better to put these images within their own pages and then you get the opportunity to benefit from additional titles, descriptions and content within your website. In general, use jpegs for photographs and gifs for flat colours such as logos and banners Both jpegs and gifs use compression mechanisms to reduce the file size, but in slightly different ways. When optimising a jpeg photograph, one method is to move the quality slider in the editing software lower and lower until the image starts to look visibly worse, perhaps with artefacts appearing on contrasty edges, and then row back a bit. Gifs use a palette of up to 256 colours and a process called quantisation is used to select this palette. With flat colour images, sometimes only a handful of colours needs to be used. Gifs have the advantage over jpegs in that they can allow for transparent regions, though watch out for the ‘halo’ effect – you’ll know it when you see it. The third alternative web image format is png (usually pronounced ping). This combines the features of jpegs and gifs and, like gifs, can handle transparency. There are two flavours: png-8 and png-24. The numbers correspond to the number of ‘bits’ and therefore the number of colours they can handle. The big problem with pngs is that the file sizes are usually greater than their jpeg or gif counterparts, but every now and again they are the business. Top - Contents - Next: links Tweet 2024 © Caz Limited