Choosing the right image file type is one of the lesser-known aspects of building a well-optimized WordPress website.
Did you know there are actually many different image formats? Most people know about JPG and PNG but have you heard of SVG, BMP, or WebP?
All of these image formats have their own advantages and disadvantages. Deciding on the preferred format depends on a number of factors.
The image file format you choose can affect the performance of your website. Here are some ways that images impact your website.
The two most popular image file formats for websites are PNG and JPEG/JPG. According to w3techs, more than 75% of all websites use these file types. Around 59% of sites use SVG and 18% use GIF.
WebP, ICO, and BMP lag well behind in terms of popularity. These formats are much less widely used, but just because they aren’t used by many websites, doesn’t mean shouldn’t use them. More on this later.
Before discussing the different image file types, it’s important to understand image compression and the difference between raster and vector images.
When it comes to image compression, there are two kinds: lossy and lossless.
Lossless compression removes redundant data from an image. The entire file is reduced to save space. But lossless compression also tells the computer what was removed and how to reconstruct the image. Lossless compression reduces image size without losing quality.
Lossy compression, on the other hand, removes some of the meaningful data from an image. This results in a loss of quality. Images compressed by lossy compression lose some of their data for good. This means the original cannot be reconstructed.
The most popular image file types (JPEG, PNG, GIF) are all raster types. A raster image is composed of pixels that each have a fixed color, position, and size based on their resolution.
Raster images are static and the pixels are fixed. This makes it difficult to efficiently resize the image. If you scale it up, the pixels will be stretched to fit the space and the image will lose quality.
Vector formats do not use pixels. Instead, they are made up of lines and curves that can be scaled based on total area. This means you can enlarge images without any loss of quality.
JPG stands for “Joint Photographic Experts Group”. When you see a photo on a website or social media page, there’s a good chance it’s a JPEG file.
The JPG file type is good for photos, but not so much for graphics. JPGs save on a white background (not transparent). Although their file sizes are smaller than PNGs, they use lossy compression which means the quality will degrade the more times you edit and save the picture.
The PNG file format stands for “Portable Network Graphic”. Many images on the web are PNGs, especially graphics that need to retain a high level of detail, such as company logos.
PNGs are commonly used for graphics as opposed to photos. And they are the preferred choice for diagrams and illustrations. Unlike JPGs, PNG images are saved on a transparent background.
PNG also uses lossless compression, which means it retains more details than a JPG.
You know those annoying, animated loops that people love to post online? Those are GIFs. In fact, this is the only image file type that supports animation. GIF stands for “Graphics Interchange Format”.
GIFs have a limited color range and are best used for simple graphics. They use lossless compression and tend to be smaller than JPGs.
SVG stands for “Scalable Vector Graphic”. SVGs are vector images and use XML text to outline shapes and lines. This means you can scale them up or down without losing quality.
Vectors are best for simple graphics, shapes, and illustrations. SVGs are a good choice for logos, especially if you need your logo to be responsive. SVG is supported by most browsers including Chrome, Firefox, Edge, and opera.
BMP, also known as “Bitmap”, is an outdated file format. The disadvantage of BMP is that it uses little to no compression so file sizes can become very large.
BMP is supported by all major browsers. Stay away from using BMP images on your WordPress website as there’s really no reason to do so.
WebP is pronounced “Weppy” and is an image file format created by Google in 2010. WebP has a number of advantages including providing better lossy and lossless compression than JPG and PNG.
On average, WebP images have smaller file sizes than PNG/JPG formats and therefore take up less space on your server. This can help you save bandwidth and speed up page load times.
The WebP format is gaining popularity but it’s still not supported by all browsers. Later versions of Chrome, Firefox, Edge, and Opera all support WebP.
By default, WordPress only accepts popular image formats. This includes JPG/JPEG, PNG, GIF, and ICO. The ICO format is used for favicons.
You can still upload other image file types (such as SVG and WebP) but you’ll need to use a WordPress plugin to do so. SVG files are prohibited by WordPress by default because the XML markup used in these files can open up your site to security vulnerabilities.
If you want to use SVG files, make sure you create them using a reliable image editor. To use SVG files on your WordPress site, there are several plugins you can use. Two of the most popular are ‘SVG support’ and ‘Safe SVG’.
By default, WordPress does not support the WebP image format either. The reason for this is that a large proportion of internet users don’t use a WebP compatible browser.
But fear not! There is a way around this, too.
You can use a WordPress plugin that will convert your existing images to WebP and retain the original file to display on browsers that don’t support WebP. Plugins that offer this feature include Jetpack, as well as third-party plugins such as ShortPixel, Imagify, and Optimole.
Optimizing your existing images is important for reducing bulk and speeding up your website’s load time. Before uploading a new image to your media library, use an image editing program to compress it.
For example, Adobe Photoshop comes with the option to “save for web”. Selecting this option will automatically optimize your images for display on websites.
If you have a website with a lot of un-optimized images, then don’t worry. You don’t need to edit and reupload each one. Instead, you can use a WordPress plugin to compress the images automatically.
Some of the most popular WordPress image compression plugins include Imagify, WP Smush, and EWWW Image Optimizer.
Determining which image file type to use for WordPress depends on how you’ll be using your images. Your aim should be to use images with the smallest file size possible while retaining clarity and detail.
WebP provides the best of both worlds (small file size and good quality), but it falls short when it comes to browser support.
When it comes to photos, JPG is a solid option. For graphics and logos, PNG works well. If your graphics lose quality when displayed large, consider converting them to SVG.
Choosing the right image file type for your WordPress website depends on how you’ll be using the images. You also need to consider device and browser compatibility.
Building your first website with Weebly might have seemed easy at first, but now you find yourself running into functional limitations and problems. WordPress has caught your eye and you’re wondering if it might be […]
We all love a good GIF, but image formats have come a long way since the introduction of the GIF in 1987. Savvy web designers have moved on to embrace JPEGs, PNGs, and now WebP. […]
If you work on WordPress websites, you’re probably tired of telling clients or team members to refresh their browsers to see the changes you just made. And the reality is, a browser refresh might not […]