One problem a lot of people have with images is usually a result of the image size not being designated. When ever you place an image on a web page, you need to define the width and height of the image instead of letting the page decide. You should also resize the image to the actual size you want it to be displayed as (we'll discuss this later) instead of just defining the image as a smaller size with the code, (resize the image with your image editor). If you can't resize the image and you have to use it as is, make sure the ratio is exact for the new size.

One example of where this issue commonly happens is when a column of the page is set to a width that is smaller than the image. If the image size is not defined, then the image will have a width of what ever the column is and it's normal height, making it look distorted. Even a single pixel alteration can make an image loose its sharpness and appear fuzzy.

Here is an example of how to write the code for an image:

Code:

<img src="images/your-favorite-image.jpg" width="120" height="120" alt="description of your image">

Following this rule will make your images look sharper and it will help your web page load faster since the browser knows the image size and doesn't have to wait until the whole page loads to determine the size.