JPEG, PNG, and Other File Format Terms for the Web

“Don’t laugh at me…” an ArcStone alum said to me after she had parked her car and we started walking towards Potbelly’s for lunch. “But, I didn’t know what JPEG was until recently.” Completely disregarding the preface to her confession, I burst out laughing in an unnecessarily dramatic way.

“I said don’t laugh at me!” she yelled.

Even though I had jokingly laughed at my friend, it was kind of a user-experience lesson about assuming that people know what you know. Especially when it comes to industry-related words and phrases. Since knowing specific file formats was not relevant to my friend’s job, she had no real need to know a JPEG versus a PNG. Since I often had to work with these file formats, it was important for me to know which one to use when it comes to the content and user-experience of websites.

There are a lot of different image file formats, and each of them are best suited for a variety of final products. For example, TIFF is often used in the printing industry because it doesn’t compress the data and maintains the quality and detail of images.

The image file formats that are often used for websites are JPEG and PNG. But, if you’re working with web designers, other formats like EPS or SVG for logos and icons might be mentioned. Before understanding the differences and when to use which, it’s also good to be familiar with a few terms — such as lossy compression, lossless compression, raster, and vector.

Lossy and Lossless Compression

Compressing digital files helps reduce the file sizes, and it is applicable to all types of data — including images, audio, and videos. The important part to pay attention to when it comes to the terms lossy and lossless, is the “loss” aspect. Lossy compression means that some of the data of the original file is lost. This often results in a smaller file size, but also a lower quality. Lossless means that the file is reduced without losing much quality and maintaining much of the data, but it typically creates a larger file size.

Raster and Vector Graphics

Raster graphics, also known as bitmap images, are formed by a grid of dots or squares called pixels (px). Although anything can become a raster graphic, these typically best describe photos or photo-realistic images. Raster graphics are dependent on resolution, which is the density of pixels or dots within a certain measurement — i.e. pixels per inch (ppi, used for computer graphics) or dots per inch (dpi, used for printing graphics). Because of this dependence on resolution, raster graphics cannot scale up without losing quality.

For example, if I saved a 100×100px image at 72 ppi and wanted to scale it to 1000×1000px, the quality of the image would be bad because the amount of pixels per inch remained 72. Scaling up the image would just make the individual pixels bigger and more apparent.

Although programs like Adobe Photoshop can try and help hide the bad quality, there is only so much that can be done with a low-resolution photo and the result will always look off. This is why copying and pasting from Google Images doesn’t always work well — among other legal reasons as well.

A vector graphic is composed of mathematical statements or coordinates that create points, lines, and shapes to create graphics. These best describe imagery that are more two-dimensional and have less variation in detail — i.e. typography, icons, and logos (although this depends on the details that make up a logo). Opposite to raster graphics, vector graphics can be scaled up and maintain their quality.

JPEG, Joint Photographic Experts Group

JPEG is a lossy-compression file format for raster images. As explained above, it’s a file format for pixelated images and loses some of the original data to produce a smaller file size with lower quality. It is also the most widely used on the internet, because smaller file sizes equal to quicker page loads, which in the end provides better user-experience.

Site speed is affected by many different things, and one way to improve it is by changing the images. If an 1980×1020px image was saved at 300ppi using a lossless-compression file-format, that would result in a large file size. It would take some time for a web page with that image to load, because the amount of data it would need to process. Alternatively if the 1980x1020px image was saved at 72ppi resolution in JPEG, the page will load quicker because of the compressed data and reduced file size.

Tip: Save raster images that are photos or photo-realistic at a 72ppi resolution (standard resolution for images on the internet) as JPEG. If they are saved at dimensions they will show up on a page, and will not be expanded when responding to larger screens, then it’ll look great and prevent slower page loads!

PNG, Portable Network Graphics

PNG is a lossless compression file format for raster images. Since the lossless compression maintains much of the original data and creates a larger file size, PNG is best used for turning vector graphics into raster images. Assets like icons or logos are usually flat and have little variation in detail, and do not contain much data compared to photo-realistic images. Therefore, the resulting file size will not be too large. Also, most vector graphics have flat uniform colors and defined edges, and it’s easier to notice the pixels when compressed. Therefore, it’s best to maintain the data to retain the quality of points, curves, and edges of the vector graphics with PNG.

PNG is also great to use when there’s a need to have a transparent background.

A Few Other Image File Formats

GIF — Graphics Interchange Format
GIF is a lossless image file format. It was once very popular because its data compression allowed large images to be downloaded at relatively short times. But, aside from simple graphics and animations like memes, GIFs are not used as much because of its limited color palette. 

EPS/AI — Encapsulated PostScript/Adobe Illustrator
EPS is often used to save vector graphics and illustrations. EPS files cannot be displayed on websites, but designers might request to assets like logos in this file format.

AI is a file format developed by Adobe Systems for vector-based graphics and illustrations. Adobe Illustrator can open EPS file formats. 

SVG — Scalable Vector Graphics
SVG is an image file format for vector graphics. It is XML-based, which means graphics are created with code. This file format is becoming more popular for vector graphics on the web because it allows the graphics to be easily edited with code and can scale without losing quality or look pixelated.

This code:

Turns into this circle:

“Do I look like I know what a JPEG is?”

When it comes to websites, JPEG and PNG are the standard image file formats, and more specifically JPEG is used more often to help maintain quicker load speeds. With the internet continuing to grow and be an essential part of society, information like this is good to know. If you’re like my friend, hopefully it'll help prevent unnecessary shaming and laughter.