In our experience, the most common image challenges are:

• Slow loading (on individual images or the whole site)
• Incorrect cropping or resizing
• Blurriness, pixelation or distortion

At the bottom of this post we have included a glossary that explains technical terms that we will use in the rest of the article.

Choose the Right Image Format

It may be overwhelming, or difficult to remember, but picking the right format for your images is the most important thing you can do to alleviate image problems on your website. The first trap you must avoid is sticking with a favorite image file format: you will need to use different formats based on use case for each image. By picking the right image format you will be able to avoid issues with image quality, as well as their loading speed.

JPEG

Probably the best known image format, JPEG is the ideal format for photography. The key characteristic of JPEG is the ability to significantly reduce file size by using lossy compression. The higher the compression, the lower the image quality. If you cannot have loss of quality in an image you must choose a different image format instead of setting the quality to the maximum. In general setting the quality level to 85 (in Photoshop this is equivalent to level 8 or 9 out of 12) works very well, and provides substantial compression of about 80%.

JPEG is, in general, not a good file format to use for images containing text, illustrations, diagrams, logos, icons and other visual elements that require very sharp edges and angles. This is because JPEG compression relies on smoothing and spreading the image details in a way that works well in photography, but make sharp borders blurry or dusty.

Example of logo in JPEG format.
Note the blurry borders and "dust" in the white area

PNG

Many users default to using PNG in all their images for two reasons: first, there is no degradation in quality because it uses lossless compression, and second, it allows for opacity control (alpha channel).

The one drawback of PNG is file size, and using PNG for photography is not a good idea, especially for large images.

Until recently PNG was the preferred option for logos, icons, and other types of illustrations. However, SVG images, and font icons are quickly taking over as the best option for that use case.

In the following example you can see a PNG image of balloons with transparency. Use your mouse or finger to drag the balloons around and see how the background is visible through the transparent and semi-transparent parts of the balloon image.

SVG

Unlike JPEG and PNG which are bitmap image formats, SVG a vector image format. It is the first of its kind to be widely supported in web browsers. SVG images are ideal for logos, icons, charts, and illustrations.

Since SVG store coordinates for the shapes they contain, they have a few special characteristics: they are usually very small in size, the size in which they are displayed doesn't affect file size, and can be displayed on any size without loss of quality.

SVGs are not easily manipulated, you will probably need a graphic designer to produce SVGs for your website. They can only be created and edited in specialized vector images programs, and it is not easy and most times not possible to convert images from bitmap formats to vector formats.

PNG:
SVG:

Here you can see a comparison of PNG and SVG formats.
Note how SVG doesn't lose quality as it is stretched to 225x the original size.

GIF

GIF is an image format that was created for the web: compact, allows for a custom color palette up to 256 colors, transparent pixels, and basic animation.

GIF is one of the oldest image formats. It had a glorious past during the 90s when it was used as the preferred image format in almost every website, you can check it here: http://www.dpgraph.com/. For some time, GIF usage dropped, with JPEG offering much better image quality, PNG offering opacity, and Flash offering sophisticated animations.

Recently GIF is having a comeback as a very practical format for short animations and pseudo-videos, that can be easily used in emails, social media and websites alike. However, you probably won't need GIF images in your website.

Example of an animated GIF

Font Icons

For a few years now, font icons have provided a practical workaround to add vector icons to websites. You may remember the Webdings and Wingdings fonts on your computer - the idea is to use a font that would render symbols instead of letters. This approach was developed as custom fonts became supported by browsers before SVG images.

Font icons have a few disadvantages: they can only render a single color, you normally need to load a complete library of icons even if you only need a handful of them, and they require additional HTML and content that may have adverse effect computer readers used by search engines and visitors with disabilities or impairments.

For those reasons, font icons aren't ideal and if you are currently using font icons in your website, you should start looking into phasing them out, in favor of SVG images.

Among the most popular collections are Font Awesome, IcoMoon, ionicons, Map Icons, TypIcons, and Weather Icons.

Here are some examples of random font icons in random colors:

Special Mention: WebP

WebP is a more recent image format, currently developed by Google. Its main goal is to combine the benefits of JPEG, PNG and GIF in a single image format, and at the same time provide more compression without affecting quality. At the time of writing, WebP is supported by Chrome and Opera. Firefox has announced plans to support it in the near future, and Apple has included support for it in Safari beta versions.

Google and Facebook have started converting images to WebP format and delivering them when visitors are using a browser that supports the format. In general website owners have an incentive to move to WebP because it can reduce image file size by about 30%, reducing bandwidth costs and increasing page load performance.

