Render Positive
Get in touch

Menu

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.

What?

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!)

Why?

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.

How?

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.

PNG

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

JPG

  • 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.

GIF

  • 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 jon@renderpositive.com
07949 283 785
Hannah Brown Creative Yet Technical Manager hannah@renderpositive.com
07453 779 030
Jenny Longmuir Content Marketing Editor jenny@renderpositive.com
Tess Bowles Social Media & Content Marketing Manager tess@renderpositive.com
Lee Buchan SEO and Social Media Executive lee@renderpositive.com
Asher Baker SEO & PPC Manager (and Lord) asher@renderpositive.com
07525 744 178
Bree Van Zyl Video Productionista briarley.vanzyl@renderpositive.com
Sam Reynolds Copywriter sam@renderpositive.com
Aida Staskeviciute Graphic Designer aida@renderpositive.com
Laura Reddington Copywriter laura.reddington@renderpositive.com
Dipak Hemraj All Rounder dipak@renderpositive.com
Jess Collett Copywriter jess@renderpositive.com
Gemma MacNaught Head of UX and Conversion Rate Optimisation gemma@renderpositive.com
Laila Khan Head of PR laila@renderpositive.com
Gary Buchan Managing Director gary@renderpositive.com
07525 839 157
James Hackney Client Services Manager james@renderpositive.com
07725 209 820
Stuart Lawrence Chief Technical Officer stuart@renderpositive.com
07725 209 819



Stalk us on social…