{"id":14708,"date":"2020-04-29T13:43:41","date_gmt":"2020-04-29T11:43:41","guid":{"rendered":"https:\/\/skynific.com\/portfolio-items\/image-formats-jpeg-png-gif-tiff\/"},"modified":"2020-04-29T13:43:43","modified_gmt":"2020-04-29T11:43:43","slug":"image-formats-jpeg-png-gif-tiff","status":"publish","type":"avada_portfolio","link":"https:\/\/skynific.com\/en\/portfolio-items\/image-formats-jpeg-png-gif-tiff\/","title":{"rendered":"Image Formats – JPEG, PNG, GIF, TIFF"},"content":{"rendered":"

<\/div><\/div><\/span>

Image Formats – JPEG, PNG, GIF, TIFF<\/h1><\/h1><\/span>
<\/div><\/div><\/div><\/div><\/div><\/div><\/div>

JPEG, PNG, GIF, TIFF, … there are so many image formats. But when is which image format suitable? You want to ensure the best possible picture quality on all channels and devices without compromising quality or loading time. What format should you use, for example, for a logo or print publication? What are the advantages and disadvantages of all these image formats? What is the difference between raster and vector graphics? We will answer all these questions in this article.<\/strong><\/p>\n<\/div>

\"\"<\/a><\/div><\/div>
\"\"<\/a><\/div><\/div>
\"\"<\/a><\/div><\/div>
\"\"<\/a><\/div><\/div>
\"\"<\/a><\/div><\/div>
\"\"<\/a><\/div><\/div>
<\/div><\/div><\/div><\/div><\/div><\/div><\/div>

Comparison of the most important image formats<\/span><\/h2>\n<\/div>

Below you will find our list of the 11 most popular image formats and their best use. But here is a short overview for those who are in a hurry.<\/p>\n<\/div>\n

\n\n\n\n\n\n\n\n\n\n
<\/th>\nVector \/ Pixel<\/th>\nCompression<\/th>\nPro<\/th>\nContra<\/th>\nApplication<\/th>\n<\/tr>\n<\/thead>\n
JPEG<\/td>\nPixel<\/td>\nWith loss<\/td>\nThe JPEG image format is supported by all operating systems. It is one of the most widespread image formats. The image quality to file size ratio is good.<\/td>\nJPEG does not support transparency or animation. In addition, there may be a loss of quality after multiple storage.<\/td>\nSize and detail of images for sending, saving or uploading to websites<\/td>\n<\/tr>\n
GIF<\/td>\nPixel<\/td>\nWithout loss<\/td>\nThe GIF format has a very small file size. It also supports animations.<\/td>\nThere are better and newer image formats available today. Furthermore, only 256 colors are supported.<\/td>\nWebsites, chats, buttons, navigation menus, icons and graphical texts<\/td>\n<\/tr>\n
PNG<\/td>\nPixel<\/td>\nWithout loss<\/td>\nThe PNG format supports the alpha channel for transparency. This is newer and more modern than the GIF format. In addition, compared to other image formats, the image format does not discard information when saved again.<\/td>\nThe biggest disadvantage is the file size. In comparison to the JPEG format this is huge. Moreover, the format is not supported everywhere.<\/td>\nIcons, transparent or semi-transparent areas in images or logos – this again especially for websites.<\/td>\n<\/tr>\n
TIFF<\/td>\nPixel<\/td>\nNormally not compressed: without loss.
\nBut if compressed: with loss<\/td>\n		No loss of quality because not compressed. High quality and accuracy. Channel transparency is also supported as well.<\/td>\nThe format is not supported everywhere and it is not compatible with web browsers, which prevents it from being used on web pages. In addition, the file sizes are very large.<\/td>\nPrint<\/td>\n<\/tr>\n
SVG<\/td>\nVector<\/td>\nWithout loss<\/td>\nThe SVG format offers a very high quality. By using vectors there is no loss of quality after scaling or zooming.<\/td>\nNeeds special software for editing or HTML knowledge.<\/td>\nPrinting, logos and for websites.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div><\/div><\/div><\/div>

Lossy and lossless compression<\/span><\/h2>\n<\/div>

Some properties of image formats<\/strong> with terms like “lossy and lossless compression” or “raster” and “vector” may sound unfamiliar to you. So the first thing we’ll do is explain to you what this is all about. Compressing files saves a lot of storage space and also makes it easier to share files. Which file compression you should use depends on whether you want to keep the original data of a file.<\/p>\n<\/div><\/div><\/div>

Lossy compression<\/strong> means that data is partially removed from the image or information about pixels is reduced. The colors are then recalculated by a mathematical formula. There may be a visible loss of quality. But often the image quality does not play a very big role – e.g. on social media, where the images are only flown over anyway.<\/p>\n<\/div><\/div><\/div>

Lossless compression<\/strong> maintains image quality while attempting to preserve the small file size. It groups all pixels into the same color category, which facilitates indexing, and often removes the meta data of an image.<\/p>\n<\/div><\/div><\/div><\/div><\/div>

So when do you need a lossy – and when a lossless compression?<\/h4>\n<\/div>

If you don’t mind losing part of the quality of the file to save disk space, choose an image format<\/strong> with lossy compression. If saving disk space is not your priority and you want to keep your file in its original state, choose lossless compression.<\/p>\n<\/div><\/div><\/div><\/div><\/div>

Image formats with vectors and rasters<\/span><\/h2>\n<\/div>
\"Raster<\/span><\/div><\/div><\/div><\/div>

Image formats with raster<\/h3>\n<\/div>

Raster images are composed of a series of pixels or individual blocks to create an image. JPEG, GIF and PNG are all image formats with raster image extensions.<\/strong> Due to their defined size, pixels have a fixed share of the image. If you now enlarge or distort an image, the pixels are stretched to fill the space. This distorts them, resulting in blurred or unsharp images.<\/p>\n

<\/div>\n

To maintain pixel quality, you cannot resize raster images without affecting the resolution. It is therefore important to remember to save raster files exactly in the dimensions required for the application. Of course you can always save the image in a smaller size (but in the same image format) without quality loss. However, enlarging does not work without noticeable loss. I’m sure you’ve noticed that before.<\/p>\n<\/div><\/div><\/div>

Vector Image Formats<\/h3>\n<\/div>

Vector images are much more flexible image formats. They are built from proportional shapes and not from pixels. EPS, AI and PDF<\/strong> are perfect for creating graphics that require frequent resizing. Your logo and brand graphics should have been created as a vector and you should always have a master file to hand. The true beauty of vectors lies in their ability to change size at will. As small as a stamp or big enough to fit on a house wall. Everything always in the same high quality.<\/p>\n

If you’re not sure if you have a vector version of your logo, here’s a little trick for you: call the company that printed your business cards or the supplier who embroidered your logo on a shirt. They often still have a vector file of your logo that they can send you for your records.<\/p>\n<\/div><\/div><\/div>

High versus Low Resolution<\/span><\/h2>\n<\/div>

Have you ever heard a designer talk about DPI or PPI? DPI stands for “dots per inch” and PPI means “pixels per inch”. These units of measurement are essential for determining whether the density of pixels in an image is appropriate for the application you are using. The most important thing to consider when determining the required DPI or PPI is whether you are using the image for print or web<\/strong>.<\/p>\n