The Essential Guide to File Formats & Sizes

File formats, sizes and dimensions for graphic and website design

Agencies often request file formats from clients and partners – these files comprise of logos, brand elements and photos for graphic design or web design projects. We have developed  a handy list for our collaborators, of file formats, sizes, differences and how to discern which format to use, when and how.

THE SHORT VERSION

When your agency partner or collaborator is asking for images, these are the preferred file formats:

1. Logos, branded elements, illustrations and icons: Vectors (PDFs (.pdf), SVGs (.svg), EPS (.eps), Illustrator AI (.ai)
2. Photos: Jpegs (.jpg), PNGs (.png)

WHAT TO DO:

1. Always provide your collaborators with the best possible file (i.e. high resolution and largest file size in your possession – see below)
2. Always share images using a cloud service like Google Drive or Microsoft’s One Drive so that the images live in one place for multiple project collaborators to access

WHAT NOT TO DO:

1. Never send images in Word docs, Google docs, or in WhatsApp – these are usually compressed by that software program and your service provider will likely need to ask for higher resolution versions 
2. Avoid sourcing logos and images on the web, rather ask your service provider as they will ensure the appropriate file(s) required are sourced
3. Do not send images by email as email programs have file size limitations, and files can be lost, emails missed etc. 

THE LONG VERSION

Image considerations

The responsibility of the client is to provide the best possible image size/quality that they have at their disposal – your collaborator will take care of the rest – i.e. your collaborator will reformat images for the website to the WEBP format. Below is a list of recommended file formats and sizes per platform:

PRINT

1. 1. Photos – highest possible image size and quality (3–4,000 pixels on the longest side or which ever size is available @ 300dpi)
   2. Logos, icons, illustrations – vectors
   3. Colours: CMYK (E.g. deepest black is 100,100,100,100, white is 0,0,0,0)
      1. 100 C (Cyan)
      2. 100 M (Magenta)
      3. 100 Y (Yellow)
      4. 100 K (Black)

WEB / DIGITAL

1. 1. Photos – lowest possible image size (to aid faster web page loading time (WEBP format)
   2. Logos, icons, illustrations – Vectors (SVGs) – these are low in file size and will load quickly on a web page
   3. Colours: Digital/web:
      1. RGB (E.g. black is 0,0,0, white is 255,255,255)
         1. 0 R (Red)
         2. 0 G (Green)
         3. 0 B (Blue)
      2. HEX (#000000 (black), #ffffff (white)

If you work with images frequently, it is helpful to understand the difference between vectors and rasters.

VECTORS

Vectors are a unique style of graphic format using geometric shapes made up of points, lines, curves, and polygons. The most common forms of vector images are logos, icons, gradient elements, and illustrations (think cartoons). Vectors are always the highest quality (high resolution) and because of their often simple nature or makeup, are usually very small in file size which is great for websites as they aid with faster loading times. Logos are usually designed in a vector program like Adobe Indesign, Adobe Illustrator or Figma. Vectors can be resized to any size and still maintain their quality.

RASTERS (Bitmaps)

Raster graphics, also known as bitmaps, are a type of digital image made up of tiny square pixels, arranged in a grid to represent the makeup of an image. The most common type of raster images are photos and images created with Photoshop or similar photographic editing software program. The larger the number of pixels used in an image the higher the resolution and quality. When we see an image that is “pixelated”, this is usually because the image contains a very low number of pixels and there are not enough pixels to display all of the detail of the image. An image with millions of pixels will be a much higher resolution as it contains more pixel data. Therefore when we request a high resolution image the higher the number of pixels used the better. You can decrease a raster image’s size but not increase the file’s size. When you enlarge a raster image the quality or resolution will decrease as you are asking the same number of pixels to articulate a larger surface area, and pixelation will occur. To avoid pixelation, the highest possible size and resolution of the image should be the source file that is worked from.

This information is based on The Ethical Agency’s first hand experience – any omissions and mistakes will happily be corrected – please email for such considerations.

File sizes

When is an image high quality?

Rasters/bitmaps/photos

1. Anything less than 1 megabyte in file size, and or 2,000 pixels on the longest side is considered low resolution.
2. A high resolution image starts at around 4,000 pixels on the longest side (meaning if landscape the width will be 4,000 pixels, if portrait the height will be 4,000 pixels)
   1. Black and white images contain less pixel data therefore to be considered high resolution, they need fewer pixels

Vectors

1. 1. Are high resolution regardless of the file size and can be resized to any size – larger or small

Resolution

1. 1. Vectors
      1. Always high resolution
   2. Rasters/bitmaps
      1. 72dpi low resolution
      2. 96dpi
      3. 150dpi
      4. 300dpi
      5. It is possible to resample a low resolution image as a high resolution image but what you gain in resolution you lose in file size – i.e. a 5,000 x 5,000 pixel low resolution image can be resampled as a 1,000 x 1,000 pixel high res image. One cannot increase the resolution of an image and retain the dimensions. There is software that claim to do this but we have never witnessed a successful conversion

File dimensions

People often confuse file size with file dimensions. File size is the amount of space the file uses on your computer – i.e. 2 megabytes (2,000 bytes). The dimensions refer to the width and height of an image – i.e. 2,000 pixels (width) by 1,000 pixels (height). To avoid confusion (i.e. your design brief assets being designed portrait instead of landscape), when describing/referencing an image it is advisable to use the industry standard and write width then height (in that order) when briefing service providers – i.e. 728 pixels (width) by 90 pixels (height) or one could write as 728(w) x 90(h)(px)

Popular file format aspect ratios include:

• 4×3 (i.e 1,200 x 900(px)) – most native photo formats – i.e a landscape photo take on a digital camera/phone
• 1×1 – square images/video – think Instagram
• 12×9 – (i.e. 1,920 x 1,080 (px) video and 1,080 x 1,920 (px) social media)

Popular file dimensions

All listed as width x height

Print   

1. 1. A6: 105 x 148(mm) – portrait
   2. A5: 148 x 210(mm) – portrait
   3. A4: 210 x 297(mm) – portrait
   4. A3: 297 x 420(mm – portrait
   5. A2: 420 x 594(mm) – portrait
   6. A1: 594 x 841(mm) – portrait
   7. A0: 841 x 1,189(mm) – portrait
   8. DL: 100 x 210(mm)
   9. Flip the dimensions for landscape

Digital 

1. 1. Social media
      1. 1,200 x 628(px) (landscape – images/video)
      2. 1,080 x 1,080(px) (square – images or video)
      3. 1,080 x 1,920(px) (story)
   2. Website adverts
      1. 1. 728 x 90(px) – leaderboard
         2. 970 x 250(px) – billboard
         3. 300 x 250(px) – inline rectangle
         4. 300 x 600(px) – half page
         5. 320 x 50(px) – mobile
   3. Video
      1. 1. 1,920 x 1,080(px)(high definition)

File formats

(file extensions)

Bitmaps

JPEG (.jpg or .jpeg)

1. 1. Uses a form of compression in order to reduce a file’s size
   2. High levels of compression can result in an image looking pixelated

PNG (.png)

Used in web design and development mainly because PNGs can include graphics with transparent or semi-transparent backgrounds. PNGs can include 16 million colours which is high resolution – consider PNGS as the successor to GIFs.

GIF (.gif)

1. The GIF format was invented in 1987 and is still a favourite for web development as files are reduced in size but without reducing the image quality. The format is limited as it can only contain up to 256 colours, meaning it only works well for simple graphics like logos, and basic illustrations otherwise the images/videos tend to look very pixelated. GIFs are a common format used on the internet foor meme style low-fi (low resolution) animations.

WebP (.webp)

1. WebP is a relatively new image format that provides superior compression for website images. As the goal of website development is for the smallest possible file sizes, to aid in faster website page loading speeds, the format is preferred, as it results in smaller file sizes – up to 26% smaller than PNGs and 34% smaller than comparable JPEG images.

Rasters/bitmaps – print

In the past EPS and TIFF formats were the industry standard for high resolution images for print but nowadays high resolution JPEGs and PNGs are the norm

One of the best features of Adobe’s Indesign, the premier design software program, is that it can resample a low resolution image to it’s appropriately sized high resolution version – for example; if you import a 5,000 x 5,000(px) @ 72dpi (low resolution) photo into Indesign, one can resize the image to 1,000 x 1,000(px) @ 300dpi (high resolution) – so long as you are reducing the dimensions, Indesign is increasing the resolution at the same increments. Approximate calculations provided.