When you stick an image on a website it should just work right? Sometimes it doesn’t. Have you noticed that sometimes you add an image to a site and in the browser it is just not the right size, or takes way too long to download? Well, digital images have some hidden traits that should be taken into account when adding them to websites. In this blog post I will cover image dimensions, file types, how browsers handle images, and offer some online resources for getting your images under control.
Dimensions
When someone asks you to make an image file smaller, what exactly are they talking about? Files can be measured in many different ways and that can sometimes cause confusion when talking about image size. It’s important to understand all the different ways you can measure how ‘large’ a digital image is.
Image resolution
Digital images are like mosaics made of very tiny colored tiles called pixels. The smaller those tiles are, the more you can fit into a particular area. This pixel density is also known as image resolution. The ‘particular area’ that people use to measure image resolution is a square inch. When pixels get smaller, the more pixels you can smoosh into a square inch and therefore the higher the image resolution is. As you might imagine, when the pixels are smaller, the overall picture is sharper and is more detailed. Something that might not be so obvious is that image resolution is used not only for image files, but also computer monitors. The pixels on a computer monitor are clusters of tiny red, green, and blue lights. And while you can change the resolution of an image, you cannot change the density of tiny lights in your monitor. Typically monitor resolution is 72 tiny clusters of lights per inch. So while images meant to be printed need to have high pixel density to match traditional photography, images meant for screen need only be 72 pixels per inch (ppi).
Dimensions (width and height)
So since the pixel density of images on the screen is fixed at 72 ppi, measuring the width and height in inches doesn’t make very much sense; you would be constantly multiplying by 72. Instead, measurements on computer screens are done in pixels. Typically websites are 960 pixels wide, so images meant for websites are going to be less than that.
File ‘weight’
So while digital images can be measured in height and width, just like a physical picture, they have another aspect due to the fact that they are stored data. The amount of space needed to store the image is referred to as file size. Images tend to be larger than word files and PDFs, but not quite as large as sound or movie files. Each pixel takes up a certain amount of space, so it makes sense that the gross number of pixels has a direct effect on the total size of the file. For example a 1-inch square image at 72 ppi is far smaller than a 1-inch square image at 300 ppi. This is why images at print resolution are too ‘big’ for the screen. If you make sure that your images for the web are 72ppi and that they are the appropriate dimensions for the target location, the file size should take care of itself. You can check this yourself, however. Image files for the web should certainly never be more than 1MB.
Compression
Besides bringing the resolution of an image down to 72 ppi, there are other ways to make an image’s file size smaller. This is called ‘compression.’ Compression techniques usually look for wasted information and remove it from the file. The level of compression is sometimes a trade off for image quality. For instance, JPEG compression will make an image look blurrier and reduce the number of colors in the palette. Some image types have compression that is lossless and will only remove redundant data that does not affect image quality.
File Types
There is more than one way to turn a picture into a bunch of data. That process is called encoding and different methods for encoding have been devised by different groups with different purposes in mind.
JPEG
JPEG is a standard for encoding photographs devised by the Joint Photographic Experts Group. This is a very popular standard for photographic images but because of its method for compressing it is not ideal for graphic images like logos. Jpegs can have very large file sizes depending on resolution and the level of image compression.
GIF
Graphics Interchange Format is an older format used on the web. It has a limited color palette and so it is better used for logos, or other areas of flat color. GIFs can have transparent pixels, but they are fully transparent and cannot be partially transparent.
PNG
The Portable Network Graphics format was created to replace the patented GIF format. PNGs have a larger palette then GIF, but are still better suited to graphics than to photographic images. PNGs are also capable of many levels of transparency.
How Browsers Handle Images
Now that we’ve covered some of the aspects of images themselves, there are a few things you should know about how browsers handle digital images.
The image tag
The image tag is a line of code that tells the browser that it needs to fetch an image file and place it in the web page. The code will at the very least specify where the image file is located. It can also specify how big to display it, include a short description, and determine how the image should be aligned.
Resizing with attributes
“Specify how big the image is” you ask? No, not exactly. You are specifying the size that the web browser will display the image and does not actually do anything to the image file itself. While this can be used to force large images into small spaces, this is not recommended. The problem is that the browser will still download the whole image before displaying it and this causes the page to download slowly. Specifying an image’s display size is helpful however for a couple reasons. First, it allows the browser to leave the correct amount of space for the image so the layout doesn’t ‘jump’ once the image is loaded and second; specifying a width in percentage (100% for example) ensures an image will always be proportional to its container.
Free Resources to Resize Images
Okay, so you have this uncompressed image that is something like 3000 pixels wide because the photographer wanted to make sure it looked okay if it was printed. All those pixels mean this picture is 5 MB – far too large to upload to your site. What should you do? Here are some online tools to size your image for the web.
- http://www.resizr.com/ – This site will let you set your images dimensions, rotate the image, and even convert it to a different image type.
- http://www.webresizer.com – This site has a side-by-side comparison with your original image so you can see the result of your changes and tells you how big the resulting file will be.
- http://www.smushit.com/ysmush.it/ – Smush it only compresses files. This is most effective for PNG and GIF formats.
Now go. Wrangle your Images.
Having a better understanding of digital images should now help you gain more control over your web site. It means that your users will not have to wait so long for the images on your site to load, that your layout will not break because the images are too wide, and that you can save server space by having more compact files.
