What File Types Should You Use On Your Website?
In this blogpost I dive into the backend of website imagery: different file types and when to use them.
In one of my podcast interviews (you can actually listen to it here) I talked about the impact of imagery with my incredible friend, client, and photographer, Aiste Saulyte.
The quote “copy converts but imagery connects” has stuck with me since our chat.
As a website designer, I know how important it is for your images (including logos and brand design elements) to tell the same story to potential clients, one which highlights all the good feelings about your brand/freelancing service/business.
So what’s the ‘story’ your file type is telling algorithms, google, search engines?
I’ve split this article into the following:
Raster vs Vector
SVG
PNG
JPG
If you want to get into the nitty-gritty of what makes each file different, there are plenty of blogs that delve into code and the backend.
HOWEVER, I’m going to assume you came here because you want to optimise your website imagery without having to decipher technical speak. I’ve got you.
First, let’s clarify one of the KEY differences in the files we’ll discuss.
#1 Raster vs Vector
Vector files use a mathematical formula to create your design or image. That means you can scale it to great giant printed material, like Will You Marry Me flying off the end of a plane. The resolution will still be amazing.
Raster files are a bunch of pixels that come together to form an image. As I’m sure you’ve tried before, trying to increase the size of a raster image from its original will result in a pixelated Mincraft-esque picture. In the above scenario, a raster file could make the “Will You Marry Me” sign almost illegible, ending in heartbreak.
Raster’s are perfect file types for sharing colourful and sharp photos and designs i.e More pixels = higher resolution. You can also open them on a LOT more programmes and software (lots of programmes don’t read Vector ‘maths’).
#2 SVG Files: Scalable Vector Graphic files.
This is the best file type for logos, icons, and any imagery that’s not a photograph that you need to add online. You will only be able to open this on an online browser or certain software—you won't be able to open it directly from your downloads!
If you had your logo professionally designed, you should have an SVG file. These are the best files to have a crisp and clear logo on every version of your website, whether someone is viewing it on mobile, tablet, or desktop. This is because your logo will ‘read the room’ and know how big it needs to be without losing any quality.
Best for: Uploading your logo, secondary logos, icons or icon designs with few colours.
Pros: Small file size which is an SEO ++ as it doesn’t slow down your page loading times like large files can.
Cons: Not every software can read vector files, so it isn’t a magic bullet for all your images. It’s not the best file for photographs as it doesn’t have the same richness in colour.
#3 PNG files: Portable Network Graphic files.
PNG files are made of tiny pixels (they are raster files). You don’t need to be a website designer or Squarespace expert to make these, you’re probably already very familiar if you do social media posts etc.
You can compress PNG’s into a ZIP file and digitally throw them around and they won't lose quality which makes them very versatile.
Best for: Logos and designs if you don’t have access to SVG files.Some photos.
Pros: Can make the background transparent behind an image or design. Easier to edit, view and share for most people. A Canva users best friend.
Cons: Large PNG’s can slow down loading speed which is a no-no for SEO.
#4 JPG image files: or JPEG as it’s sometimes known
JPG’s are usually photographs. They are raster files that many of us have used or shared as most programmes or softwares will open or store them. They are widely used and popular image file types.
Best for: Photographs you need to upload to your website that need a small file size
Pros: Smaller file size than PNG for photographs = faster loading time = happy SEO
Cons: They don’t support transparency and can be ‘lossy’. Lossy means they can lose quality if they are compressed.
There’s so much to image file types, far more than I can cover here! No matter your product, service, or website content, you’re going to upload some sort of images to your website. I hope this has helped you figure out what you need to upload the best possible images for your website.
If you have questions or need support on brand design, creating different files, or building a website, shoot me a personal DM here or enquire here.
