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

Branding & Design

Web Development

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

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

JPEG 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 screenshots & saving with transparent backgrounds

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

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 photoshop preserves the layers of each image, it makes the file larger, so photoshop 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

SVGSVG 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.

GIF — Graphics Interchange Format

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

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.

TIF/ TIFF — Tagged-Image File Format

 

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

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.

Close

Psst! So come to find out, we use cookies to personalize and enhance your experience on our site. Visit our Privacy Policy to learn more. By using our site, you agree to our use of cookies.