+ All Categories
Home > Documents > Pros and Cons for Each Type of Image Extensionsclassroom.kleinisd.net/users/0692/Chapter 3 Image...

Pros and Cons for Each Type of Image Extensionsclassroom.kleinisd.net/users/0692/Chapter 3 Image...

Date post: 28-May-2018
Category:
Upload: truongkien
View: 217 times
Download: 0 times
Share this document with a friend
13
motocms.com http://www.motocms.com/blog/en/pros-cons-types-image-extensions/ Pros and Cons for Each Type 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. ***
Transcript

motocms.com http://www.motocms.com/blog/en/pros-cons-types-image-extensions/

Pros and Cons for Each Type of Image Extensions

A proper image may better transmit an idea or a feeling than a hundred words and any designer is fully aware aboutthis fact. The modality of adding images into a project (no matter if it is a web layout, an infographic, a banner etc.) ismostly 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 makea brief idea about the quality and the originality of the images used.

***

***

***

***

***

***

***

***

***

Despite of that, there are some technical requirements that may limit the creativity of the designer. The first signrevealing 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 ofphotographers. 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 ofextensions doesn’t have as main purpose to confuse the designers! The image extensions may be regarded as tips tolet 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 youare a good expert, it won’t be a waste of time to refresh the acknowledge). Before digging deeper into what eachextensions supposes, we consider that is way better to have clear ideas about how the images are classified… Weare 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 imagelarger. It’s simple, a larger image means that each pixel is boosted and it automatically means a lower quality of theimage.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 constructionallows 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 lossyones 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, animage might have no information loss, but its size will be impressive and it won’t be a valid solution when addingonline. 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’sinacceptable.

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

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’tever ignore this aspect!

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

Extension: JPEG

Acronym: Joint Photographic Experts GroupType of image: rasterType of compression: lossyFeatures:– 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 renderthe 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

Acronym: Graphics Interchange FormatType of image: rasterType of compression: losslessFeatures:– 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 ofuniform colors.

Disadvantages:

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

Extension: TIFF

Acronym: Tagged Image File FormatType of image: rasterType of compression: usually, uncompressed but this format may be compressed in both formats (lossless but evenlossy)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 digitalcameras can’t store many images.

Extension: PNG

Acronym: Portable Network GraphicsType of image: rasterType 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

Acronym: Scalable Vector GraphicsType of image: vectorialType of compression: usually not compressed, but it may be compressedFeatures:– 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 totallyoutdated (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’tnecessary to have solid technical acknowledge, but surely, having a good grasp of image extensions may saveprecious 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.

inShare

Author: MotoCMS Editorial

Here are the official MotoCMS news, releases and articles. Find out the latest info aboutproduct, sales and updates.


Recommended