Render Positive
Get in touch


Render Positive

Quickies: The Difference Between a JPG and a PNG (and a GIF)

By Han | 21st Jun 2016 | Posted in Quickies

We’ve created a series of bite-sized blog posts just long enough to give you the downlow on all kinds of digital wizardry, because we love sharing our knowledge and know-how. Get tips for improving your social media efforts, discover powerful PR tricks, and learn all kinds of hacks to make your work life easier. Here is our super quick tip of the week.


All images are one of a few different file types. The most common that you’ll find on the web are JPG, PNG, and GIF.

(And in case you were wondering, there is no difference between a JPG and a JPEG!)


Using the right filetype when you save your images is important, especially if you are concerned about getting the highest quality possible with small file sizes.


So, how do you know which to use? For a start, it’s important to know the difference between raster and vector graphics. Most of the images you’ll see and use online will be raster formats (this includes JPG, PNG, and GIF), so we’ll just deal with those here.


  • Full transparency is available
  • Full colour
  • Lossless – no data is lost when saving as a png, which can result in…
  • Larger file sizes


  • No transparency
  • Full colour
  • Lossy – data is lost during jpg compression. Often, image editing programs will ask you at what quality you want to save your image, which will give you some control over this. Lower quality settings will result in pixelated, less clear images.


  • Binary transparency (can look pixelated – pixels are either fully transparent or fully opaque, with no middle ground)
  • 256 colours only, which means…
  • Smaller file sizes
  • Lossless
  • Animation is possible!

As a general rule of thumb, for the web, you should use JPG for photographic images saved at around 60-80%. PNG is useful when you need higher quality images and filesize isn’t a problem, but it’s also a good choice for graphics like diagrams and logos with only a few colours, as they can be compressed down to very small sizes without losing quality. Ideally, you’d use vector formats for this type of image, but a raster PNG fallback is acceptable.

Related Resources

Sign up now!

Get more great stuff delivered fresh to your inbox.

Leave a Reply

Want to know what we could achieve for you?

View all resources Useful stuff

Meet the team

Jon Buchan
Hannah Brown
Jenny Longmuir
Tess Bowles
Lee Buchan
Asher Baker
Bree Van Zyl
Sam Reynolds
Aida Staskeviciute
Laura Reddington
Dipak Hemraj
Jess Collett
Gemma MacNaught
Laila Khan
Gary Buchan
James Hackney
Stuart Lawrence

Jon Buchan Chief Executive Officer
07949 283 785
Hannah Brown Creative Yet Technical Manager
07453 779 030
Jenny Longmuir Content Marketing Editor
Tess Bowles Social Media & Content Marketing Manager
Lee Buchan SEO and Social Media Executive
Asher Baker SEO & PPC Manager (and Lord)
07525 744 178
Bree Van Zyl Video Productionista
Sam Reynolds Copywriter
Aida Staskeviciute Graphic Designer
Laura Reddington Copywriter
Dipak Hemraj All Rounder
Jess Collett Copywriter
Gemma MacNaught Head of UX and Conversion Rate Optimisation
Laila Khan Head of PR
Gary Buchan Managing Director
07525 839 157
James Hackney Client Services Manager
07725 209 820
Stuart Lawrence Chief Technical Officer
07725 209 819

Stalk us on social…