Have you been asking yourself the all-important question —to PNG or not to PNG? Or, perhaps you’re wondering what on earth an SVG file is anyway?
Well, visual content is all around us. For marketers, in particular, visuals are super important to our strategies. Making sure you’re using the correct image types is important in keeping up to standards.
But what really is the difference between all the different image formats? Should you be sacrificing quality over load speed? Do Facebook and Twitter really care what type of file you’re using?
In this article, we’ll talk about some common file types and how best to use them on the web. We’ll compare the differences between JPGs and PNGs and explore what SVGs, GIFs and RAW images are.
What’s a JPG?
The JPG (or JPEG) was first created by the Joint Photographic Experts Group back in 1992 (hence its name). They’re a committee of people who want a way to make high-quality and large image files smaller and easily shareable on the web. That sounds pretty good to us! It means that marketers and content creators using complex images on the web can consistently meet image compression standards (and don’t end up with a horrible pixelated image that makes you wanna 🤮).
That being said, you can expect to lose a level of quality when compressing a high-quality image into a JPG. That’s because a JPG uses lossy compression, meaning it removes some data from the original image file. This means the file is smaller and will load quickly on the web. However, it's important to note that too much compression will hinder its quality.
When would you use a JPG image?
JPGs are recommended when you need a balance between quality and file size. For example, if you’re uploading a photograph into a blog post, a JPG will ensure you don’t slow down the loading time of said article.
What’s a PNG?
PNG stands for Portable Network Graphics. Unlike the JPG, a PNG has lossless compression. It doesn’t lose any of its information on compression - so that means the image quality is usually much higher (and the file size much larger) than its JPG cousin. Typically, people use PNGs for graphics (such as logos), text objects and line drawings. It also supports transparency, which is super handy if you need to place a cut-out logo against a different background.
When would you use PNG formats?
A PNG offers a lovely, crisp image, but it does slow down web pages.
PNG is recommended when you’re using graphics and logos —particularly ones with a transparent background (as we mentioned). If you want to drop a transparent image into a blog post, you won’t achieve this with a JPG (you’ll just get a white background).
However, if you’re a brand that prides itself on its images, you don’t want to risk a downgrade in quality. Perhaps you’re a photography agency or you sell quality products online. Your audience expects your photos to look good, right? In this case, take a tip from us.
When we upload images to our website (dash.app), we always run them through Tiny.png. This is a free image compression tool that reduces file sizes, whilst maintaining image quality. Tools like Canva also offer compression on download — handy if you want to quickly upload an image to social.
PNG vs JPG: which is better for website loading times?
If you’ve heard of website load speeds, you’ll understand the efforts you have to go to ensure you're not uploading anything that hinders that speed. After all, people browsing your website aren’t going to stick around if they’re watching the dreaded loading bar for too long. 😬
One of the elements that impact load speed is your images. If you’re using large image sizes (and larger file sizes for that matter) in your blog posts or landing pages, your browser will take longer to load your page.
So, whilst PNG images are lovely and crisp, you’ll find that they’ll take a little longer to load on your website. So be wary —too many will affect your load speed, which in turn, can hinder the experience of your website visitors (not what you want when you’re trying to convert 🤑).
This is where JPGs will give you the best option to improve load speed, though (as I mentioned) you may expect a slight reduction in quality.
JPG vs PNG: Which file formats does social media prefer?
When it comes to social media, all platforms should support JPG and PNG file formats. Facebook, for example, will compress your image down to its required size - no matter the size of the file you upload. To avoid any fuzziness, make sure your image is scaled to the exact dimensions to avoid too much auto compression.
💡If you use tools to organise your visual content, like Dash (that’s us), you won’t need to worry about sending your images through a compressor to get the right dimensions for social media. Our digital asset management solution allows you to crop images to size on download. That means no bothering your designers or using dodgy tools on the web to do the cropping for you. 🙌
What’s a GIF?
This is everyone’s favourite type of file, right?
GIF (sometimes pronounced as jiff) stands for Graphical Interchangeable Format. It was invented as a way to display moving images on the web with minimal file size. Rather than displaying a video, it’s more like a flipbook that moves between different images. Each image can only use a maximum of 256 colours, but it means the file’s small enough to show up on different channels across the web.
When would you use a GIF?
GIFs have gained in popularity over the years and you’ll most likely see them on social media. However, you could also use them in blog posts (like we do), embedded into emails or sent over instant messaging platforms like Whatsapp. They’re a great way of conveying an emotion or referencing something from your favourite TV show without needing to send over a YouTube link. *insert gif
What’s an SVG?
SVG stands for ‘scalable vector graphic’. To understand how SVGs differ from other file types, we need to look at how they’re made up.
A JPG or PNG are types of raster graphics. This means they're created using lots of little pixels in a square called a bitmap. Combined together, these squares form an image. This is great for displaying photographs and high-quality images because each square can match the colour of the RAW file. However, it does mean that the bigger the file, the lower the quality.
SVGs, on the other hand, are coded. They’re written in XML format, and you can literally code up the colours and shapes that you want to appear. It also means that no matter the size of the graphic, you’re still going to get fantastic quality.
When would you use an SVG?
SVGs are typically used to create logos, illustrations and graphics. You can create your own SVG files by using tools such as Illustrator, Photoshop or Canva. Simply create a design using shapes and lines and export it as an SVG file.
What's WebP?
WebP was originally created by Google to replace PNG and JPG. It's a way of compressing a file without losing quality, and Google developers claim it's 26% smaller than PNGs. It also supports transparency and animation - making it a worthy competitor of the trusty GIF.
WebP is supported on most browsers including Google, Mozilla Firefox and Microsoft Edge.
When would you use a WebP file?
Need a quality image but don't want to sacrifice load speed? WebP could be your ideal choice. You will see some loss in quality however, so bear that in mind if you're working with high-quality pics from your photographers.
What’s a RAW file?
RAW file formats store absolutely tonnes of detail about an image. In fact, it has the most information about an image out of any other file format. It’s the data that’s captured in a camera before being compressed and sent off into different areas of the web.
When would you use a RAW file?
As a marketer, it’s unlikely you’d ever use a RAW file. They’re just too big to use on the web. That’s why many photographers use image software to edit and compress them into JPGs or PNGs before sending them over to their clients. If you’re taking your own photography, it's likely you won’t be shooting in RAW unless you’ve got specific settings turned on.
Where should I store all my image formats?
As a marketer, no doubt you’ll be needing to use all of these different file types on a regular basis. Whether that’s a JPG for a blog post, PNG for a landing page, GIF for social or SVG for logos —you’ll need to make sure you have them all to hand.
That’s where a digital asset management tool (like Dash) comes in handy. Instead of shoving all these assets into a shared drive, never to be seen again, make sure you’re making the most of them.
Organise them into your Dash, share them with your teams and push your gorgeous graphics and pics out into the world. ✨
Want to try it for yourself? Simply head to a 14-day free trial below. ⬇️
Amy Burchill is the SEO and Content Manager for Dash. She works with ecommerce experts to create articles for DTC brands wanting to improve their campaigns.
