You will also receive a complementary subscription to the high-content, high-value “Web Impact” e-zine about how to get more value from your business website.
(I will never rent, trade, or sell your information) * = required fieldWant some pictures up on your website or blog? There are some simple things you should keep in mind when putting photos up that will help you avoid overfilling your web server or annoying your visitors with pixilated images or slow downloads.
Images online are a balance of file size versus visible quality and viewable size. Getting the right mix will ensure a good experience for your visitors.
There are a few key concepts which will help you when dealing with digital image files.
Resolution is the term which describes the number of pixels that make up an image file. Generally this is expressed as two numbers – the width and height (“w x h”, like “800 x 600”, which means “800 pixels wide and 600 pixels high”).
You need a much higher resolution image file to get a nice crisp print – like a photograph from film. Keep this in mind when setting the resolution on your digital camera – if you plan to get nice prints (especially blown up larger than a simple 4”x6” snapshot), you should set the camera to take photos at a higher resolution.
Viewed on a computer screen, you need many fewer pixels, since generally a screen will display about 72-96 pixels per each inch on the screen (as opposed to hundreds or thousands of “dots per inch” on a printer). (Don’t get your rulers out against your monitors, though, since other factors determine the actual physical size of things on screen – including the resolution your monitor is set to display.)
If you are talking about images that will be viewed on-screen, such as on a website, you are always talking about pixels. Telling your web designer that you want something to be “2 inches” wide on your website doesn’t really make sense. You would do better to talk about “150 pixels wide” or something like that.
Another simple thing to keep in mind, is that you can always size an image file to a smaller size, with excellent quality, but you can never take a smaller file and upsize it with good quality. This is what caused blurry and pixilated images. Yuck! Just don’t do it. When in doubt, start with a much bigger file and down-size it.
When an image file is served to a visitor (because it is part of a webpage they are looking at), the file size, and their download speed will determine how quickly the image becomes visible. Your aim should be that the image files sent to the web browser are only large enough to be displayed clearly at the size they will be shown, and not any larger.
The first thing to consider is what the purpose of the image is on your site: Is it just to add some interest to a page of text? Is it a photo of a product you are selling? Is it an example of your work, such as in a portfolio? Is it a headshot of a client to go along with a testimonial?
The purpose of the image will determine how large or high-quality the image should be. The rule of thumb is this: If the image will help a potential customer decide whether to buy from you or not – it needs to be decently visible and of very good quality. Don’t you hate online shopping sites with tiny, pixilated, or blurry product photos? How can you be sure that you want to purchase if you can’t tell what the fabric texture is, or how something is configured? Don’t make this mistake on your own site. If you have products to display, make sure there is a way for the visitor to click to see a large, crystal-clear image – the amount of detail in your product should indicate exactly how big it should be.
If the purpose of the image is more generally “cosmetic” – to add interest to text, it can be displayed much smaller, without an enlargement option. You should, however, choose images which will be interesting at the size you plan to display it, and feel free to crop them to really focus on the best part.
Even if you have a web developer or assistant updating your site, you do need to know some basics about images to get the best results.
If your site is using some special image handling, such as highly-detailed zooming on product images, follow the file size and resolution instructions of your web developer, otherwise, these general guidelines will help.
If you have photos you need to send to a professional to post on your site, make sure they are cropped the way you want them, and then, unless you have special requirements, resize them to be no more than 600-700px wide before sending them – especially if you are emailing the images. For most website use, you won’t need a file larger than this.
If you use a CMS, you should have an idea about how it handles images – will it automatically resize the file for proper display, or do you need to upload it at exactly the right size? If it will handle the resizing for you, then follow the recommendation of uploading a file no larger than 600-700px wide, since the chance of displaying it any larger is very slim. Otherwise, you will need to know exactly where the image will be used and at what size. You should then resize the image on your computer before uploading it.
Images can add a lot to your website, and preparing them properly will give you the best results – the ideal balance between visible quality and quick download. If you’d like to have a CMS-based website which handles much of the decision-making and resizing for you, check out the services I offer.
