Most images used on the web are raster graphics. This graphic type is comprised of pixels, or blocks of color arranged in a grid. If you find a digital photo on your computer and zoom in close, you can see all the tiny blocks arranged to represent the picture. When zoomed out, this arrangement looks very smooth and can represent the real thing pretty well.

Raster graphics help conserve space and allow for faster upload and display times. To do this, they have limited information stored in the file. The dimensions of your image file are the biggest you can display them without the pixels becoming more obvious and ruining the illusion of the image—a condition usually referred to as being “pixelated.” This is why it's important to use caution before shrinking the size of your images. When you decrease your image file's dimensions, pixel information is lost, and you can't make the image larger again.

Let's look at the images below.

The file for the image has been resized and saved at 50px by 50px. Smaller images like this are often used as icons or favicons. (Favicons are the little icons you see in the browser tab next to the page title.) In the example below, the version on the left is displayed at its original size. But look what happens when you try to set the image to a larger size, as shown by the image on the right.

50px × 50px	300px × 300px

If your image files don't have a very high file size, it is often easier to adjust how large your image displays on your webpage using the width and height attributes.

<img src="" alt="" width="" height=""/>

When your browser references an image file to display, it also knows the image's dimensions. Without including a width or height, your image will display at this original size by default. Defining the width or height, however, lets you force how big or small the image displays. For the following examples, let's say the original image size is 200px high by 200px wide.

Image at its original size

<img src="dog.jpg" 
alt="dog wearing glasses" 
width="200px" height="200px"/>

or

<img src="dog.jpg" 
alt="dog wearing glasses"/>

Defining both attributes forces the value for both dimensions, even if it is disproportionate to the original size. But if you define only one attribute and not the other, the image will display at that exact width or height and adjust the value of the other dimension proportionately.

Image forced out of proportion

<img src="dog.jpg" 
alt="dog wearing glasses" 
width="200px" height="75px"/>

Image with one dimension defined, automatically proportioned

<img src="dog.jpg" 
alt="dog wearing glasses"
height="75px"/>

This method lets you set images to the size you need without losing quality in the image file itself. It is the fastest and least risky approach when you want to quickly try out different dimensions to see what looks best to you.

The width and height attributes can contain pixel or percentage based values. The best way to size an image, however, is using CSS. (We'll cover CSS image styling later in this course.) In a pinch though, and if you know the exact size an image should be, using the height and width attributes is an acceptable option.

Modern devices and screens have higher definition, and it's now considered best practice to make sure your image is at least two times its display size. This accounts for devices with retina display, which provides high amounts of detail to images. Abiding by the 2x rule will help ensure that your images aren't pixelated, “fuzzy,” or otherwise unappealing to the viewer and that your work appears as beautiful and professional as possible.