File Sizes of Images
Photoshop Free Online Course

Be sure to understand Monitor Resolutions before working with the visual sizes of images. It is critical to understand that the exact same image will "appear" bigger or smaller to different users depending on their browser settings.

Once you understand how the visual size can be bigger or smaller depending on monitors and resolutions, you're ready to move on to understanding the FILE size issues of the web. For this, you need to understand a little about how websites work. Let's say that you are a photographer and are building a photography website to show the world your gorgeous photos. You pay money to a hosting firm, say EasyCGI, to hold your content and show it to visitors. So you are physically putting your graphic files onto a disk drive at EasyCGI's location. Let's say you have a photo of an Anhinga. Here's a photo I took in the Everglades.

Anhinga

That's a 300 pixel wide image of an Anhinga. Now, if I saved that photo just in standard mode from Photoshop, photoshop would store all sorts of extra information in the physical file it wrote to my hard drive - information that the web ignores. So the actual file would be "big". Let's say the file was 500kb in size. Now I move that file up to my EasyCGI website space, and I put an IMG SRC command in my website to show it to the world.

Every time someome goes to my website and is shown that photo, 500kb of data is being dragged from my EasyCGI hard drive down to that user's computer. That's how they see the image - the image is sent to them over the internet and their browser then displays the results. 500kb can take a while to download, and the user is sitting there twiddling his thumbs while he waits. Maybe he gets impatient and leaves before the image finishes loading. Also, most hosting companies charge you by the amount of "bandwidth" you use up - i.e. the volume of data going back and forth from your website. So if you start having a lot of large filesize images in your EasyCGI account, not only will you fill up your account's allowed disk space quickly, but they will shut you off each month because you have exceeded your allowed bandwidth for that month.

The solution is to make the file sizes of your images as small as possible. This does not mean that the VISUAL SIZE of the image needs to be smaller! It means that you need software that will "squish" the file down into a small size while keeping all of the important information to display it to the user. It's sort of like how PKZIP takes a big Word document and squashes it down into a small file for ease of storage. The entire Word document is still there - it's just squashed into less physical space for moving around. It's like a sponge. You can squash a sponge down into a small size to fit it in your fist - but when you open up your fist the sponge pops back out and is the same as it always was.

In our case, we take the exact same JPG image and squash the *file* size to something small. That way, when the visitor comes to your website and says "I want to see the photo of the Anhinga" - it is only a small 39k file that has to travel from your EasyCGI space down to their computer. It's still a 300 *pixel* image, it's still the same visual size. But because the FILE size is smaller, those 39k of data zoom quickly from your EasyCGI account to the end user's computer. The user sees the end image very quickly, and they are happy. You take up less space in your EasyCGI hard drive and burn through less bandwidth a month, which makes you happy.

Photoshop Free Online Course