We’re back with Education with Emily! Today I’m going to talk about four types of images and when to use them on your website. Unfortunately, I see the wrong type of image being used on websites all the time, so It’s important to know how to find the extension on your image and use it correctly!
1. JPG (also seen as JPEG)
Jpg images are probably the most common type of image. Taking a photo with your camera or your phone will most likely be saved in a jpg format. Jpg images are considered “lossy” images because every time you save them, they lose a bit of data and become ever so slightly more pixelated. Jpg images are best when the photo needs to be hyper-realistic. A photo of a car, house, or person would usually be best in a jpg format.
2. PNG
Png images are also a very common image type. The main difference between jpg and png images is that png images are lossless. Additionally, they support transparency. Png images make great logos and can be great for product photos where the item needs a non-distracting background. I also like to use them as accents throughout the site when I need a subject on an alternate background.
3. GIF
(are you team soft G or hard G?)
Although I prefer using jpg or png file types for my designs, gifs are very popular on the web. As you are probably familiar, gif images support animation, making it the popular choice for memes. I also think using gifs is really useful when explaining a process, or in a blog post!
4. SVG
Although less popular online I always get excited when I get to use an SVG. Let me tell you why. SVG files are lossless and support transparency, but more importantly, they can be scaled infinitely! SVG files don’t have any pixels, instead, they are a set of coordinates that make up paths. These paths can be interpreted by browsers to display at any size without any pixelation. This makes them an excellent choice for logos as they are usually more simple in nature. They always appear very sharp and crisp.
Knowing the right image type for the right image on your site can make a big difference. So get out there and make good decisions about the images on your website!