Optimizing Images for the Web

Images have been part of the web since almost the very start. While it's easy to put an image online, it's worth considering how to optimize an image for online use.

Images can be adjusted to look small in a browser but still have a huge file size. A single large image can be bigger than the rest of the website, which negatively impacts page load speed and mobile bandwidth.

Optimization of images may be achieved by removing <em>meta information</em>. This is information about the image that is stored in the file in addition to the actual image you care about. This can include information about the camera that took it (if it’s a photo), the program that created it, when it was last edited, rotation information (that isn't honored by web browsers), and even smaller versions of the image. In most cases none of this is needed on a website so it's just additional wasted space.

Adjusting images before uploading them doesn't require Photoshop or other expensive programs. There are free programs for both Windows and Mac will work just fine.

Irfanview is a simple program that is made for viewing, cropping and re-sizing images. For more advanced use it can batch process large number of images at once. Saving options allow you to remove meta information as well. XnView is a viewer, organizer and converter for Windows. Preview is a default option for Mac.

Make sure to check "maintain aspect ratio" when adjusting the size. This will prevent your image from looking squished or stretched. Depending on the program there may be an option for the quality of the re-sizing/scaling. Sometimes it’s as easy as choosing "best". In others you’ll need to choose depending on the type of adjustment and the type of image. When all else fails, try multiple options and go with what looks best.

Note: While it’s beneficial to remove all unnecessary meta information, all images should have an alt tag. The two main reasons for this are for accessibility and search engines crawlers. The alt text should describe the image.