How to Compress JPEG and PNG Images to Speed Up Your Website

Nov. 25, 2019 | @luhnarhq

Page speed is an important part of how well your website performs for your users. It influences everything from conversion rates and time-on-site to SEO and brand perception. Because half (or more!) of page bandwidth comes from images, optimizing your site by compressing your JPEGs and PNGs is crucial to performance.

There are two main ways to optimize images: one-by-one or as part of an automatic process.

Methods for individual image optimization include:

Methods for automatic image management include:

Some of these methods are quite easy to use, while others may take more time to get set up. Read about each method below to find those that work best for you.

Online Image Compression Tools

The easiest way to get started with image compression is with an online tool. Simply drop your JPEGs or PNGs onto the tool’s web page to optimize them. Modern online compressors are quite good at automatically shrinking your images while preserving quality and letting you keep your originals.

Another great thing about online image compressors is that they are free to use, although they may require a subscription to handle especially large files or large numbers of images.

Tiny PNG / Tiny JPEG ScreenshotOnline tools work best when you only need to compress a handful of images for the web. These tools can quickly become tedious, however, for graphic designers who need to process images over and over again for clients. If you fall into the latter camp, you can save a huge amount of time by investing in a plug-in or an optimizing CDN service, as we’ll discuss below.

If you do choose to go this route, make sure you use a modern tool that analyzes and re-encodes all of the image data. Some compressors only perform a few simple optimizations on your images (such as removing metadata) and don’t actually shrink your files all that much. Regardless, if you have a particularly large image, you may want to run it through a couple of different tools to see which one gives you the best compression.

Here’s a quick list of our favorite online compression tools that you might want to try:

Photoshop and Its Plugins

One of the best times to optimize images for your website is when you’re editing them in your graphic design app, such as Photoshop, and are about to save or export for the web. This works well if you’re the one working on the images or are working closely with the designer or photographer.

Photoshop and most graphic design programs include options to compress images as a JPEG, but many do not have options for compressing PNG files or may not be using the latest, optimal, or most aggressive compression algorithms or settings. Plugins have been created to fill these gaps in graphics software.

Plugins are convenient because they fit within your existing workflow, but most of them aren’t free, and still require you to manually compress each image (or batch of images). With that in mind, if you have a lot of images to compress, this workflow may not work for you.

We’ve listed three well-known plugins for Photoshop below. If you use a different image editor, a quick search should yield some good options.

  • Fnord SuperPNG is a free, open-source plugin that extends Photoshop’s capabilities for optimizing PNG files.
  • JPEGmini has a (paid) Photoshop plugin that brings visually lossless compression to images saved in the JPEG format.
  • TinyPNG‘s (paid) Photoshop plugin allows users to use TinyPNG instead of Photoshop’s built-in algorithms to work with both JPEGs and PNGs.

Stand-Alone Image Optimization Software

There are cases where stand-alone image optimization software makes sense. Sometimes you don’t have access to a professional graphics app that supports plugins, such as Photoshop. At other times you may need to compress a JPEG or PNG image that has already been exported. Lastly, you may be working on a particularly tricky or important image that needs to be compressed more than usual while still preserving quality.

Stand-alone image optimization software makes sense in a workflow where you can pay careful attention to each image. It may not be appropriate for situations where you have lots of images or are working with users who will upload images without access to the software.

There are many stand-alone image tools to choose from, but here are a few with broad feature sets that should cover what most people need.

  • FileOptimizer (Windows only) supports a huge list of image types and defaults to lossless compression.
  • ImageOptim (Mac only) focuses on lossless JPEG and PNG compression. ImageOptim also offers an API for programmatic image optimization.
  • Trimage (Linux only) was inspired by ImageOptim and is meant to be a Linux tool filling the same need. It defaults to lossless compression of JPEG and PNG images.

Command-Line (CLI) Image Compression Tools

When you need to have absolute control over the image compression process, the command line is hard to beat. While using a CLI tool is certainly more tedious than employing an app or plugin, this approach gives you full access to advanced compression options and cutting-edge techniques.

Installing a command-line tool often requires some familiarity with package management systems and developer toolchains. Therefore, CLI image compressors work best as part of a custom build process for websites, but they can also be used in one-off situations when you have an image that is particularly difficult to compress without harming quality. Many of these tools can also be used as a programming library and integrated directly into your CMS (e.g., as a PHP extension).

We recommend using open-source tools as much as possible, since this gives you direct access to the developers to ask questions, request features, and file bug reports. You can even tweak the code if needed. A good way to find CLI tools and libraries is to simply search GitHub or a public package repository, such as those provided for your operating system (Ubuntu, macOS) or programming environment (PHP, Node, Python).

If you are interested in trying a CLI compressor, here are a few to start with:

  • pngquant is a lossy PNG compressor.
  • zopflipng is a lossless PNG compressor.
  • gif2apng converts GIF images to Animated PNG.
  • mozjpeg reduces file sizes of JPEG images while retaining quality.
  • guetzli is a perceptual JPEG encoder for large photos.
  • cwebp converts JPEG and PNG images to WebP.
  • gif2webp converts GIF images to WebP.

CMS Plugins

WordPress, Joomla, Drupal, and other Content Management Systems (CMS) are very popular, and for good reason. A CMS offers a long list of built-in features and features that can be added through plugins, including image compression.

