Digital imagery and its manipulation for a purpose is generally quite misunderstood by web users. As a web designer and someone who has dabbled in digital art for years, it's easy to overlook the misconception of what is in an image and how it can potentially effect your website.
Scenario: You've had a new site designed, built, programmed, live and looking a million bucks. It's out there for the world to see. You've just added new photos to the gallery for a recent event the company just ran. But wait…why is it taking so long to load and that image is all distorted?? Suddenly things don't look so good.
Here are some factors to take into account.
The Resolution determines how much detail is in an image. Check the resolution of your files. For the web, you need to ensure your imagery is set to use a resolution of 72dpi (dots per inch).
It could be the difference between a 20kb file and a 2mb file. Computer monitors render what you see in 72dpi, so anything larger is unnecessary and will take longer to load. As an example, most digital cameras will take photos at 300dpi which is a resolution used for printing and has a much larger file size.
For more info on image resolution:
http://en.wikipedia.org/wiki/Image_resolution
The pixel dimension of an image is also an important factor to take into consideration when adding it to a website. You need to make sure the image is re-sized to fit to the space it is needed for. If your image is 2000px wide by 2000px high and the space your trying to fill for example is 300px wide by 200px high, chances are your image will either break the page layout or distort badly. Correct sizing will also help maintain decent loading times for your users.
An image editing program is the best option when resizing imagery. However there are heaps of useful tools available on the net to help you to maintain quality imagery for your website.
About Erin
