Web design and development has changed beyond recognition in the last 20 years, but one thing hasn't changed: a picture paints a thousand words. Here are some tips to make sure you make the most of your photos.
How big should my photos be?
Generally speaking, the photos from your digital camera or smartphone will be more than large enough for any contemporary website. Anything more than 1,900 pixels wide will be large enough and in many cases bigger than necessary. Your photos can never really be too large because a large file can be shrunk down without loss of quality. Only small images present a problem. You can almost always tell at a glance when s small image has been enlarged and the more you enlarge it, the uglier it looks.
I thought big photos were bad...
Yes and no. Large photos can make a big visual impact, but be careful about using the word "size". There's the size in pixel dimensions and there's also the file size. And the relationship between image dimensions and image file size isn't as simple as you might think. You can have very large images with relatively small file size as long as they are properly compressed. Compression removes the data that the human eye doesn't require. It's a bit like the difference between CD audio and an MP3 file - you can fit about 75 minutes of "red book" audio on a CD but something like 12 hours of MP3s on the same disc with only a small degradation in audio quality. And it's the same for uncompressed and compressed JPG files.
Doesn't my content management system take care of it all?
If you're used to uploading images to Facebook and Twitter, you'll know that you don't have to mess about with pre-processing your pictures to compress them. The website just magically does it all for you. That's because they don't want to waste bandwidth delivering bloated image files. But most content management systems, such as Wordpress or Opencart, won't automatically optimise your images for you. Wordpress does compress images, but not very much and it's exactly the same for every image you upload (although you can control this with various plugins). So if you upload very large files, you will slow down the website performance and that is harmful to the customer experience and to Google ranking.
So, how do I compress photos?
If you have Photoshop, then you should always save images by using the "Save for web and devices" option so that they are properly optimised to balance high quality and low file size, not the "Save" or "Save us" options. If you don't have Photoshop there are numerous other options. This article is a good place to start but of course if you don't want to get involved in all that, you've always got me!
Anything else I need to know?
While I'm on the subject of image files, you should always save images for the web without spaces in the filename. Use dashes instead. So instead of "my file name.jpg" your files should always be in the format "my-file-name.jpg" and aside from hyphens you should avoid punctuation like brackets, asterisks and especially question marks and ampersands as these are reserved characters in web development.
