Blog:

5 Website Image Basics You Need To Fix Now!

Great images make great websites. They can set the mood on the home page (banners and slides), deliver information concisely (infographics), and show off your products (photographs).

If a customer can’t come into your shop and physically touch your product, you best make sure they can see some good pictures that will let them know what they are buying.

Some people can be daunted when working with images for their website, but some basic editing skills can be useful to your business. It doesn’t mean you have to spend loads of money on the latest version of Adobe Photoshop either. On the other hand, badly displayed or missing images can put people off:

  • customers won’t wait if your pages take a long time to load
  • you use up your own bandwidth delivering images bigger than they need to be, and storage on your hosting, which can cost you money
  • older browser-resized images can often look stretched or glitchy resulting in a poor user experience
  • missing images lose your chance to get content to the reader
  • in some cases, your Google shopping feed may be disapproved

If you want to run your online shop successfully, you’re going to have to roll your sleeves up and learn the basics of image resizing and optimising.

Resize those images (image dimension)

Giant images can be a killer. They can at best look untidy and at worst break your design. Either way, delivering them will increase your bandwidth charges dramatically, and your hosting costs if you have loads of them.

So the first thing you need to do is make sure they aren’t bigger than they need to be. Many online solutions like WordPress or Shopify can resize them when you upload which makes it quick and easy for you, but is there any point in the 2500×2000 pixel 300dpi source image you took straight off your digital camera – if the biggest it’s ever going to be displayed is the resized version at 640×480? Over time, such big images can add up to a storage headache too.

On offline platforms like SellerDeck, it’s all down to you so it is even more important you work with your designers to decide what sizes you need your images to be, and make sure all your files conform to that system. Nothing will break a nice neatly designed grid layout quicker than a thumbnail twice as tall as all the others!

No watermarks

If you want your Google Shopping feed to be approved you’ll need to steer clear of product images that have promotional text (eg “Buy Me!”), branding or watermarks on them.

If you think you are protecting your images from theft by watermarking them, you’d be mistaken. People will steal your images if they really want to and crop or Photoshop your watermark out regardless of any image modification or right-click disabling (don’t do that either!), so image protection tends to become a nuisance to your customers rather than a deterrent to the image bandits out there. The best thing to do is have a clearly marked copyright notice (provided you own the copyright to all the images).

If you must have watermarked images, make sure that you have a clean copy stored somewhere on your hosting that you can use in your feed. You can see the Google Shopping feed specification rules here.

Optimise images (image filesize)

Once you have the images at the size you want, there’s the other “size” to think about: filesize. Optimising can save your bandwidth – each time an image is downloaded you use up that amount of your hosting bandwidth so if an image is 1Mb you’ll use it up a lot more quickly than if you have it down at 10kb. It’s also the main thing we find to fix when running PageSpeed Insights checks on customer websites.

When saving an image for the web, especially if it is sourced from a digital camera, you MUST make sure you convert the image to ensure it is only using 72dpi (dots per inch) rather than 300dpi or greater.
This single change can often reduce the image filesize by a factor of 5 or 10!

Make sure you are using the correct file type: use .gif for animations, .jpeg/.jpg for photographs, large complex colourful images or textures (especially gradients) and .png for everything else, and be careful with transparency if you don’t really need it. Good editing software like Photoshop or Fireworks will let you preview the output in each format to help you choose, as well as the projected filesize. Jpegs should be lower than 90% quality and most can be resized down to about 70-75% quality without a noticeable drop in the quality of the image.

There’s a great site called tinypng.com that you can use to whizz through any images you have and make them leaner in size, even after optimising in Photoshop. It’s especially good for transparent images.

No spaces in filenames

Another rule that has a bearing on Google Shopping but is general good practice, is avoiding the use of spaces and other symbols in your image file names. This applies to all files, but we see a lot with SellerDeck sites where the files are stored and just added in from the local hard drive. Once they are on the web, the file system is not quite as friendly as your Windows machine, so you should think of your image filename like a web URL: keep names lowercase and replace spaces or any other funny characters with hyphens or underscores (we like hyphens). Try and think of a naming convention and stick to it.

So “My Giant Holiday Photo(3).jpg” (which would end up on your site as My%20Giant%20Holiday%20Photo%283%29.jpg)

could become:

holiday-3.jpg
thumb-holiday-3.jpg (for a smaller thumbnail size)

There is less chance of your images going missing this way and it makes them easier to find online and offline too. Notes on filename best practice can be found on the Apple website.

Alt text

Once you have the images all ready for use in your website, make sure that your website displays the image with Alt text once you get them in there. Alt text has three main functions:

  • Screen readers use if for the visually impaired to describe the content of the image. You can see how it would be especially vital if your image was a button or a call to action to know that a click was expected.
  • Browsers display alt text instead of the image if the user has chosen not to view images or if the image has not yet loaded on to the page.
  • Search engines also read it to discover the content of the page.

In practice this means that your image code will look something like:

<img src="holiday-3.jpg" alt="A Caribbean sunset" />

Some browsers will display it as a tool tip (little yellow popup) when you hover over it.

Make sure that your website templates use Alt text on any images where extra information could be valuable to users, such as logos, buttons, graphic telephone numbers or product photographs.

Follow all of these rules and you are well on your way to having a well optimised, well organised and faster website.

About Rory

Rory has been designing websites for over 16 years and can often be found working for teclan on responsive web design projects using the latest mobile-first HTML5 and CSS technologies. Usually whilst eating a biscuit.

Tags: ,