PNG, JPEG, TIFF – how to save my images?

    PNG, JPEG, TIFF – how to save my images?

    Banner creation, social media posts, newsletter images and website content – it’s important to deliver the best quality. That also means smaller file size, shorter page load time and metadata files for SEO. With this comes the question – how to save my images correctly? Are you using Photoshop most of the time? Here are few points that you probably come across very often but didn’t really know what they mean:

    New file – which resolution to choose?

    The best way is to use Photoshop “Presets”, i.e. the first drop down menu which appears when you hit “New” or command+N on a Mac (CTRL+N). Here, you can choose what type of file you need to create: whether it’s for print or for the web.

    Find "Presets" in New File Window in Photoshop

    When selecting an option, e.g. “Web”, the fields underneath fill in automatically, e.g. the standard sizes of ad banners come up as well:

    Choose different sizes for your banners

    What you can observe as well are the “Resolution” figures: 72 Pixels/Inch for the Web images and mobile devices and 300 Pixels/Inch for the print ads and photos. What does resolution actually mean? It’s the density of dots or pixels that make up a photo. The denser they are, the richer the picture and the “looser” they are from each other, the more blurry picture becomes.

    JPEG, JPG, JPEG 2000 or JPEG Stereo? What’s the difference?

    When hitting “Save As” on Photoshop, you come across a lot of image file formats that you can choose from. JPEG or JPG (they’re the same) stand for Joint Photographic Experts Group. Each pixel in the picture gets at least 24 bits of memory resulting in images incorporating 16.8 million colors. This means if your image requires at least 256 colors, it’s a good format for saving it. JPGs also compress data quickly and the file size is smaller. This means it’s a great format to share via e-mails but not the best quality piece if you want to print e.g. a billboard.

    The image will look very blurry as a result of loss of pixels.

    What is the difference between JPEG, 2000 and Stereo? JPEG 2000 enables you to further compress the image file, resulting in lower quality of the image. The lack of support for this format from various online programmes also makes it an unattractive choice for marketeers, but from a technological point of view it’s more desirable. JPEG Stereo is used for 3D imaging.

    BMP, PNG or TIFF?

    The World Bitmap, or BMP, are uncompressed, large images full of rich colors. Because they’re pixel-rich images, when resizing them, the pixels are automatically resized too resulting in very blurry images. They’re not particularly good for online images.

    PNG (Portable Network Graphics) are on the other hand, very online friendly! They store a description of image’s content, making it SEO ready.

    The images saved in PNG support image transparency, making it an attractive format for logos or text images. I wouldn’t save big photos in PNG as there are better formats out there (with smaller file size options). When saving in Photoshop, there are two PNG options (8 and 24). PNG-8 is great for smaller images (where images require 256 colors maximum). If your image requires limitless colors, go for PNG-24 option.

    Screen Shot 2015-08-09 at 20.37.07

    When hitting “Save for Web” option in Photoshop, a separate window shows up. Take a look at the tabs displayed in the upper left corner – Original/Optimized/2-up/4-up.

    Take a look at the 4-up split up window and it will show you a preview of your image in different quality image options. Handy huh?

    Screen Shot 2015-08-09 at 20.37.52

    TIFF (Tagged Image File Format) is a flexible, adaptable file format for handling images and data within a single file, by including the header tags (size, definition, image-data arrangement, applied image compression) defining the image’s geometry. They are perfect if original images are saved in TIFF format, so that you can start working with them on your banners or social posts.

    Once saving them for editing, they have no compression artifacts, so no quality is lost in the process. I would definitely recommend this format for printing out large images. Disadvantage? They’re very rich files and hence very big – also, many platforms because of that, don’t support this format when you want to upload something.

    What does GIF mean?

    GIF stands for Graphics Interchange Format and can display images in HTML on the web. They only display images that require up to 256 colors, so they’re not ideal for rich images, but rather vectors, icons or logos.

    A PNG-8 version is thus similar to GIF format. What is the major difference then? GIFs are mainly used for animated images, hence very useful in display advertising, newsletters and nowadays – in social media.

    Should I use PDF?

    Yes, if you’d like to showcase or print material, not re-use it or archive it. This option is usually best to use when saving artwork for printers or manufacturers, alongside the TIFF or PNG files. Adobe also claims that this format works best with new Retina displays in Apple machines.