jpg-vs-png-wordpress

JPG vs PNG: Which Should I use in my WordPress Site?

Trevor WatkinsWeb Design, WordPress Maintenance

WordPress Maintenance Quick Tips

What is a PNG?

A PNG (Portable Network Graphic) is a file format used for lossless image compression. This means you can resize or compress the image without any loss of its original quality. If you need to save an image or graphic repeatedly, a PNG will retain its quality since it stores and retains more image data than a JPG file.

white-box-create
Logos are always best in PNG format.

PNG files also provide the ability to utilize transparent space within the image footprint. This can be extremely useful for things like a logos or icons. Where a JPG would have to preserve a solid, opaque background around non-rectangular images (like whitespace behind a logo) a PNG allows what is behind the image footprint to be displayed in the negative space. This allows you to place graphics over any color background or image in your website without ugly white or black boxes, which will contribute greatly to its professionalism.

Be warned however, because PNGs do store more image data they are typically much larger files than JPGs and can result in slower website speeds. A basic WordPress maintenance package may help compress the PNG files you need for your site.

When to use PNG files on your WordPress site.

  • For your brand/logo
  • For detailed illustrations or graphics
  • For graphics/images that need a transparent background
  • If you need lossless compression

What is JPG (JPEG)?

A JPG or JPEG (exact same file format if you were wondering) is a “lossy” file format, which means that every time you compress or resave it, more data is lost. This can quickly lead to image quality degradation. If you decided to resave a JPG image multiple times, you will start to notice quality loss in as little as 10 saves. You know those terrible “potato-quality’ memes you see all over the internet? They are JPGs that have been downloaded, saved, and uploaded too many times.

jpg-degradation-white-box-create
Original on the Left | 10 times compression degradation on the right

JPG is a popular format with digital images or digital photography. JPG works very well with photos that may have a lot of different colors and shades because it produces a smaller image file size while maintaining the full depth of the image. This is very beneficial for fast website load speeds.

The downside to JPG is, as mentioned above, the lossy format. It is also not possible to make a JPG transparent if needed. However, as with PNGs, a basic WordPress maintenance package can compress your JPG images with minimal image quality loss to optimize the balance between quality and speed.

When to use JPG files on your WordPress site.

  • For all images/photography on your website
  • When you need smaller file sizes to improve page speed times
  • Photo albums/galleries
  • Opaque images/graphics that don’t need to be transparent

Answer: JPG when you can

white-box-create-jpg-example
Use JPG files when you can.

You will want to use JPG as much as possible because of its smaller file size. Website page speed is one of the most important metrics that Google’s utilizes when ranking sites. Using JPGs will help to make sure you place your site in the most advantageous position for ranking with your SEO strategy.

PNG should only be used for things such as your logo or graphics with hard lines that can easily become pixelated. It will primarily be used for decorative elements and graphics within the site, especially where a transparent background is needed. Certainly, don’t be afraid of using them since they are a critical design tool, but don’t use them unnecessarily.

Periodically reviewing your website’s images to ensure they are properly compressed should be a standard part of your WordPress maintenance strategy. If you pay for a WordPress maintenance package, the provider usually includes site speed maintenance and will properly compress site images or convert them into a proper format.

WordPress Maintenance Packages

A WordPress Maintenance Package can save you a lot of time, money, and website hassles, like dealing with image compression issues. Not only do you have assurance that you website is secure, you also have a professional implementing proper caching, and image optimization.

Learn about our WordPress Maintenance Packages here.