How to use pngs, svgs, gifs, jpgs, pdfs and mp4s

Let’s learn about six common image file formats and the different content-types that they each support, such as images, video, and text. I briefly describe each of these files, list the pros and cons of each, and where the particular file format is best utilized.

Pretty soon you’ll understand the differences between these six common image file formats and you’ll know which one to use for all of your digital needs.

6 common image formats: how to use them

JPEG, JPG (Joint Photographic Experts Graphics)

JPG’s are the most common of the six common iamge file formats out there. Digital cameras use the JPG file format, and internet images are displayed using this format as well. This file format is based on “Lossy Compression”, meaning that it keeps only the visible information and discards any information that our eyes can’t actually see. JPG’s popularity comes from its ability to load fast on any platform while maintaining good quality, and because it can be viewed on any type of device. The downside is that any time a JPG image is saved, (basically re-compressing it each time), it loses quality and becomes grainy or pixelated.

PRO’s: lightweight and view-able on almost any device without special programs or viewers.
CONS: loses quality when saved repeatedly.
Best for: web design, social platforms, and portfolios.

PNG (Portable Network Graphics)

A PNG is a high-quality image file format, based on “lossless compression”. PNG has the ability to retain the original sharpness and color of the saved image, and it supports transparent backgrounds, which is great for displaying logos or when using an image on a patterned or colored background. They’re a larger file format and use more storage space then JPG’s, so they take more time to load.

PROS: high-quality, support transparent backgrounds.
CONS: heavyweight, longer loading time, takes up more storage.
Best For: logos, websites photos, profile pics, posts, covers.

GIF (Graphics Interchange Format)

GIF, for many of us, means animation. GIF’s are made of pixels, just like JPEG’s and PNG format types, but GIF’s are based on the “LZW (Lempel-Ziv-Welch) compression”, which is also a type of lossless compression. GIF is best for images that contain fewer colors, like diagrams, and shapes. GIF’s also support transparent backgrounds.

PROS: basic animation, transparency.
CONS: poor gradient color display. Not good for multi-color images.
Best For: short animations on social media.

PDF (Portable Document Format)

PDF’s are used for online documents. The PDF format was created by Adobe so that files could be opened and displayed without losing their original formatting or design. Photos, images, videos, audio files, interactive elements like forms or buttons, as well as text, can all be included inside a PDF file. PDF’s can be created in Adobe products like Acrobat, Photoshop, Illustrator, and Indesign, as well as with Google Docs, Microsoft Word and many others. To view PDF’s, you need to have a reader program (special software) installed.

PROS: keeps formatting and design of the original document.
CONS: need PDF Reader to view.
Best For: online forms, documents and printing them.

SVG (Scalable Vector Graphics)

SVG is a format for saving and displaying “vectors”, which are digital illustrations made with geometric shapes and created with “vector illustration software”. SVG’s look very clean and professional and can be displayed on all web browsers. They’re a good format for printing because they maintain their high quality when resized. It’s a good idea to save logos and other visual business resources as an SVG file as well as other formats like PNG and JPEG.

PROS: doesn’t lose quality when resized.
CONS: SVG’s aren’t supported by social media.
Best For: web design, illustrated business resources like logos, icons, diagrams.

MP4 (Moving Picture Experts Group)

Of the six common image file formats, MP4 files are video files that may also contain audio data and/or text subtitles. MP4’s are lightweight and can be uploaded quickly to websites or social media networks. They can be played on media players or streamed over the Internet, without the need to use a special application or program.

PROS: lightweight, plays on all common media players, streams online.
CONS: none.
Best For: websites and social media.


[email protected]

My Contact Page

Other articles you might like:

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

-10 Things to Do After Creating Your Website


About the author

diane-author-300x181 How to use pngs, svgs, gifs, jpgs, pdfs and mp4s

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Read more

filetypes How to use pngs, svgs, gifs, jpgs, pdfs and mp4s
Article Name
Six common file formats and how to use them
Learn about six common file formats and the different content types they support: images, video, and text.
Diane Metcalf
Image and Aspect