Which is the best for mobile elements? JPEG, PNG, GIF or SVG

Angga AE
3 min readJul 17, 2017

--

An image is a picture that has been created or copied and stored in electronic form. An image can be described in terms of vector graphic orraster graphic An image stored in raster form is sometimes called a bitmap. An image map is a file containing information that associates different locations on a specified image with hypertext links.

Here are some advantages and disadvantage of JPEG, PNG, GIF, and SVG.

  1. JPEG

JPEG is a graphic image file produced according to a standard from the Joint Photographic Experts Group, an ISO/IEC group of experts that develops and maintains standards for a suite of compresion algorthms for computer image files. JPEGs usually have a jpg file exstension.

Advantages :

  1. Easy to implement
  2. 16 million color combination
  3. Easy to build
  4. Suitable for full-color realistic images
  5. stable for any browser

Disadvantages :

  1. Large file format
  2. Lossy Compresion
  3. does not work well on line drawings
  4. Not scalable
  5. not supports different levels of transparency.

2. PNG

Potable network graphics is a raster graphic file format that support lossless data compresion. PNG was most effective than JPEG for web element. Mostly developer or designer use PNG for web element, because PNG use data compressin alogortm make PNG is data lossless and file.

Advantages :

  1. support color management thourg the inclusion of ICC color space profiles.
  2. support different level of transparacey
  3. non-patended lossless data compression
  4. allows a clearer low- resolution image to be visible earlier in the transfer
  5. lossless compression format
  6. PNG supports metadata

Disadvantages :

  1. does not support animation
  2. does not support color corection
  3. can’t be embedding exif

3. GIF

example gif color

GIF images are compressed using the Lempel–Ziv–Welch (LZW) lossless data compression technique to reduce the file size without degrading the visual quality. GIF file describes a fixed-sized graphical area (the “logical screen”) populated with zero or more “images”. Many GIF files have a single image that fills the entire logical screen.

Advantages :

  1. lossless compression
  2. more Interactive than png or jpg

Disadvantages :

  1. limited color 256 color
  2. large file.
  3. limited to implement on web or mobile
  4. not scalable

4. SVG

Scalable Vector Graphics (SVG) is the description of an image as an application of the Extensible Markup Language (XML). Any program such as a Web browser that recognizes XML can display the image using the information provided in the SVG format.

Advantages :

  1. SVG drawings can be dynamic and interactive.
  2. lossless data compression

Disadvantages :

  1. Hard to make
  2. not all device can read svg

My answer is…

There is nothing better or worse between jpg, png, gif, or svg.

All files depending on the file function if need for icon use svg or png. I do not mention that svg is better to be used as background in an app but when a user logs in an application and it takes a very long load because the file is too big then it will reduce the point value of your application. Use the appropriate file source for your application in accordance with the function.

--

--