A brief explanation of the most common file formats
This section is about how to use spacing to build a vertical rhythm and proper relationships between elements on the page.
Artify illustration

Image File Formats Explained

There is no consensus on what is the best image format to use on a website – it largely depends on the type of image you’d like to display so it’s important to understand the different file types available and what they do so that you can make an informed decision about each one of them, and pick the ones that suit your website’s needs best. The vast majority of internet articles on this subject will likely point to either JPG, PNG, or GIF raster images as being the most convenient file types to use for most content like banners and photos, while logos are best displayed using vector file formats such as SVG (Scalable Vector Graphics). Typically there is a trade-off between quality of the image file and the file size, however, some file formats are more desirable than others due to their features rather than the file size they can produce, such as support for transparent background and browser compatibility, and some image formats are better for printing, while others perform better on device screens, which is why you’ll need to get familiar with image file types, native image file types, and concepts such as lossy and lossless image file compression. So, without further ado, here’s your quick guide to website image optimization!
Image File Types - Basic Concepts
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt.
Artify illustration
A Native image file type - refers to the file formats native to the software used to create them, for example, PSD (Photoshop Document) is a native file format that can only be created using Adobe Photoshop. These files retain a lot of information and allow you to change every aspect of the image created, which in turn makes the final file quite heavy Raster images or Bitmaps – these two terms are often used interchangeably, and they refer to images collectively composed by individual pixels in a grid, where each pixel is coded in a specific hue and arranged to display the desired image at a set resolution. The more pixels the image has, the smoother and higher the quality of the image, however, If you zoom in enough into a raster image, it will start to pixelate into a bitmap, which will also happen if you scale a raster image file up to a large enough Vector Graphics - composed of coordinates connected by lines and curves that form polygons and other shapes, Vector Graphics can be modified, scaled up and down to any resolution with no aliasing or image quality loss, and they can be printed with high resolution. Regardless of the scalability of vector images, most of the images found online are raster files since most vector file formats are not compatible with standard web applications. Raster image files are available using either Lossy or Lossless data compression. These algorithms are used to reduce an image’s storage or transmission costs or add certain features to the image files, and are a key element to take into account when it comes to which image format you should use for your website. Lossy compression removes information from the file to reduce the file’s size. Once removed, this information is permanently lost. Every time you open a lossy image and save it again, its quality is reduced due to this loss of information, which in turn lowers the overall quality of the image. As a trade-off, this loss of information often translates into greater file size reduction. Lossless compression does not remove information from the image as it compresses it, so the picture quality is completely preserved. Additionally, it also allows you to decompress an image constructed with this algorithm back to its original quality, and typically results in larger file sizes than a lossy compression algorithm would yield.
Understanding Raster Image Formats and their Uses
Before deciding which file format is best for your current project, we’re going to do a quick summary of the main features that each image format brings to the table and their capabilities to reduce image file size vs the quality of the image they can produce, so you can decide which one of them better meets your project’s needs.
Artify illustration
  • JPG
  • JPG stands for “Joint Photographic Experts Group” and it’s one of the most common methods of lossy image compression – it produces very light images in terms of file size, and you can adjust the strength of the compression applied to the image using this format so it provides a small degree of control over the trade-off between storage/transfer costs versus the quality of the image produced. It is typically used to display Photos rather than illustrations or similar types of design artwork.
  • PNG
  • PNG or “Portable Network Graphics” is the most commonly used lossless image compression format for raster graphics. Its main feature is support alpha channel for image transparency which makes it a very popular choice for a variety of purposes - cutouts, icons, illustrations, and anything else that requires a transparent background
  • RAW
  • RAW files are the common file format for uncompressed images captured by digital cameras and scanners, normally they have a high file weight because they contain the image data with minimal processing and lossless quality.
  • TIFF
  • Tag Image File Format or TIFF is a lossless raster image format commonly used by photographers and publishers because it doesn’t compress the original RAW file. These files typically have a very high storage cost, however, they produce the highest quality images for print media. They also offer options to use tags, layers, and transparency and are compatible with photo manipulation programs like Photoshop
  • WebP
  • An image file format that brings together the best of both lossy and lossless image compression – it supports animation and alpha channel for transparency, and was specifically designed to deliver better quality images and smaller file sizes when compared to its JPG, PNG, or GIF image formats counterparts, intended to eventually replace them altogether.
  • AVIF
  • It’s a relatively new image format with support for both lossy and lossless compression derived from the AV1 video format. It delivers a significant reduction in the file size for images, particularly photos when compared to WebP and JPG. This translates into a faster transfer speed over the internet, which makes it desirable for websites. Since it is still under development and browser support is still relatively limited, it isn’t a widely used image format
  • HEIF and HEIC
  • HEIC is the image file format employed by Apple to replace JPEG file on their devices since the release of iOS11. It’s a lossless image format with a high compression efficiency that largely preserves image quality while considerably reducing the image’s storage cost.
  • This file format supports both lossy and lossless compression for images and is intended to become the universal replacement for existing raster formats as well, all of which it outperforms in terms of functionality, quality & compression efficiency, yielding smaller file sizes with higher fidelity, support for alpha channel, and faster loading times across the board, specially for larger images.
    Common Vector Graphics File Formats and their use cases
    Lorem ipsum dolor sit amet to
    Artify illustration
  • SVG
  • Scalable Vector Graphics (SVG) can produce images that will look great on any screen size, even on devices with higher pixel density, which is why it’s often used for web icons and logos - they also have significantly smaller file sizes than pixel based images, and since they are vector based, they can be scaled up and down to any size without losing image quality or becoming pixelated
  • EPS
  • Encapsulated PostScript (EPS) is a PostScript format that can be used to combine text and graphics together very easily. It supports vector based images so they can also be scaled up and down without quality loss, and this format is recognized by printers, and allows for new input to be added directly in the printing machine, making it a preferred choice for printed images and text content.
  • AI
  • AI files are vector graphics as well, and this image format is Native to Adobe Illustrator which means it maintains all of the features and functionality added to it when it was originally created - text editability, image tracing, hues, etc. Everything remains editable, and cross compatible with other versions of the software, making it a great choice for design studios that already work with Adobe products
  • PDF
  • This format is most commonly used for sharing non-editable text files such as contracts, books and similar content, however, it is also one of the most widely used formats and it can be opened on pretty much any device (computers, tablets, smartphones) - it is also capable of retaining the layers & details of vector designs, making it one of the best choices when it comes to printing vector images.
    Best file formats for every usage case
    For printing content, your best bets will be JPEG, TIFF & PDF files due to how universally accepted they are - depending on the compression settings you’ve set for the image, the JPEG will likely yield lower quality printed content, while TIFF & PDF will remain the superior choices, specially for Photographs (TIFF) and Vector images (PDF).
    Artify illustration
  • For web
  • Now that we are familiar with each of the most common image file formats being used today, we can conclude that raster images are the best choice for most online purposes. There is no right answer to the question of which image file format is universally better for web use, but you can determine which one is better for your website’s needs based on your analytics data - are your users visiting your website through Google Chrome? Then AVIF with Picture Tags will likely be the better choice, otherwise you may want to use WebP image format due to its superior compression algorithms and compatibility. If browser compatibility is an issue, JPG & PNG formats are the way to go, however, if you need images that support transparency then you’ll be better off using PNG files exclusively.

    When to choose vector formats?

    Whenever you’re working on a design that will later need to be customized or edited in any way, you will want it to be saved in a vector format, specially one that can retain all the layers and colors as you’ve originally left them, so you can easily work on them or share them exactly the way they were when you worked with them the last time. Depending on your software of choice, your best bets will probably be SVG and EPS formats to work with them on any software that supports vector graphics, or if you’re working with the Adobe Suite, then .Ai file format to maintain the highest degree of compatibility between your file and that of the end user/consumer For web use, you’ll want your logos and your icons in vector formats, and your top option as of right now is Scalable Vector Graphics (SVG) so that they will look sharp on any device screen and retain that sharpness as you zoom in and out. If for any reason you need to use raster images, you’d be well advised to use Lossless compression formats that support transparency, such as PNG, however, SVG vectors will remain your best option for now.

    When to choose raster formats?

    For the majority of web content and print needs, you will want to keep your images in raster formats, and depending on whether it is text or images, there are a few different choices for you. For web use, photos and illustrations will likely perform better across the board if uploaded in WebP format since it yields better looking images and smaller file sizes when compared to its peers. However, JPG files have been and are still the most widely used and supported image format across all browsers and devices, so it really comes down to a matter of compatibility, which you can determine from your own analytics data For print uses, RAW files provide the best resolution for printing photos, however, this format is not compatible with most printing machines, so TIFF files are your next best choice since they yield the best quality for highly detailed images such as photos, while PDF & EPS files will perform better for printing vector images or images mixed with text due to their device compatibility and capability to retain layers
    Optimizing images for social media and other media
    There are 3 concepts that you’ll likely run into when researching the size of the images that you should be using for your social media content or other platforms that have specific requirements.
    Artify illustration
    Typically, they’ll provide you with the aspect ratio that an image should have as well as the recommended dimensions for it, and while these two terms are closely related, it is important to make a clear distinction between the two of them so that you’ll know exactly what each of these two represent and how to produce the best images within the parameters set by the platform you’re looking to use them in. It is also important to make a distinction between an image’s dimensions and an image’s resolution, which are often used interchangeably by mistake, and refer to entirely different aspects of an image’s quality Simply put, the aspect ratio (or proportion) of an image refers to the proportional relationship between its width and height values. These two values are typically seen separated by a colon in an x:y format (e.g. an image aspect ratio of 3:2) The dimensions of an image refer to its actual size, which is typically measured in pixels for digital images, and inches or centimeters for printing. These values are expressed in the same x:y format as the aspect ratio, but using an X instead of a colon to separate the values, for example, 1200x1200px. The resolution of an image is determined by the number of pixels per inch or dots per inch it possesses, typically expressed as the PPI or DPI of an image. The higher the resolution of an image, the higher quality it will have. For screens and digital images, the standard resolution is 72ppi because device screens are “capped” at this pixel density, so a 3000ppi image will look the same as a 72ppi image on your devices. On the other hand, the optimal print resolution of an image is 300dpi, and this is actually due to human biology: basically, the human eye has a resolution of about 170 dots per inch, so while at 300dpi the eye can’t distinguish the individual colors, it can see the blend that makes up a clean image, so any printed image with a resolution lower than 300dpi is at risk of appearing blurry, pixelated or having other nasty issues that are best avoided. An important distinction needs to be pointed out: any two images that have the same aspect ratio may not have the same image size or dimensions. For example, if you’re uploading an image for a Facebook Ad, you will be required to use an aspect ratio of 1:1 for the image to be properly displayed, however, the minimum dimensions as requested by the platform should be 1080x1080px. Note that there is no maximum image size, which means that as long as your image maintains a 1:1 aspect ratio, it can be of any size, from 1080x1080px to 3000x3000px and higher. This is a very important point for you to keep in mind when uploading content for social media since you’ll want your images to look neat, sharp and clean on every device and platform, and following these guidelines will make sure you avoid pixelated, blurry or cutout images Here is your quick guide to Social Media image sizes
  • Facebook Image Sizes
  • Profile pictures - should be a 1:1 image with at least 180x180px Cover photos - for these you should place images with a 16:9 aspect ratio and minimum dimensions 820x312px Shared image - these are the most common form of image you will find on Facebook and should have aa aspect ratio of 1.91:1 with minimum dimensions at 1200x630px Shared link - similar to the shared image, the Shared link is another one of the most common images you will find on Facebook. Shared links with images should maintain the 1.91:1 aspect ratio, with 1200x628px as the recommended image size Feed Ads - Recommended to be uploaded with a 1:1 aspect ratio at a resolution of 1080x1080px Stories Ads - these should be uploaded with an aspect ratio of 1.91:1 Facebook Carousel Ads - recommended aspect ratio is 1:1 with a bare minimum 600x600px size Right side column Ad - here the recommended aspect ratio is 16:9, however, when there is a link involved, it will crop to 1.91:1 Facebook marketplace Ad - same as the previous Ad size, recommended aspect ratio is 16:9, however, when there is a link involved, it will crop to 1.91:1
  • Twitter Image Sizes
  • Profile photo - should have a 1:1 aspect ratio and minimum 400x400px dimensions Header photo - aspect ratio should be 3:1 with recommended dimensions 1500x500px Twitter feed/stream - images with a link should have 1.91:1 aspect ratio with recommended dimensions 1200x628px, while tweets sharing a single image should use an aspect ratio of 16:9 and 1200x675px size. While these are the recommended sizes, as of 2021, any image with the standard 4:3 and 16:9 aspect ratios should look good as well
  • Instagram Image Sizes
  • Profile picture - a 1:1 image with recommended dimensions 110x110 Thumbnails - these are the thumbnails that appear arranged in rows when someone visits your Instagram profile page. They should maintain a 1:1 aspect ratio and image dimensions of 161x161px Instagram photos - for square and horizontal photos, you should maintain 1:1 or 1.91:1 aspect ratios, while for portrait photos the aspect ratio should be 4:5 with recommended 1080x1350px image dimensions Instagram stories - the aspect ratio should be 9:16 with recommended dimensions 1080x1920px or a bare minimum of 600x1067px Instagram feed image ads - recommended to use 1:1 aspect ratio images with dimensions 1080x1080px to prevent masking Instagram explore image ads - required to have a 9:16 aspect ratio, recommended dimensions 1080x1920px Instagram story ad - same as with the explore image ads above, these are recommended to have a 9:16 aspect ratio, with dimensions 1080x1920px Instagram carousel ad images - recommended at 1:1 aspect ratio with 1080x1080px image size
  • LinkedIn Image Sizes
  • Profile image - recommended to have at least 300x300px image size, but always maintain an aspect ratio of 1:1 Background image - this image is recommended to have dimensions at 1584x396px, but regardless of the size you choose, it should always maintain a 4:1 aspect ratio Company logo - aspect ratio 1:1, recommended to be uploaded at 300x300px Company cover image - with an aspect ratio of 5.91:1, the recommended size of this image is 1128x191px Shared image and link - these images should have an aspect ratio of 1.91:1, and for better scaling to mobile devices, it is recommended to upload at 1200x627px image size Life tab - for the main image, it is recommended to maintain the aspect ratio of the image at 3:1, with dimensions 1128x376px. For the company photos in this tab, images with a 3:2 aspect ratio uploaded with dimensions 900x600px will do great.
  • Pinterest Image Sizes
  • Profile photo - a square image with 1:1 proportion, dimensions 165x165px Pin image - recommended aspect ratio of 2:3 to 1:3.5, minimum 600px wide. Since pinterest doesn’t limit the height of the image, this value can vary as necessary, however, it is recommended to maintain the aspect ratio of 2:3, so you may want to stick to 600x900px images Board images - the large thumbnail should have a size of 222x150px, while the smaller thumbnails should be set at 55x55px
  • YouTube Image Sizes
  • Profile image - a square (1:1) 800x800px image, regardless of which profile image border style you pick Profile cover image - recommended to use an image with 16:9 proportions, dimensions 2560x1440px.
  • ProductHunt
  • Product Feed Thumbnail - recommended to use an image with square proportions with dimensions 240x240px. Animated GIFs are supported as long as they are under 3MB Gallery Images - for the product gallery it is recommended to use images with dimensions 1270x760px. Note that the first image of the gallery will also serve as the link’s thumbnail when sharing it through other platforms
  • TikTok Image Sizes
  • Profile picture - A square image with dimensions 200x200px minimum Video content - videos should be uploaded at 1080x1920px Video ads - these can be uploaded with a variety of proportions: 9:16 proportions recommended at 720x1280px, 1:1 square proportions at 640x640px, or 16:9 proportions at 1280x720px
    Press or drag images to start optimizing