Graphic image that reads: What File Types to Use on Your Website

There are lots of file types to choose from, but knowing what each type is best used for will help you choose the best file types to use for different types of content on your website.

Just like you use different fittings on your Kitchen Aid mixer or different implements on your tractor – you use different file types for different kinds of content on your website.

In this post I’ll share with you the four file types you’re most likely going to use on your website.

PNG = Portable Network Graphic

A PNG or .png file is a great option if you want to have a transparent background behind your graphic. For example, if you want to put your logo over an image (but want to avoid having an ugly white box behind it – a dead giveaway of a JPG file) then a PNG is a good option.

PNG files are great for logos, icons, hand drawn art/graphics. PNG is a “lossless” file type meaning that the quality isn’t degraded when you save a graphic as a png.

In the image below, I used a png version of my stacked britelime logo to lay over a photo of me.

britelime founder and website designer Liz Langford-Cobo in front of a barn. Image has a white britelime logo overlay on top of the image.

If I had used a jpg instead of a png I would have ended up with something like this, with a white box behind the graphic.

britelime founder and website designer Liz Langford-Cobo in front of a barn. Image has a black britelime logo on top of a white box on top of the image.

I prefer the cleaner look of the logo layered right on top of the image, with no background box behind the logo.

Keep in mind though that a PNG file will degrade if you scale it larger than the dimensions it was saved at. If you need a file type that can scale (meaning you can make it larger or smaller than it’s original dimensions) you’re better off to use a SVG file. We’ll cover SVG’s later in this post.

JPG (or JPEG) = Joint Photographic Experts Group

Like PNGs the name JPG (or JPEG) doesn’t tell you what the file type does or is for. A JPG is a file type that compresses an image without degrading the quality of that image. JPG is the file format you want to upload your image files in for your website. The JPG was created for digital images back in 1992 by the Joint Photographic Experts Group (or JPEG).

You’ll want to make sure that the JPGs you upload to your website are high quality, so they’re not distorted – but you’ll also want to be sure that they’re web resolution which is 72 dpi. DPI stands for dots per inch and can be low at 72 for screens, but should be high (300) for printing.

While to the naked eye you really can’t tell the difference between an that is a JPG or an image that is a PNG, JPG is the correct file format to use for images.

GIF = Graphics Interchange Format

GIFs (pronounced JIF like the peanut butter) have been around since the 1980s! Before there were JPGs, people used GIFs. Now that file formats have evolved, we primarily use GIFs for animated graphics like memes and looping graphics.

Make it Fresh animated gif from britelime Creative.

This animated “Make it Fresh” GIF is one that I use on occasion to bring attention to my “make it fresh” tagline. GIFs can be a great way to catch a user’s attention because of the motion in them.

SVG = Scalable Vector Graphic

Finally, the SVG file is my FAVORITE file type for website graphics like logos and icons. SVG files are “scalable” meaning you can make them larger or smaller without degrading the quality of the graphic.

You might be wondering what is a “vector graphic?”

“A vector graphic uses points, lines, curves and shapes that are based on mathematical formulas.” – Adobe.

Turning your logo into a vector graphic transforms it into those points, lines, curves and shapes so that as you adjust the size of it a mathematical equation keeps all the points, lines, curves and shapes in proportion to one another. And that math – it happens on the fly when you adjust the size of your graphic.

Does your head hurt yet? Mine too. I’m not a “math” person – but I am so grateful for SVG files because they keep my vector art looking good all the time.

Unfortunately not all website platforms allow for SVG files. Squarespace for example doesn’t utilize SVG files, Showit does. If you’re a Squarespace user and you want to take advantage of the benefits of SVG files, you can upload them using the Code block inside of Squarespace.

Choose the Right File Type for the Content Your Sharing

At the end of the day, choosing the right file type for different types of content on your website will help you to deliver that content in it’s absolute best form. And you want your website to always be in good form.

What File Types to Use On Your Website

Website Tips

October 13, 2021

get liz's website wednesday email with tips and actionable steps for building a BETTER WEBSITE FOR YOUR SMALL BUSINESS!