So, we resize the image to a smaller, more manageable size - lets say, 200 pixels by 200 pixels.

Text wrapping will work much better here - but we have encountered another problem. The image now looks very jagged, unlike the smooth image above. Notice how the outlines of circle and triangle on the right are uneven and jagged. It looks even worse when you follow the curves on the part of the Preppermint logo in the bottom left.

This happens because browsers are not good at resizing images. While we made the second image appear only 200x200 pixels, it is actually the same image as before. It would take just as long to download the second image as the first - so you gain no speed in using a large image resized in HTML. Unlike photo editing programs like Photoshop, browsers resize images by throwing away lines that no longer fit. If you shrink an image in half, it would just throw away every other line of the image. Photoshop and other image editing software does much better. They smooth out those lines and create images that look like this:

Notice how much smoother the lines look on the circle and triangle? Notice how the spirals on the Preppermint icon are no longer jagged? Thats because this is a separate image that is actually 200 pixels by 200 pixels - not an image that has been resized down by the browser. In addition - it is less than half of the filesize of the browser resized picture above - 16 KB versus 42 KB - making it load more than twice as fast.

You can create the properly resized image in your image editor - or if you have a content management system or something similar - your webserver could do it automatically for you. Thats how I generated the properly resized version to the left.