Pros and Cons for Each Type of Image Extensions

MotoCMS Editorial 16 July, 2013 8,242

Pros and Cons of Image Extensions

A proper image may better transmit an idea or a feeling than a hundred words and any designer is fully aware about this fact. The modality of adding images into a project (no matter if it is a web layout, an infographic, a banner etc.) is mostly an art and only by getting more experienced someone will find the proper solution.

Fortunately, our templates are created using only top of the crème images; enjoy the below screenshots just to make a brief idea about the quality and the originality of the images used.

***

Quality Images Used in Web Design

***

Best Images Used in Web Design

***

Beautiful Images in Website Creation

***

Quality Images Used for Website Creation

***

Quality Images Used for Website Creation

***

Quality of Images for Website Creation

***

Quality of Images to Create a Website

***

Types of Images One Should Use in Websites

***

Image Dimensions for Website Creation

Despite of that, there are some technical requirements that may limit the creativity of the designer. The first sign revealing these requirements is connected to the many image extensions: we have .psd while working in Photoshop, .ai in Illustrator, .gif items when adding small animations and of course .jpeg when admiring the works of photographers. Won’t be a better idea to have a single format and let the creativity work without any limitations?

Well, it’s a very slight change to ever have a single type of image extension. Paradoxically, the huge number of extensions doesn’t have as main purpose to confuse the designers! The image extensions may be regarded as tips to let the user know which their best is and which arethedownsizes.

If you aren’t too keen to what suppose the most important extensions, then this post is for you (of course, even if you are a good expert, it won’t be a waste of time to refresh the acknowledge). Before digging deeper into what each extensions supposes, we consider that is way better to have clear ideas about how the images are classified… We are almost sure that you heard about raster or vector images, isn’t it?

1. Raster vs. vector

Raster images are composed from small points called pixels. A medium image is formed from millions of pixels. Having so many pixels it’s impossible not to have a clear image, but the biggest downside is making a raster image larger. It’s simple, a larger image means that each pixel is boosted and it automatically means a lower quality of the image.
A vector image manages to resolve this aspect: these types of images are created from curves and lines. Representing an image function of lines and curves is mostly about math and honestly, I can’t describe the process. Anyway, I bet that you are also not interested in the mathematical method; what really matters is that this construction allows full scalability of the images. Unfortunately, vector images make it harder or impossible to add some effects.

2. Lossy vs. lossless images

Depending on the type of data compression, there are two distinct formats: lossy and lossless images. The lossy ones are images that are discarding a specific percentage of information; there are various methods allowing a scale of losing information. It’s obvious, the more information is lost, the less accurate the image is. Yeah, it’s true, an image might have no information loss, but its size will be impressive and it won’t be a valid solution when adding online. A bigger image size takes more time to upload and usually people don’t have the patience to wait for a “lazy” website to fully be rendered. More pragmatically, a longer upload time is almost equivalent of a traffic loss and it’s inacceptable.

Well, the good news is that the most important content management systems are created to offer many solutions when dealing with images. You are free to try our CMS and by sure you will be delighted by the endless possibilities of manipulating images.

Try MotoCMS Free for 30 Days

Much more, beside usual transformations, adjustments or effects, you may even optimize the images with Moto CMS. No matter the extension type, an optimized image is vital in having a search engine friendly website; therefore don’t ever ignore this aspect!

Now, it’s time to dirty our hands with what each important extensions type supposes!

Extension: JPEG

Jpeg Extension Advantages and Disadvantages

Acronym: Joint Photographic Experts Group
Type of image: raster
Type of compression: lossy
Features:
–    It is a very common extension, it is the main solution for photographies and web usage;
–    It’s developed a lossless compression for JPEG images but it’s not supported in most products.

Advantages:

–    It’s supported by all operating systems;
–    A very good solution when you need to take a special care of the color details;
–    The most common extension, it’s supported by all cameras, photo printers or editing software;
–    The size/quality ratio is satisfactory.

Disadvantages:

–    It’s not suitable for logos, iconic graphics or everything similar due to the compression algorithm: it doesn’t render the sharp contrasts well;
–    It doesn’t support animation;
–    It’s not recommended to save a JPEG image multiple times; each new save means the information discard.

Extension: GIF

Gif Image Extension Advantages and Disadvantages

Acronym: Graphics Interchange Format
Type of image: raster
Type of compression: lossless
Features:
–     according to Wikipedia, the word “gif” was originally recognized as noun and verb (meaning to make a gif);
–    .Gif extension was released by CompuServe and these types of images were used on the first websites.

Advantages:

–    Gif compression assures a very small size of the images;
–    It supports animation effects;
–    It can support transparency;
–    Gif format is the best for buttons, navigation menus, icons, graphic texts etc;
–    It is the best for images that contain few colors, monochromatic ones or for images that contain large portions of uniform colors.

Disadvantages:

–    Gif images support only 256 colors; due to this fact it is highly recommended to avoid this format for colorful images;
–    There are newer image formats that may better substitute the “old gif”.

Extension: TIFF

TIFF Extension Advantages and Disadvantages

Acronym: Tagged Image File Format
Type of image: raster
Type of compression: usually, uncompressed but this format may be compressed in both formats (lossless but even lossy)
Features:
–    .tiff format was developed by Aldus, but the patent was acquired by Adobe Systems in 2009;
–    A very good solution for scanning or fax machines.

Advantages:

–    .tiff format isn’t compressed and it means that no data is lost;
–    The images are accurate and high quality.

Disadvantages:

–    It’s still not supported everywhere;
–    The size of the images is incompatible with web usage;
–    Due to the bigger size there are some other negative consequences: it’s harder to email a tiff image and the digital cameras can’t store many images.

Extension: PNG

PNG Extension Advantages and Disadvantages

Acronym: Portable Network Graphics
Type of image: raster
Type of compression: lossless
Features:
–    it is considered as a replacement for gif. format;
–    png. files are better for preserving the color information than gifs.

Advantages:

–    using a lossless method of compression, png. images don’t discard any containing information;
–    Compared to gifs, the transparency is better realized;
–    It allows animations (in fact two variants of png. format: MNG, which stands for Multiple-image Network Graphics, and APNG which stands for Animated Portable Network Graphics).

Disadvantages:

–    Not widely supported, but there are efforts for better sustainability;
–    For larger images is better to save them as JPEG because of the big size.

Extension: SVG

SVG Image Extension Advantages and Disadvantages

Acronym: Scalable Vector Graphics
Type of image: vectorial
Type of compression: usually not compressed, but it may be compressed
Features:
–    it is developed by World Wide Web Consortium;
–    This format defines the images using XML;

Advantages:

–    It doesn’t lose information if the image is scaled/zoomed;
–    SVG images may be printed at high quality;

Disadvantages:

–    Not widely supported.

***

The Internet is full of other interesting image extensions and it won’t be a surprise if next year this article will be totally outdated (which we hope it won’t be) or other type of extensions will be on top. It’s true that for a designer it isn’t necessary to have solid technical acknowledge, but surely, having a good grasp of image extensions may save precious time when working on various projects. It will be great to see your comments and ideas shared with us, therefore use the comment form; we can’t wait for your feedback.

Author: MotoCMS Editorial
Here are the official MotoCMS news, releases and articles. Find out the latest info about product, sales and updates.