JPEG, PNG, GIF!? A quick guide to image file types for the web

Maggie Newberg // June 2018

Pixabay has some nice online images that you can use for commercial use for free. Anything from images of bitcoin, to babies, industrial construction workers, and even potato salad.

I know this because I’m in charge of adding images to my company’s blog and so I’ll find blog images by typing in fragments of article titles into Pixabay for “inspiration” on what images to use. Crafty, right?

But choosing which images to plop into my company’s blog isn’t the main issue when working with digital images. Nine out of 10 times, the issue has to do with image sizes, and knowing which file format is ideal for uploading or downloading an image. If you’re anything like me, and choosing to “save as” JPEG, PNG, SVG or more gets you in a tizzy, this is the post for you!

JPG/JPEG - Joint Photographic Experts Group

Best for saving photos or lifelike images

The vast majority of images we find on the web are JPEG files

JPEG (or JPG) files are used predominantly by the vast majority of computer and web users to upload, download, or view images online. Saving in JPEG allows for photo compression and uses a fairly small file size which allows for quicker down and uploads. This means that using JPEGs allows for good quality images, that don’t take up a lot of space. When uploading or downloading images from the web, JPEG should be the storage file of choice.

PNG - Portable Network Graphics

Best for saving graphics with a transparent background

Screenshots make good candidates for PNG files

PNG files are primarily used by graphic designers, marketers working with branding and logos, and web users who have a lot of space to save stuff on their computer. PNGs are often used for editing images over images, or text over images. This is because saving in PNG allows for images or graphics to be put onto a transparent background, and so logo overlays can be created. PNGs also offer “clearer” image than jpegs for lines or text, so they are also often used for screenshots. Since PNGs take up a decent amount of space in comparison to JPEG files, it’s best to avoid them unless you need a transparent background image, or file size is not an issue.

PSD - Photoshop

Best for creating and saving images and graphics with layers

PSD is mainly used for digitally manipulating images

Photoshop is primarily used by designers or others who create or alter digital images. Saving in Photoshop allows for digital manipulation of images and for layers to be preserved within digitally manipulated images. Since PSD files preserve the layers of each image, it makes the file larger, so PSD files are not typically found online, as they would slow down the load time of a webpage.

SVG - Scalable Vector Graphics

Best for saving graphics that need to be scaled up or down digitally

Logos are often saved as SVGs

SVG files are primarily used by web designers that work with images and graphics that will be shown and used on a number of differently sized mediums. Saving in SVG allows for seamless scaling, or allowing for graphics to be clearly displayed on screens of varying sizes (or zoomed in on screens) without losing image quality or getting “pixelated”. Logos are often created using SVG files, as logos are often displayed on retina screens, or need to be scaled up and down without losing quality.

TIF/ TIFF - Tagged-Image File Format

Best for saving images that are going to be used in print

TIFF files are often used to create, edit, and store print designs
Image from https://bit.ly/2Hb6WnL

TIFF files are used primarily by graphic designers who work with print materials. When working in digital mediums (images and graphics for web use, emails, etc), TIFF will very likely not be your go-to medium, as it is significantly lacking in digital support. While saving in TIFF allows for layers to be saved and many colors to be represented in a graphic or photo, it is not a file that is supported on all web browsers or applications, and it does not compress well, making it ideal for only print use.

GIF - Graphics Interchange Format

Best for saving images or short animations with limited color, or graphics with limited colors

Short, limited color animations are great for GIF files
Image from https://bit.ly/2JoIN23

Historically, GIF files were primarily used to store graphics or images with limited colors, and don’t take a lot of storage space. In today’s world, GIFs are mainly used as fun, short loop animations on the internet, back and forth between message platforms, and in pop culture. Though animated GIFs take up significantly less storage space than video, they take up more space than SVGs or PNGs. This storage issue, in addition to a somewhat choppy delivery of animated loop (and a limited color spectrum), can make GIF animation files less popular than SVG or PNG files.

Maggie Newberg Headshot

Maggie Newberg

Marketing Specialist

Working in marketing & operations, I experience the best of both worlds by leading marketing campaigns, content initiatives, and conference sponsorships, as well as overseeing day-to-day activities such as time tracking management, invoicing, and corporate level communication.

Filed under: