When you upload photos to your website using a CMS system there are certain things you need to do first to ensure you don’t slow down your website.
So you have a content management system on your website and you can add text and photos whenever you wish! Fantastic… the search engines will love you if you add information frequently to your site. They’ll love you far more than those sites which site there, month after month unchanged. Up the rankings your website will climb!
But, a word of caution! All those lovely photos of your products that you are going to upload… you do know the 5 top tips for ensuring they display correctly don’t you? If not, you could be slowing your site (and the search engines don’t like slow websites… back down the ranking they will send you!). You may also find that some images do not display and that doesn’t look very professional!
5 Top tips for optimising images for the web:
1. Did you know that bitmap and tiff files are not suitable for the web?
Make sure that your images are either.jpg, .png or .png files.
A .png is good for when there is a large area of flat colour on the image, such as with an illustration or maybe a logo.
A .png tends to create a larger file size, but is excellent where you require a transparent background.
2. You should resize your image before you upload it.
This image is 200 pixels by 150 pixels at 72dpi
Never upload an image straight from your camera! Although many CMS websites allow you to place an image on the page, highlight it and drag from the corner to make it smaller (as you can in a word processing programme such as Word), the fact is that your web page is still having to load a large photo, even though it is displaying it smaller. Big files take longer to load, and the search engines take into account the load times for your website pages when they rank you.
You should open your image in an image editing programme such as Photoshop and resize it to the size you’d like it to appear on the page.
If you do not have Photoshop, never fear… there is a free programme called The Gimp which you can download, which has all the facilities you will need. Download The Gimp here.
If learning the Gimp is too time consuming, there are online resize and optimiser tools such as PicResize. Trying playing with PicResize here.
So how big should your image be?
There are two considerations here. First the resolution or dpi (dots per inch). For print you want images which have lots of dots per inch, typically they would be 300dpi and you may find that your camera creates images at this resolution. On the web you do not need an image to be more 72dpi.
This image is 450 pixels by 388 pixels at 72 dpi. The file size is 65k.
Secondly the physical dimension of the picture
If you are a novice, it might be difficult to judge the size your image should be. If you already have images on the site, you can see what size they are by right-clicking on the image and choosing “view image”. This shows the picture separately and in the blue title bar at the top of your screen you will see the file name and the image dimensions in pixels.
Ideally no image should be larger than 600 pixels wide or 500 pixels tall. This will allow them to display fully even on a smaller screen.
3. Run the image through an optimiser.
A programme such as Photoshop allows you to “Save for Web and Devices”. If you save your image this way, you will see that the image is compressed to make the file size as small as possible. You will be given several options. Choose the compromise between the smallest file size and the best image quality. With broadband speeds increasing, it is no longer necessary to compress files as much as previously. A file of around 100K is absolutely fine.
The Gimp has an optimiser, but if you have the image at the right size, but just wish to optimise it, you may use an online optimiser . Try an online image optimiser here.
4. Create a web- safe file name
When saving a file for the web you should ensure that you give it a name in all lower-case letters. You should also make sure that there are no spaces in the name as some browsers fall over at a space and don’t display the photos. Just because you can see it on your screen, does not mean that all your visitors, using a variety of different browsers, will see it. If you wish to separate words in a file name, use a dash or an underscore. EG my_image_name.jpg.
NB: Never use other punctuation in the file name such as / \ : ! @ # $ % ^ < > , [ ] { } & * ( ) + =.
This top tip also applies to file names for pdfs.
5. Choose a file name containing key words and complete the alt tag
The search engines cannot “see” images. They rely on the image file name and the alt tag to work out what the image shows. This means that if you are uploading a picture of your hand-made pearl bracelet and upload a picture with a file name of img_0235.jpg, the search engines will not know what the image shows.
It is really important that you tell the search engines as much as you can about your products, so they need to know everything that is on the page. Much better to make the file name descriptive – pearl-bracelet.jpg for example. However, do not make the file name too long or some browsers will not show them.
You should also fill in the alt tag or description option when uploading the image. You might put “Hand made, freshwater pearl bracelet” as your alt or description tag. This, combined with a great description of the product on the page (you do write nice long product descriptions don’t you!!) will tell the search engines that you have plenty of information about pearl bracelets on your website and so they will serve your web page up in response to a search for, guess what…”pearl bracelets!
