https://blog.superhosting.bg/en/image-formats-in-web.html

Press enter to see results or esc to cancel.

SuperHosting.BG Blog

Most Used Image Formats on the Web

2016-07-20
For your website
image formats, png, png-8. png-24, jpg, jpeg, svg, raster, vector, web images, animations, web design, graphic design, gif, compression, smaller images size

One of the freshest web design trends  is using quality, large images as backgrounds or parts of the content. Images do not only enrich your website’s appearance, but tell stories and help visitors get oriented through content. They build your brand identity.

What is Important to Know about Your Website’s Images?

There are two main types of image files: raster and vector. The raster image is a dot matrix data structure which represents a grid of pixels or points of color. That’s why when such an image is enlarged you may see lots of tiny squares called pixels.

Information on vector images is stored as curves and vector functions. Zooming in and out does not influence quality which means that you might scale vector images to any size without getting pixelated and loosing quality.

01-Vector-vs-Raster

Which are the Most Common Types of Image Formats around the Web?

JPEG/JPG  (Joint Photographic Experts Group) – Raster Format

JPEG is the most widespread image format. This file type enables you to compress size allowing JPEG images to load quickly on the Web. JPEG supports 16 million colors which makes them a perfect choice for digital photography.

If your JPEG file is larger than necessary, you can easily compress it. There is a lot of free online and offline software that can enable you resize images. You can opt for compression ratio and balance in quality and file size (scalability). The common image scaling is as follows: 80-100% – high quality; 60-80% – medium quality; below 60% – low quality. Compression below 51% leads to considerably worse image quality and a big difference when compared to the original.

02-JPG-Compression

JPEG is the Best File Format for Photos.

  • small size
  • rich colors
  • no transparency
  • no animation
Fun fact: One of the JPEG format versions – JPEG 2000 offers the transparency option, but it is not really supported on many applications and it is still very rarely used.

GIF (Graphics Interchange Format) – Raster Format

The GIF format is used for creating tiny, short animated images. It allows a separate palette of up to 256 colors for each frame which makes the GIF well-suited for graphics or logos, but less suitable for reproducing color rich photographs. Unlike JPEG, GIF supports transparency. This enables you to put the GIF over other elements of your website and avoid their overlapping.

GIF is the Best File Format for Animated Images.

  • small size
  • animation
  • transparency
  • only 256 colors

PNG (Portable Network Graphics) – Raster Format

PNG was developed to build upon the purpose of gifs. There are two types of PNG files – PNG-8 and PNG-24. We decided to focus your attention on the second type, since the first one supports only 256 colors and we do not recommend it so strongly. PNG-24 offers a range of attractive features such as color depths, support for sophisticated image transparency and higher quality than GIF. It is suitable for painted images, navigation buttons and logos. Due to the high resolution and rich color palette the file size is unsuitably large and may lead to difficulties with your website’s proper functioning.

PNG File is the Best File Format for Painted Images.

  • transparency
  • rich colors
  • large file size
  • no animation

03-Transparency

SVG (Scalable Vector Graphics) – Vector Format

One of the most noticeable web trends in 2016 is wider use of SVG. SVG is a vector-image format unlike JPEG, GIF or PNG. This makes it great for responsive design websites since the image looks equally good on different screen resolutions across devices.

SVG enables you also to create custom animated images. What is more, you can make interactive animation by integrating Java Script so that your website visitors trigger animations when clicking or performing other actions.

SVG was developed by W3C (World Wide Web Consortium) and is supported on most web browsers.

SVG is suitable also for the new retina displays which reproduce high quality images.

  • small size
  • quality with all types of resolution
  • interactive format
  • can not be used for photos
  • still not popular format
Fun Fact: If you open an SVG file in a Text editor, you may notice that it consists of easily recognizable code which enables you to quickly modify image elements.

QA: There is a number of online and offline programs that might be very useful for image processing. Some of these are:

  • ImageAlpha – PNG image minifier (including transparency) (freeware, available only for Mac OS);
  • JPEGmini – for reducing JPEG image size (paid software);
  • Kraken – JPEG image optimization and compression (free and paid version);
  • PIXLR – online photo editor for adding creative effects or compressing images (freeware).

Marketing Specialist

Tsvet knows how hard it seems to create a website and how easy it tuns out. Tsvet's SuperPower is that she knows what questions bother the beginners in web and can answer each one of them.

500px270px
SuperHosting.BG

Related Posts

Leave a Reply

1 Comment on "Most Used Image Formats on the Web"

Notify of
avatar

Alex
Guest
14 June 2016 10:00

May I also suggest this service as an easy & free way to quickly optimize images?
https://shortpixel.com/online-image-compression

wpDiscuz