You can take advantage of WebP on your website today by installing ModPagespeed in your web server. It automatically converts images to WebP format for users of supported browsers.

Prevent Blurry Images

Blurry images are commonly caused because the image file has smaller dimensions than the size in which the image is displayed, forcing the browser to stretch the image (as shown in the PNG example above). You may have noticed that website images look blurry more often in your smartphone than in your desktop, or that the same image that looks perfect on your desktop looks blurry on your phone. This is a consequence of inadequate images used in high-pixel density displays.

Because mobile devices are used in close proximity to your face, most mobile devices feature high-pixel density displays that provide sharp images and smooth text for screens. In these screens a pixel is displayed using more than a dot in the screen (e.g. 2x2 dots). Because of that feature, a screen that is 320 pixels wide is really displaying 640 dots. If you load an image that 320 pixels wide, it will be stretched to double its size to be rendered by the screen.

You need to think "double resolution" - for whatever size you will be displaying on mobile devices, you should produce images that are double the size. For example, if you need a head shot image to be 300x300, you must produce at least a 600x600 image to ensure that it looks sharp on mobile. Fortunately, you may not need to produce separate image files for desktop and mobile: the same headshot image that you produce at 600x600 will probably fit perfectly on your desktop site.

Cropping and Resizing

Without proper planning, managing images for large sites can become a nightmare. Here are some general guidelines that you can follow to make your work more efficient.

During the design of your website, use standard image aspect ratios whenever possible. Most consumer screens and cameras operate between 4:3 (more square) and 16:9 (more rectangular) aspect ratios. Design your site so that most of your images fit within those dimensions. This will make it easier to crop, resize and fit images into your pages.

You may still need images outside of those ratios. In some cases you may need square images (1:1) for head shots, or very wide banners (5:1) for your design, or tall portrait-orientation images. However you should try to keep the number of different aspect ratios in your website limited. Do you really need both 4:3 and 3:2? How about 16:9 and 2:1? Try to consolidate similar aspect ratios.

Most content management systems will automatically crop and resize images to fit their assigned place in the website design. This is a great tool but it can produce undesired results if the aspect ratio of the original image is very different from the one used in spot where the image is displayed. Below is an example that shows how starting with a typical landscape orientation photo (aspect ratio 4:3) the image is cropped and resized to fit different aspect ratios. You can see that the more dissimilar the target aspect ratio is the face of the girl is crudely cropped. In the 2nd row you can see square and other landscape orientation crops, and in the 3rd row you can see portrait orientation crops.

In order to avoid this kind of issues it is important to know what is the target aspect ratio that the image will be displayed in, and prepare your images before you upload them to the website. Most image editing software apps allow to easily resize and crop image so that you can control how they will look once uploaded. If you don't have any such software in your computer you can use free online tools like PicMonkey.

---

Glossary

Alpha Channel: the alpha channel controls the amount of opacity/transparency that a pixel has. Not all image formats include alpha channel because it increases the amount of data per pixel, and therefore the overall file size.

Aspect Ratio: describes the proportional relationship between an image width and height. It is commonly expressed as two numbers separated by a colon, as in 16:9. For an x:y aspect ratio, no matter how big or small the image is, dividing its width by its height equals to dividing x by y.

Bitmap Image: a file format that represents an image by means of a grid of pixels, each representing a dot of color. Digital cameras capture photos in a bitmap format. A higher resolution (more pixels) produce a more detailed, higher quality image. Reducing the image size means to effectively remove pixels, a process that cannot be reversed. Enlarging bitmap images produce blurry, low-quality results.

Lossless Compression: a type of data compression method in which the original data is preserved in its entirety. Lossless compression usually relies on eliminating redundancy and repetition in the data to reduce the size of files.

Lossy Compression: a type of data compression method in which part of the original data is removed and cannot be restored during expansion. Lossy compression takes advantage of the inability of human senses to perceive every single details of images or sounds by selectively remove data. Normally the change is imperceptible.

Opacity/Transparency: a measure of the amount of light from the background that is allowed to pass through an image. A completely opaque pixel doesn't allow for any background light, showing only its color. A completely transparent pixel allows for all the background light to pass, showing only the background color. Any in-between level of opacity/transparency would mix the background color with the pixel color.

Vector Image: a file format that represents images with a collection of colored shapes: lines, curves and polygons. The file contains the coordinates of each shape, which allows the resulting image to be enlarged and shrunk without losing quality.