There’s so many image types nowadays that it can be hard to understand which one does which and which one to use on your website. Understanding image formats and what they bring to the table can help you when preparing images for your site. To keep the technical jargon to a minimum, we made an easy to understand list of most commonly used image formats.
1. The JPG (also JPEG)
The universal standard for images, JPEG files are compatible across devices and hold pixels in varying resolutions. These images are considered a “lossy” filetype and will lose pixel definition every time the image is saved. We can generally keep JPG file sizes fairly small making them lightweight when it comes to loading times.
2. The PNG
As an upgrade to the JPEG file system, PNG files also contain pixels in varying resolutions, however, they also carry additional information than their counterpart. These file types carry a transparency value that allows cutouts that are great for logos and unique shapes. PNG files are also considered “loss less” meaning they don’t lose pixel quality when saved. Because of this, png files are typically larger in file size.
3. The SVG
Unlike JPEGs and PNGs, SVG files are not composed of pixels at all! Rather, think of SVG files as a set of coordinates that make up the pieces of the image. Because it is not limited to a set number of pixels bounding the image, it can be scaled up and down without loss of quality. SVG files can be great logos, icons, and other shapes.
4. The HEIC
You may have noticed these files when scrolling through photos on your phone. Particularly with iPhone users, Apple employs a proprietary file type that helps reduce file size when saved on your phone, helping you keep more photos at once. While these files can be opened on a MacBook, they will be more difficult to manage on a Windows device. Typically, we’ll convert these to a more standard format before use on a website or social media.
5. The WEBP
Similarly to the HEIC format, WEBP images were created by Google with efficiency in mind. With use only on the web, WEBP files can be smaller and lightweight and support transparency and animation (similar to a gif).
With this simple little guide to image formats, you’ll be on your way to adding images in no time. Have a question about your images and how to convert them if necessary? We’d be happy to help advise you with any image questions you may have.