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:

Continue reading