There are 3 components to an image you might use on your website:
- How much space does it take up in your computer or on the server? That’s the file size and it’s measure in kilobytes or megabytes – preferably kilobytes.
- What are the dimensions of the image, measured in pixels? If you have a picture that is 800 pixels high and someone with a very old monitor is looking at it, they probably won’t be able to see all of it because their monitor probably only shows 800 pixels across and 600 pixels from top to bottom. More modern monitors are usually at least 1400 wide by 1050 tall. High-definition, widescreen monitors really throw a kink in the works. Here’s one possible display: 1280 x 720. So, a web page that displayed completely in a monitor set at 1400×1050, will only show the top 72% or so on a widescreen monitor.
- Quality, also called compression. Assuming you are primarily using the jpg format, the higher the quality, the less jagginess you’ll see in an image. There is a price to pay, though. The higher the quality (less jagginess), the bigger the file size. That’s why you should always preview an image. If your image editing software has a “Save as web quality” option, it’s probably fine. But if you aren’t satisifed with it when you look at your website, read your help files to see if you can modify that setting so that “web quality” doesn’t compress the image so much. Jagginess is never associated with or seen on very high end websites.
That’s all for today. There are other image articles here you might learn from, and I do try to say things different ways since we all comprehend the world in slightly different ways. If you’re my client and you still don’t understand, tell me what image editing software you use and I’ll try to give you some personalized help.
Adobe Photoshop Elements is a simplified version of the image editing program that professionals use and has everything the average website owner would ever need.