Common website mistakes #1: Images

picture of a very ugly fish in an elaborate gilded frameI see otherwise well-done amateur websites ruined by a lack of knowledge about images on the web all the time.

Too many people take an image straight out of their digital camera (or an image meant to be sent to a printer at high resolution) that is huge (1000-3000+ pixels wide), upload it directly to their server and insert it into a page as-is, using HTML to shrink the display to only 500 pixels wide, or maybe only 150 pixels wide. When you first realise that browsers can shrink or expand images to any size you like, it seems like a cool trick, and it is. But it’s also a trap. Browser-shrinking very large images creates the following problems:

  • it always looks horrible, with the image distorted and grainy
  • chews through the website’s allocated data storage as more and more are uploaded – when your webhosting plan has 100MB storage and you keep on uploading 5MB images, it doesn’t take long to reach your data storage limit -> increased webhosting costs
  • chews through the website’s allocated monthly data transfer as people access the page (similar to above, can lead to increased web host costs)
  • chews through the internet user’s bandwidth allotted by the ISP (can lead to increased costs to them)
  • worst of all, it slows down the loading of the page, leading to users losing patience and not clicking through to further content
  • And yes, if you are sending huge images straight from the digital camera to other people via email, that creates similar problems.

Solution:


Look at the page, work out what size you want the image to be, resize it to those dimensions, and save the smaller version to your website images folder with a simple descriptive name* (none of this DK4033-x1 numbers that your camera uses).

Then, use your Image Management program’s auto-adjust feature to balance the colours, brightness and contrast and sharpen the image up a bit so that it looks its best at the smaller size. Then you are ready to upload.

There are free Image Managers and Image Manipulation programs out there if your camera didn’t come with custom software that does this for you. Picasa, ImageMagick and GIMP are two very popular such programs, and there are free tutorials online.

Now, you don’t always have to only have a very small image for the page. You can use small images that link to a larger version of the image so that you can show off your images without slowing down the page load time and giving your readers the choice whether to view the larger version.

Many website manager programs have a thumbnail generator as part of their Image Gallery management tools, but if your program doesn’t have this, you can still resize the image to an even smaller version, upload that small image to display on the page, and also upload your larger (but not camera-original size) image that your smaller image can link to for a clearer view.

e.g.

Viv at Dorrigo (overlooking the Coffs Harbour hinterland)

Viv at Dorrigo (overlooking the Coffs Harbour hinterland)

So, if you see what I did there?

Firstly, I named the image with a simple description “viv_at_dorrigo.jpg” and used the underscore character to separate words so that the browser doesn’t insert nonsense characters into the file string when it’s served to the reader’s computer (“viv at dorrigo.jpg” would be rendered as “viv%at%dorrigo.jpg” or even worse).

Secondly, I uploaded an image that was already quite small, and to display it on this page I only used the thumbnail generated by WordPress when I uploaded that image. This means that the loading time for this page is as short as reasonably possible, making my internet users happy!

Thirdly, the slightly smartarse bit – I used a feature called “shadowbox” to display the larger version of the image when people click on it – instead of the default browser behaviour, which is to take them to a new page displaying only the image, the shadowbox effect darkens the page they are already on and opens a pop-up display of the image. This effect works even when you use a picture that resides on another server (e.g. photosharing services like Flickr, Photobucket, Picasa) , which means that you are no longer directing your readers to another site to see the larger version of the image. Shadowbox/Lightbox/Thickbox are all similar effects that require custom code added to your website either in the base code or via a plugin.

What I didn’t do: I did NOT just upload a huge image, let WordPress generate the thumbnail so that this page loaded quickly, yet still have that huge image load in the shadowbox. That’s because the shadowbox still uses site and user bandwidth to display the image, so page load for the shadowbox would take forever for a very large image, and the very large image would be too large for the browser, which would default to resizing it to fit, so it would still look horrible (as well as using up valuable data storage capacity).

So don’t do that, OK? Resize your images and display them so that pageload times are minimised and your site looks slick. Also, don’t always go for the .jpg option – other formats are often better, depending upon the type of image.

* simple descriptive names for images are good for Search Engine Optimisation (SEO) – they help search engines index your page accurately according to your content. The more descriptive caption, which in WordPress is also used as the image’s ALT tag for search engines, is also good SEO practise.

This article was originally published at my portfolio site, which I no longer wish to use as a blog.

ADDENDUM: The absolute best way to serve photos online is to use one of the specialist photosharing websites out there to host your images, and then embed images/galleries on your website. This is best because once you’ve uploaded the website to a photosharing site, they generate thumbnail and web-sized images automatically, and provide the embed codes for you – you don’t have to do it all by hand. Check out my Galleries pages for ways in which this can be done from a variety of sharing services.

One thought on “Common website mistakes #1: Images

  1. I’d never really noticed this much before, but today I went to look at WisCon details for this year, and the header just hit me – obviously an over-compressed jpeg, which makes an otherwise great image look really bad.

    I’m going to send them an email about it.

Leave a Reply

Your email address will not be published. Required fields are marked *