A CMS plugin can save you a lot of time by automatically compressing images on your site. However, the reliability of plugins varies widely (for example, at least one popular image optimization plugin for WordPress has been known to corrupt files on the server). In addition, plugins may overwrite your original image files on the server, which can be problematic if you ever need to resize or otherwise make adjustments to your images later on. With this in mind, it’s always a good idea to back up your originals, if possible, before using any image compression plugins.

To get you started, we’ve curated a list of plugins below for the three most popular Content Management Systems.

WordPress Plugins

  • reSmush.it has a plugin that connects with its free service. There is no paid plan, and images are limited to 5 MB. Note also that this plugin does not seem to be well-maintained, as it has been a while since it’s last update.
  • TinyPNG offers plugins for several Content Management Systems. TinyPNG may also be used via a PhotoShop plugin, an online tool, and an API. Their free account allows you to optimize about 100 images per month.
  • WP Smushit will optimize an unlimited number of images (capped by size at 5 MB) and includes lazy-loading support. Note, however, that this plugin doesn’t retain a copy of the original images unless you upgrade to the $49/mo. pro version, so be very careful and run a backup before optimizing all of your images. We’ve also heard from some people who have had issues with file corruption when using this plugin.
  • Optimole WP offers many supplemental useful features like lazy-loading and quality degradation for slow connections. The free plan optimizes an unlimited number of images but is limited to 25k active users per month.
  • ShortPixel is similar to TinyPNG with the addition of a “lossy” vs. “glossy” option. You can optimize 100 images per month for free with additional optimizations for 1/10 of a cent or less per image.
  • Imagify is an image optimization plugin from the same team that created WPRocket. It lets you compress 25 MB per month, or about 250 images, with a free account.

Joomla Plugins (Extensions)

  • PXLCompressor offers free image compression through either TinyPNG or ReSmush.it.
  • ImageRecyle provides smart image and PDF compression, as well as automatic image resizing.  

Drupal Plugins (Modules)

  • reSmush.it offers free image optimization for Drupal sites. This module is similar to the WordPress plugin of the same name.
  • TinyPNG provides a Drupal module for the popular TinyPNG image compression service.

Image-Optimizing CDNs

As an alternative to compressing images directly on the webserver, you may want to try using a content delivery network (CDN) that features image optimization. An image-optimizing CDN fetches images from the origin (the webserver hosting the site), automatically compresses them, and then serves cached copies of the optimized images from fast cloud servers located near the visitors to your site.

Image Compressing Content Deliver Network (CDN)One advantage of using an optimizing CDN is that it lets you avoid overwriting the original images on your web server. You can always re-optimize or resize images later on without degrading image quality, and you don’t have to worry about your originals ever being corrupted by a plug-in bug.

Another great advantage of using an optimizing CDN is that it can automatically convert from JPEG, PNG, and GIF to WebP, and then serve the WebP version to browsers that support it. WebP images support transparency and are typically quite a bit smaller than JPEGs, PNGs, and GIFs.

While there are several optimizing CDNs to choose from, we designed Luhnar’s Smart CDN to be especially easy to use. Our full-site content delivery network automatically learns about your site and then compresses all of your images without plug-ins or URL changes. Rather than simply always choosing WebP when the browser supports it, Luhnar serves the format that provides the best balance between compression and quality for each image. In addition to WebP, Luhnar also converts animated GIFs to Animated PNGs for browsers that do not support WebP.

Web APIs

Many image compression tools are now offered as a cloud service (through a web API). This lets developers optimize images as part of their build tools and custom plugins. APIs can enable new, optimized workflows and can scale to handle very large workloads.

Web APIs require a bit of programming to use, so this method of image optimization isn’t for everyone. However, API providers usually offer plugins for common platforms, making their services easier to use in those cases. On the other, you may still need to access the API directly to customize advanced features for your site.

Some of the better-known image manipulation APIs include:

  • reSmush.it is a free API originally intended as a replacement for Yahoo’s defunct Smush.it service.
  • TinyPNG provides a simple image compression and resizing API for JPEG, PNG and Animated PNG images. Their service offers an excellent balance of visual quality and image size reduction. Pricing is calculated per image and becomes less expensive as more images are optimized.
  • ImageOptim offers an API that includes both quality and resizing options. Their monthly pricing is tiered based on the number of images to be optimized.
  • ShortPixel is another popular image and PDF compression service with a variety of tools and pricing plans available.
  • JPEGmini offers a JPEG-centric API with monthly pricing divided into tiers based on the number of images to be optimized.

Conclusion

Compressing JPEGs and PNGs is a very important part of page speed, making a big impact on your site’s sales, SEO, and brand perception.

There are dozens of different methods to choose from, and you may need to combine a few different approaches to get the best results. You may also want to learn how to use a couple of the more advanced tools so that you have them ready for those times that you come across a particularly difficult image to optimize.

As always, before trying anything new, be sure you have a good backup of your site and make a copy of your original images. Setting up a sandbox site can also be a good idea. Then feel free to experiment to see what gives you the best results!

Do you have a favorite tool we missed or comments about this article? Let us know through our contact page.

Looking for an easy solution to image compression? Our smart CDN automatically shrinks your assets and speeds up your site.