Webdroid Report

Web Friendly Image Formats

When developing websites, it is important to know the difference between different image file types to give your website the best functionality. Sometimes a .png image is necessary, other times, a .tiff file maybe necessary, and sometimes a good old .jpeg image will do the trick. But what is the difference between all of these file types and when are the appropriate times to use them? Find out below! 🧿💭

A native file type is a .PSD which stands for Photoshop Document which is only created by Adobe Photoshop. It retains all information about the file including layers. This is the layers that an edit contains which makes up the image. This is pivotal for web design and development because of copyright issues, if you have your own native file that you created you won’t need to use anyone else’s. 

.tiff Stands for Tagged Image file format which are best for high quality images and prints. They were introduced and created by Aldus Corp. in the 1980s and has been used for prints since it has been established. In more recent years in web development and design it has been established as a common data type which can be opened on web browsers on IOS and android and Adobe Photoshop, CorelDRAW, and Windows Photos. Recommended to be used when you want to optimize the quality of an image. Tiff files are not lossless, they do not compress data in the image but they do use a lot of data, so use them sparingly in your web design and development project.

JPEG stands for Joint Photographic Experts Groups. They are lossless files, which means that this file format is used to compress web images to create smaller file sizes. JPEG images are great if you want to get rid of unnecessary data to create a smaller file size for the image. They are great for compressing complex images into a smaller package. This is what makes .JPEG images a staple for both web development and web design. Most images online have multiple layers and need to be compressed which is why it is very common to see .JPEG images used commonly in web design and development.

.gif stands for graphics interchange format and are limited to only 256 colors and allows for transparency; they also can be animated. They’re known for the string of images it uses to create motion and animation, this is what separates this file type in web design. They can be used to capture the viewer's attention while on your web page and add some variation to your web design project. It’s not so much for portraits or images in general where color variation is important because of its 256 color limitation. 

.Png stands for portable network graphics and they’re lossless. PNG files were created to include 16 million color variations, so they are best for web design projects where nuanced colors are needed. They also allow for transparency which is important when creating web design & development projects. Often you need to include logos, infographics, and other image files that need to be transparent so .PNG files would be your go-to for all of your web design and development needs. This site format type was created as a better alternative in the early stages of web development when use of .GIFs were limited due to it being copyrighted and requiring permission to use.

By Johnnie Hornsby - Web Development Specialist

Johnnie likes to spend her time learning and building her foundation for back-end web development. Cyber security foundations, Linux, Python, and more. Her main goal is to first become a full stack software engineer.

read More from