PNG... what the hell is a PNG?

Ping Pong… Penguin?

.PNG stands for Portable Network Graphic, yeah maybe you don’t need to know that so much – but what is worth knowing is that a .PNG is your only friend in digital artwork when you need all of these boxes ticked:

  • Smallest file size (Crucial for fast loading pages)
  • Sharp high quality (Nobody wants a blurry logo or image)
  • Transparency (JPEGs flatten transparency to pure white, which won’t allow you to “float” your logo or image on a background.)

Honestly most file formats in our digital lives sit behind the scenes in the software so ideally you’ll never need to know anything about them. Ever needed to save an Email as a single file? Unlikely but make it a .eml if you do so you can open it again.

We reckon an exception worth making is when it comes to artwork. To get the best quality results you need to know the pro’s and con’s of a handful of file types. That way whether you’re loading to your website or sending to the printer, you’ll know what to use to get the best finish. Read on to get touch the surface of file formats to ensure you get the best quality results…

Useful filetype jargon

Vector is sharp at any size.

Saving Logos and Illustrations as Vector drawings (.EPS and .AI) ensure the artwork is as sharp as possible – at any scale –  above or below its original size. 

This is thanks to these files being math based lines and shapes, rather than one pixel at a time, which will go fuzzy (pixelate) when enlarged. 

Raster is a different beast.
Now when it comes to photos, illustrations (and even some logos that are non-vector) you’ll need to save these in pixel based format. Pixel based images (also called Bitmap or Raster images) are literally an image made up of coloured squares.
 
You may not know the terms “raster based” or “pixel base” but you will recognise the most common file formats. You use these every time you take a photo (.JPG) or a screenshot (.PNG).
 
For these images it is recommended they are saved at 100% scale for their desired output or display. When enlarged the computer is clever enough to “guess” the extra pixels” but if it has to enlarge too much your image will go noticeably blurry (pixelate).

Best Use Guide for Digital

Lost in Desert Illustration
.SVG

Artwork you want pin sharp and/or scalable (Logos, Text and Illustrations) 

  • Infinite scale up or down without loss of quality
  • Colour mode RGB or Grayscale
  • Can be animated
  • Tiny file size
Services hero image
.JPG

Photos and general imagery

  • 72dpi @ 100% scale
  • Colour mode RGB or Grayscale
  • Smallest file size for photographic/above 256 colour imagery (For flat or minimal colour images like logos use .PNG)
  • WARNING: Transparency flattens to pure white (Use .PNG)
Learn For Good Company logo with icon
.PNG

Artwork you want sharp (Logos, Text and Illustrations) 

  • 72dpi @ 100% scale
  • Colour mode RGB
  • Transparency (Use PNG-24)
  • Smallest file size for flat minimal colour images like logos (For photographic/above 256 colour imagery use .JPG)
ANIMATED .GIF

Oldest animation format but works everywhere

  • 72dpi @ 100% scale
  • Colour mode Index (max 256 Colours)
  • Animated frame-by-frame
  • Timing can be set per frame
  • Can be looped forever or stop after a number of plays
  • Auto play compatible with all devices
  • Does not play sound
  • NOTE: May look grainy or low frame rate depending on size requirements from publisher. Higher quality compression and frame smoothness will result in large file sizes not permissable for publishers. (For smooth more modern animation build in HTML5)
ANIMATED .MP4 or .m4V

Animation as a movie 

  • Upgradeable allowing full creative freedom and timing
  • Modern effects, links and coding
  • Allows both vector and pixel based artwork and text of any scale in the working file
  • MP4 Output = 72dpi @ 100% scale
  • Colour mode RGB
  • Can have sound
  • WARNING: Auto play not compatible with iOS devices
  • NOTE: Higher quality compression and frame smoothness will result in large file sizes. (For smooth more modern animation build in HTML5 or for smaller size requirements use animated .GIF)
  • NOTE: Much more complicated process to build
 
ANIMATED HTML5

Highest quality & efficiency built for browsers 

  • Upgradeable allowing full creative freedom and timing
  • Modern effects, links and coding
  • Allows both vector and pixel based artwork and text 
    • Vector = Infinite scale up or down without loss of quality
    • Raster = 72dpi @ 100% scale
  • Colour mode RGB
  • Can have sound
  • Can be looped forever or stop after a number of plays
  • Highest quality result with the smallest file size due to better technology 
  • NOTE: Much more complicated process to build
 

Best Use Guide for Print

.EPS (Vector)

Artwork you want pin sharp and/or scalable (Logos, Text and Illustrations) 

  • Generic vector format compatible in most printers
  • Infinite scale up or down without loss of quality
  • Colour mode PMS, CMYK or Grayscale (+more)
  • Transparency available
  • Multiple pages (artboards) available
  • Large file size
.AI (VECTOR)

Artwork you want pin sharp and/or scalable (Logos, Text and Illustrations) 

  • Adobe vector format compatible in most Creative Cloud Apps
  • Infinite scale up or down without loss of quality
  • Colour mode PMS, CMYK or Grayscale (+more)
  • Multiple pages (artboards) available
  • Transparency available
  • Large file size
.PDF (VECTOR & RASTER)

Artwork of all types packaged into one or more pages 

  • Adobe standard accepted by most printers (when set-up correctly).
  • Embedded Images = 300dpi @ 100% scale
  • Embedded Text and Vector = 2400dpi @ 100% scale
  • Special file that allows vector and pixel based artwork and text.
  • Colour mode PMS, CMYK or Grayscale (+more)
  • Small file size (approx 90% compression without quality loss)
.TIF (RASTER)

Artwork you want pin sharp (Logos, Text and Illustrations) + Photos and general imagery

  • Pixel-based raster file standard accepted by most printers (when set-up correctly).
  • Transparency available via vector Clipping Paths (Print only, won’t work on digital)
  • 300dpi @ 100% scale
  • Colour mode PMS, CMYK or Grayscale (+more)
  • Large file size
.JPG (RASTER)

Artwork you want pin sharp (Logos, Text and Illustrations) + Photos and general imagery

  • Pixel-based raster file standard accepted by most printers (when set-up correctly).
  • Transparency available via vector Clipping Paths (Print only, won’t work on digital)
  • 300dpi @ 100% scale
  • Colour mode CMYK or Grayscale
  • Small file size (approx 90% compression without quality loss)