Using the Right File Type

Accessibility for Image/Graphic files

Whenever you use images or graphics, you should always keep accessibility in mind. This done by including alt tags with all images, and defining decorative images. If you are adding text to your image ensure enough contrast to keep the text legible. Any text added to the image should also be included as alt text on the image as we should not convey meaning via image alone. Imagery should always support content on a page.

For more information on alt text, see Image Concepts from WC3

JPEG (.jpg)

JPEG is the ideal image file type for photographs without text, like for large hero images.

Since JPEG was designed for still photos, it doesn’t support transparency or animation.

JPEGs should be used:

  • for photographs without text

PNG (.png)

PNGs preserve the fine detail in images, even when it comes to text. The downside is the PNG file sizes tend to be larger because of all this data.

They also support transparency. Not only can you create a logo file with a transparent background, but you can also create transparency gradient overlay effects and more with PNGs.

PNGs should be used:

  • when adding text over an image, like a hero image. However, the preferred method is to have the html text overlay an image.
  • when you need a logo or icon with a transparent background, however we recommend using an .svg instead if that is available to you

SVG (.svg)

SVGs are technically XML based and can be manipulated and animated with Javascript and CSS. SVGs are also unique because they create vector images. This means the images are infinitely scaleable and look good at all resolutions while being very light- which makes them great at adapting to different devices.

SVGs were designed to display simple images based on geometric shapes, such as logos, graphics and icons. They don’t work well for photography. You can export Adobe Illustrator or .eps files as .svgs.

SVGs should be used:

  • for logos, graphics and icons

PDF (.pdf)

No matter how tempting it is, you should never use a PDF to display content that users need to read online.

PDFs are meant for distributing documents that users will print. They’re optimized for paper sizes, not browser windows or modern device viewports.If you must use a PDF, please read our guidelines on accessible PDF's

PDF's should be used:

  • for documents that users will print