Chapter 1: Preparing images for your website
So apart from the need to embed your website with images and banners to show off your glorious offers and unique selling points – You also need to show off your products with crisp imagery.
If you are just starting out, then I assume you will want to save as much money as possible so that you can invest it in the real things like your products and advertising.
So that is why we have put this guide together, to show you some really cool resources that will cost you nothing. Well, we say “nothing” but some of the services we mention come with a Premium upgrade but you can still get want you need doing for free.
Advice on images for the web
Before we begin, we thought we would give you a little advice when it comes to images. Please bear these points in mind when creating or editing your images. This will all make sense after reading through the guide.
The physical size of your images is really important when you upload them to the web and that is for a couple of reasons. Even though we are able to get faster and faster internet speeds at home, at work or even whilst on the move – It does not mean we can be lazy by uploading unnecessarily large files for your own convenience.
Not only that but search engines (such as Google) use the optimisation of your website as part of its algorithm for grading your website. If you visit Google’s Page Speed Insights, you will see when Google gets upset about images that aren’t optimised. A good rule of thumb is to make sure your images are no bigger than 400kb.
So another way of reducing the size of your files is by limiting the dimensions of your image. At Digital Startup, we like to make images no larger than the area they are going to be placed (e.g. a banner). When uploading product images for an eCommerce store, we don’t normally make the product images any larger than 1000×1000 pixels as that size will fit on most screens. The only reason to go larger is if you allow your viewers to zoom in on the image without losing any quality.
Okay, with the tools we will talk about you might not need to worry about this but it is worth talking about.
If you want to to have something professionally printed like a poster, any images you create will be required to be 300DPI (dots per inch).
However, for the web, that is just overkill. For this, you will want to go with exactly 72DPI.
There are tonnes of file formats out there for images, but there are 2 main ones you will constantly come across for the web. There is a science behind the 2 formats that are listed here, but we promise to just give you the bottom line.
PNG files are great if you have added writing to your image, as the quality of the text will still look good under compression.
JPG files are the format of choice if your image contains no text. When these files are compressed, there is a slightly grainy finish to them which appears obvious if any text is embedded in the image but hardly noticeable if it’s a photo or drawing.
Okay, so you have saved your images to the appropriate dimensions, at 72DPI and in the file format of your choice. These are the first steps in preparing your image for the web. Now we want to compress them.
Basically, file compression strips away all of the unused colours in the spectrum resulting in a smaller file size. The more you compress the image, the poorer the quality tends to get. However, there is a point that you can compress an image without seeing any obvious loss in quality. We’ll talk more about this later in the guide.
Finally, name your files appropriately. This seems obvious, but we’ve seen some terrible naming policies and images easily get mislaid in a sea of files.
We recommend that you always use lowercase. Web servers and certain browsers see uppercase and lowercase as 2 separate identities. For example, image.jpg is different to image.JPG. This can lead to the pesky “file not found”.
If your filename contains a space, remove it. So ‘this image.jpg’ should be ‘this-image.jpg’. This makes coding much easier on the eye, as well as the appearance of URLs. So if you upload an image with a space, then the space will be replaced with %20. As an example, ‘this image.jpg’ would show as ‘this%20image.jpg.
For the sake of both disability and search engine optimisation, make sure you always add a descriptive Title and Alt Text when embedding an image on your website. If you have a picture of a lake in Scotland, then give it a Title and Alt Text of ‘Lake in Scotland’.
And last but not least, name your files accordingly. If you sell bottled water, then name your images in an appropriate way such as smartwater-1litre-single.jpg or smartwater-2litre-6-pack.jpg. Not only does this make it easier to find files, but it makes is easier for search engines to find results for image search. Much better than image02324.jpg don’t you think?
You can’t just use any image you find on the internet
There seems to be an endless amount of images that you can find on the internet, and as tempting as it is to just grab any that you fancy, you might be breaking some rules. When finding images on the internet, your results will fall under 3 categories.
The Public Domain Mark is recommended for works that are free of known copyright around the world. So you can take that image then add and remove aspects as you see fit for your own purposes.
Creative commons is a little like Public Domain, but the original owner will normally ask for recognition by getting you to place a reference to the image source under the image.
Stock photos are what you normally end up paying for, and these images come with restrictions of use. So you may not be able to use it for marketing purposes or print it on your products.
Guide was written by the Digital Startup Team