SVG or PNG? Understanding Image File Types
PNG, JPG, GIF, SVG, PDF… why can’t we just pick one universal image format and be done with it?
We promise, once you read this guide, you’ll know why. Each image file type does truly have its own purpose, and whilst some of these purposes are overlapping, we think it’s always good to have options.
The problem arises when you have so many options you don’t know what to do with them. This can lead to you choosing the wrong image format, causing headaches down the line when it comes to sharing, resizing, editing or printing.
Let’s get into it…
Raster Image Files
Raster images are digital graphics made up of a grid of individual pixels.
Each pixel contains specific colour information, and when these pixels are arranged in a grid, they create the overall image. Raster images are resolution-dependent, which means they have a fixed number of pixels and a specific size. When you zoom in on a raster image or attempt to increase the size, you’ll notice the quality decrease as the image becomes pixelated.
Raster images are well-suited for photographs and complex images but may not be ideal for graphics that require high scalability or need to maintain sharp, crisp edges.
JPEG (.jpg, .jpeg)
Joint Photographic Experts Group
JPEG is a widely used method for compressing digital images, particularly photographs - it’s probably the most recognisable on this list. It's a lossy compression technique, which means that some of the image data is discarded to reduce the file size. This leads to a loss in quality, but this is usually unnoticeable when used for the intended purposes.
JPEGs are used for digital photography, web images, social media, email attachments and graphic design. They strike a balance between image quality and file size, making them practical for online use.
GIF (.gif)
Graphics Interchange Format
GIFs are characterised by their ability to loop endlessly, which is why they’re most typically used for animations. They’re limited to 256 colours, but use lossless compression and support transparency. This means that they maintain image quality, but may result in larger file sizes compared to some other formats - they’re also not recommended for images, as these tend to require thousands of colours.
GIFs are commonly used on social media as a way of quickly sharing brief animations to add humour or otherwise express emotions (think reaction GIFs). They’re also used in web design where short loading times are favoured over high quality images.
PNG (.png)
Portable Network Graphics
Originally designed to replace GIFs, PNGs use lossless compression AND can handle up to 16 million colours. However, the size of PNGs increases drastically when using thousands of colours, so it’s not always the best format for particularly high-quality images. Like GIFs, PNGs also support transparency.
PNGs are great for website images, but not as good for printing. This is because they’re optimised for screens - as per the name!
WebP (.webp)
Web Picture
Another format using lossless compression, WebP files can shrink 26% smaller than PNGs without losing any quality. They can also use lossy compression, which allows the file size to shrink by up to 34% in exchange for quality. This makes them ideal for use on websites where speedy loading times are paramount.
Raw (.raw, .cr2, .nef)
When you take a photo on a camera, it’s saved in a raw file format of the highest quality. They hold every element of a photograph without losing small details or quality. Once the image is uploaded to another device, it can be saved in another format which is then more easily shared and viewed. Raw files hold lots of information about an image but need to be processed, much like a negative.
Vector Image Files
Instead of being composed of individual pixels, vector images are made up of geometric objects, such as points, lines, curves, and shapes.
These objects are defined by attributes such as position, size, colour, and curves. Because vector images are not pixel-dependent, they are resolution-independent, meaning they can be scaled up or down without any loss of quality.
Vector images are well-suited for graphics that require scalability, such as logos, icons, illustrations as well as designs for print media.
PSD (.psd)
Photoshop Document
As you can imagine, PSD files are documents generated by Photoshop. If you’ve used Photoshop before, you’ll know the software works with layers which make modification simple. PSDs are unflattened, meaning when you open the document in Photoshop, your layers will still be intact.
From Photoshop, you can export as the vector files listed below.
PDF (.pdf)
Portable Document Format
PDFs are ideal for sharing - they are, after all, portable. This means they display as intended on any device, plus when printed. PDFs can include text, images, hyperlinks, and interactive elements and are typically viewed with free software like Adobe Reader or web browsers. This format is essential for sharing and archiving documents while preserving their original layout and content. However, PDFs aren’t the best option for individual images.
SVG (.svg)
Scalable Vector Graphics
SVGs can be easily compressed without losing quality. They’re text-based and are easily editable - plus they offer small file sizes. SVGs are ideal for 2D graphics and are commonly used for responsive web design, icons and logos. They are accessible and support CSS styling, making them a versatile and open standard choice for web and graphic design.
EPS (.eps)
Encapsulated PostScript
EPS files are particularly popular in professional graphic design and printing industries. As they’re vector images, they can be scaled to any size without loss of quality. Like SVGs, EPS files are often used for logos, artwork, and typography, ensuring that designs retain their sharpness and precision. EPS files can be opened and edited with various design software, making them valuable for cross-platform compatibility.
AI (.ai)
Another vector file created for logos and other high-quality graphics, AI files are created and edited using Adobe Illustrator. These files are highly editable and maintain image quality when resized, making them suitable for professional design work, logos, and print media. AI files can also be converted to other formats, such as SVG or PDF, for wider compatibility and use in various design and publishing applications.
UNBXD is a Creative Digital Agency which specialises in social media marketing to create exciting, innovative solutions for breakthrough brands. We are experts in supporting brands to outline clear objectives, develop strong communication strategies and create unique content which truly engages their audience. Come and see what we can do for you!
