Skip to content
On this page

Graphic file formats for web apps

You should know from your previous study about vector and pixel graphics and what distinguishes them. Then you also know, that there is a lot of different type file formats, like JPG, TIFF, PSD, PDF, SVG, EPS, RAW and so on. But not all the formats are suitable for web developement.

Here we will focus on the file formats, you can use in web developement ie what work in browsers.

Quick reminder

  • Raster (aka Pixel or Bitmap) graphics is made of pixels - tiny squares that have a certain color (and sometimes transparency). Like digital photos from your phone, for example. It is hard to enlarge pixel images, because we just do not have the data.
  • Vector graphics is drawn with mathematic point coordinates, curves and equations, which can be recalculated each time. Thats's why vector graphics can be easily resized or even manipulated in real time.

Read this if you need more information.

NOTE: canvas

Should we mention <canvas> here as an option to show and manipulate raster images on browser?

NOTE: video

Where are we talking about <video>?

Exporting graphic assets

Raster graphic formats

JPEG XL, JPEG XR etc formats should be considered to cover later, when/if wider browser support becomes available

Vector format (SVG)

There are a bunch of different raster formats for web, but only one vector - the SVG


There is only one link, so you may think that there isn't much to talk about. But wait, just click and see!


As you can read from this article, these are the basic rules, which format to choose:

  • Use SVG for logos/icons/illustrations etc or anything you want to animate
  • Use WEBP for everything else with either JPG or PNG as a fallback
  • Use JPEG for Photos (as a fallback for webp)
  • Use PNG for logos/illustrations etc when no SVG is available (as a fallback for webp)