If you have been running a WordPress site for a while, you’re probably wondering which image file type is the best for your website. Should you use JPG or PNG? Perhaps you want to use a different image file type such as WebP but aren’t sure what to do. If that’s not it, maybe you’d like to upload a PSD, AI, or INDD image and are stuck.
No matter why you’re here, today’s post will help you choose the right image file type for your WordPress website. Why is choosing the right image file type necessary? We cover that too in the post. On top of that, we highlight the accepted image file types, how to add other file types and touch on a couple of WordPress image best practices.
If that sounds great, let’s weigh anchor and set sail since there’s a lot to learn.
Why is it Vital to Choose the Right Image File Type?
Choosing the perfect image file type is harder than you thought, and I get it. But you must pay close attention to the file type you use since it correlates with the performance of your website. So, why is it important to consider the image file type you choose?
- Speed & performance – Some image file types take up more space than others. If you use large image formats, you slow down your website and rack up server expenses. Go for light images that guarantee better page speeds and performance for optimal user experience (UX).
- SEO score – Did you know page speed is a direct SEO ranking signal? If you use heavy or low-quality images on your website, you are missing out on better UX and related SEO benefits. Choosing high-quality and SEO-ready images prime your pages for better SEO scores.
- Aesthetics – Some image formats preserve details better than others, even after compression. You want an image format that looks great for that polished, high-quality, and professional look ? Each image format is perfect for a particular use, so choose wisely.
- Responsive design – Nowadays, users visit your website on a variety of devices with varying browsers and screen sizes. You need to go for responsive image file types that are supported in a majority of browsers. On top of that, you need images that look amazing on a variety of screens. More about this later.
- Consistency – For consistency’s sake, we suggest sticking to one main file type for your images. You can use other file formats on an on-demand basis or depending on your needs, but one or two formats should be plenty.
That aside, let’s talk about available image file types.
Available Image File Types
Hidden from many beginners is the fact that there is a world of image formats out there. Yap, there are hundreds of image file types that we would need an eBook to cover them all. Don’t worry, though; we only focus on image formats that are perfect for WordPress websites.
Image formats are classified into two broad categories: Raster and Vector images.
Raster images are constructed by a series of pixels to form an image. For this very reason, raster images usually lose their resolution when compressed or stretched-out. The three popular image formats – JPG, PNG, and GIF – are raster images, which makes up the bulk of all the photos you see online.
Vector images, on the other hand, are constructed using mathematical formulas rather than pixels, meaning they are more flexible as far as frequent resizing goes. Popular vector image types include Adobe’s EPS (Encapsulated PostScript), SVG (Scalable Vector Graphics), PDF, WEBP, and Adobe Illustrator’s AI format, among others.
For regular website use, go for raster images. At the same time, you can create vector images of your logos and other images that require frequent edits and resizing. Ideally, you should convert all vector images to raster images before using them on your WordPress website.
Why?
Because raster images are lighter and supported by all browsers, you should go for either JPG or PNG. If you need animations, you have the GIF format. Now, we are down to just three out of the hundreds of image formats out there.
That begs the question: But which image file types does WordPress support?
Accepted Image File Types
According to the Codex, WordPress accepts JPG, JPEG, PNG, ICO, and GIF image formats by default. If you’re confused, JPEG is just JPG, and ICO is the image format you use for icons. On a WordPress website, an icon is typically used for your favicon, not images in your posts or pages.
By default, you can only upload JPG and PNG to your pages and posts. If you’d like to add other image file types for whatever reason, you can use a plugin such as WP Extra File Types. If you dislike plugins, you can add the following code to your wp-config.php file.
define( 'ALLOW_UNFILTERED_UPLOADS', true );
For an alternative method, add the following code to your functions.php file:
<?php add_filter( 'upload_mimes', 'my_myme_types', 1, 1 ); function my_myme_types( $mime_types ) { $mime_types['svg'] = 'image/svg+xml'; // Adding .svg extension $mime_types['json'] = 'application/json'; // Adding .json extension unset( $mime_types['xls'] ); // Remove .xls extension unset( $mime_types['xlsx'] ); // Remove .xlsx extension return $mime_types; }
The above code will add support for SVG and JSON extensions. If you’d like to add extensions for other image formats, edit the above code accordingly. To learn more, check out how to upload additional file types in WordPress.
If you encounter problems adding new file types, first contact your hosting provider as they might have limitations. That aside, which is the best image file format to use?
Which is the Best Image File Type to Use?
For the following section, we consider the three most popular image formats for websites. We cover JPG, PNG, and GIF, highlighting the best format for various uses. Let’s begin with JPG.
JPG
JPG (also known as JPEG) stands for Joint Photographic Experts Group. JPG images are well suited for high compression levels and can display millions of colors, making them perfect for photographs and images with vivid colors.
This image format supports lossy compression, which results in a slight drop in image quality after optimizing. However, you can control the level of compression to ensure you get the best quality and performance. JPG images don’t support transparent backgrounds.
PNG
PNG is short for Portable Network Graphics, an image format that was initially designed to transfer images over the internet. PNG images display millions of colors, but they can be heavier than JPG. They are fantastic for screenshots, logos, infographics, and main header graphics that identify a brand.
PNG support lossless compression meaning no data is lost during optimization. As such, PNG images are crisper and sharper than JPG images after compression. Additionally, the PNG image file type supports transparent backgrounds.
GIF
GIF is an abbreviation for Graphics Interchange Format. It’s an image format that supports both animated and static images. Most animations you see on social media are GIF images. Unlike JPEG and PNG, the GIF image file type supports only 256 colors making it unsuitable for color photographs and other illustrations with color gradients.
GIF uses lossless compression to reduce file sizes without losing visual quality. On top of that, GIF supports text labels and transparent backgrounds, which makes the format perfect for simple animations and low-resolution videos.
So, out of the three, which one should you use? It all depends on your needs. PNG is perfect for logos, screenshots, charts, infographics, and high-quality brand images. JPEG is great for small images on your website, as well as photographs that have vivid colors. GIF is amazing for animations and simple videos.
But choosing an image file type is not enough if you end up using images carelessly. In the following section, we discover a couple of WordPress image best practices and tips.
WordPress Image Best Practices
Follow the following image best practices and tips to make the most of your images. We briefly cover areas such as image size, max upload size, image SEO, optimization, and how to use Google Analytics to inform your WordPress image strategy.
Image Size
We’ve already established that the size of the images you use can affect the speed of your website. As such, you should aim at using light images. At the same time, don’t forego visual quality while trying to create light images, meaning you need to be careful with compression.
On top of that, don’t resize images using HTML or CSS. If you need a 300px by 300px image, don’t use an image that’s 400px by 400px. Additionally, choose high-quality WordPress hosting, implement caching, and a CDN to give your website a speed boost.
Max Upload Size
At times, you might need to use a large image file for one reason or another. But you might be having trouble uploading your file since WordPress comes with a default upload size of 2MB. Don’t worry, though, since you can quickly increase your max upload size.
In many cases hosting providers offer a built-in setting that you can edit to increase your file upload size yourself. For example, in Cloudways you simply need to log into your account, navigate to Server Management and select the Settings & Packages section (as seen above). From here you can manually increase your file upload size limit by editing the allowed MB size.
But this can and does vary by host. GoDaddy utilizes an option in their C-Panel, Media Temple you must modify php.ini Files, and with WP Engine you need to contact their support team to request an increase.
Image SEO
Other than passing a message and making your site look good, did you know you can use images to boost your SEO scores? That’s right; you can use image SEO to drive more traffic to your website. How? For starters, name your images appropriately. For instance, instead of “picture001.png,” use “how-to-image-seo.png,” and so on. On top of that, add alt texts to all of your images after uploading. Thanks to alt texts, search engines, and screen readers can “see” your images.
Useful WordPress Image Optimization Plugins
WordPress is quite the easy CMS to use thanks to plugins. While it’s helpful to optimize your images using image manipulation software (e.g., Photoshop) before uploading, you can leverage plugins to optimize your images after uploading.
Notable WordPress image optimization plugins include Smush, EWWW Image Optimizer, and Imagify, among others. Pick the plugin that’s perfect for your needs, since each comes with a unique set of features.
Use Google Analytics
When all is said done, you want to provide the best user experience you possibly can. For this, you must know your visitors and the devices they use to access your website. That way, you can pick the perfect image formats and sizes. For instance, if most of your visitors use the Apple Safari browser, you will need to provide additional support to use WEBP image files in WordPress.
Choosing the perfect image file type for your WordPress website is vital as far as speed, UX, website performance, SEO, and consistency go.
You cannot afford to let this area go unattended since you stand to benefit when you develop a good image strategy. Your style guide should provide image directives to all users.
Lastly, compress and optimize your images to achieve the perfect balance between quality and performance.
Do you have questions about image file types? Let us know in the comment section below!
Keep reading the article at WPExplorer. The article was originally written by Freddy on 2019-12-28 16:55:17.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.