images in wordpress

What’s the best file format for images in WordPress?

If you run a website, you might spend a lot of time thinking about the text content you should include. While blog posts, about pages, and other forms of text are certainly important to your site, you also need to remember the visual component of a successful website. Including images in WordPress is a super vital aspect of your site. Images provide breaks from reading, they’re attention grabbing, and they just add a variety to your site that shows you put the effort in. A site with images looks far more appealing than one without, and people are more likely to read through that content. 

Choosing an image is only one step in the process of making your site visually attractive, though. You also need to decide which file format you should use to post those images. Different images in WordPress benefit from different file formats, and it’s important to select the right one. This post focuses mainly on two image types, JPEG and PNG, as these are the most common and generally most reliable formats. 

Why does file format matter?

You might think file type can’t possibly be that important – an image is an image, right? While file format may not seem to matter much, it can make a big impact on how your site loads and how images look. 

If you choose a file format that turns all your images in WordPress into huge files, this can slow down your site’s loading time. Remember, the bigger the file, the longer the wait. If you choose an image type that uses “lossy” compression when you need “lossless” compression, you’ll compromise some image quality. Since site speed and appearance have big impacts on your site’s Google ranking, it’s essential to choose the file format that will support your site best.

What does WordPress support?

Without using any plugins, WordPress supports JPEG/JPG and PNG image types. JPEG and JPG are the same, and are used interchangeably. While you can install a plugin to upload GIF or ICO images in WordPress, there would rarely be a time when this is necessary. JPEG and PNG images are often the best two formats. The only thing to figure out is when to use which one.

Using JPEGs

JPEG images are best for photograph image types, as opposed to screenshots or infographics. JPEGs reduce file sizes so they are more easily shared, but this comes with a slight loss of image quality. JPEGs use “lossy” compression, meaning some tiny image details need to be deleted to successfully compress. However, these losses are rarely noticeable to the naked eye and won’t make a big difference to your images in WordPress. If you need a file to be small to reduce page loading times, and can afford to lose a tiny bit of quality, use a JPEG file.

Using PNGs

PNGs are great for screenshots, infographics, illustrations, and most other image types that aren’t traditional photos. This is because PNGs use “lossless” compression so no information is deleted, meaning image quality remains intact. PNGs are best used when the image requires transparency. PNGs support transparent images, which helps images fit into content without a coloured outline. However, using a PNG format means file sizes will be bigger. PNGs tend to make file sizes too big for regular photos, which will slow your site and load time down unnecessarily. If pristine image quality is important, such as to show a detailed infographic, or the image must be transparent, a PNG file format is the way to go. Avoid PNGs for regular photographs to keep your site running smoothly. 

Other image formats

Using SVGs

SVGs are a lesser known, but also handy file format. Due to the risk of viruses or hidden malicious code, SVG images can’t be uploaded natively to WordPress, but you can use plugins such as SVG Support to upload SVGs to your site. These plugins ensure the file is clean and safe for use on WordPress. Short for scalable vector graphics, SVGs are graphic file types that are generally easy to edit and are good for SEO. SVGs are written in XML text files, meaning there is more room to define keywords and descriptions, as opposed to the brief alt image text used for other file types. SVGs are great options for small icons such as website logos, but they are unfortunately tricky to properly scale for other image types.

Using WebP

WebP is a file format created by Google that uses both lossy and lossless compression to reduce image size beyond that of PNGs or JPEGs. Since it’s Google-developed, WebP has a fairly good algorithm for compressing images while maintaining quality. However, WebP is also not naturally supported by WordPress. It requires a plugin like ShortPixel to successfully upload this image type to your site. We support WebP and automatically set it up on all of our Atom sites.

Ask yourself… 

If you’re still not sure what file format to use for your images in WordPress, ask yourself:

  • What kind of image am I using? (photograph, illustration, infographic, etc.)
  • Does the image need to be resized or compressed?
  • How good is the existing image quality?

Finding the right image type is a bit of a balancing act between maintaining a fast loading time and keeping image quality. The bigger the file of the image, the slower your site, but the better the image itself. 

Image size

Now, just how big or small should your images be? When you upload an image, WordPress automatically suggests four options for sizing: thumbnail, medium, large, and full-size. The full-size option is the image size as-is. Images in WordPress can differ in size depending on where they are placed. Blog post images should be around 1200 x 630 pixels, whereas thumbnail images can be 150 x 150 pixels and feature images 1200 x 900 pixels. Remember you can always preview a post or page to check how it looks before posting it live!

Using images in WordPress is essential, but it’s important to choose their file formats wisely. Images should always serve a purpose and increase the quality of your site, so keep this in mind when uploading pictures!

If you’re looking to improve your website’s speed, security, and reliability, Atom is here to help. Get in touch with us here!