Com­pressed images have a par­tic­u­lar­ly positive impact on website loading times. But how can you compress images in a way that’s as lossless as possible—without no­tice­able quality loss? And what options are available to achieve this? In this guide, we’ll give you a clear overview of image com­pres­sion tools.

Why should I compress my images?

These days, high-res­o­lu­tion images and photos are common. In digital pho­tog­ra­phy, pixel counts and file sizes are in­creas­ing. Whether you’re uploading images to your website or just sending them by email, it’s always important to keep file sizes to a minimum. Remember, the smaller the file, the less time it takes to transfer. This is ben­e­fi­cial for two reasons:

  • A fast loading process increases visitor sat­is­fac­tion (es­pe­cial­ly for users with mobile internet access)
  • Fast loading times have a positive effect on the search engine ranking

The right data format for online images

Before putting your images online, you should check the image file format. Not every graphic format is suitable for internet use. Here are five format types that can be used:

  • JPG/JPEG: JPG is one of the most commonly used image formats. It can display 16.7 million colors and boasts robust com­pres­sion rates. JPGs are mostly used for saving photos or photo-like graphics, par­tic­u­lar­ly those with lots of different colors and stark contrasts.
  • PNG: This format can depict between 256 (PNG8) and 16.7 million (PNG24) different colors and be used online. Unlike JPGs, this format can be com­pressed without any sac­ri­fices to quality. PNG files are well suited for saving graphics, logos, and texts. Images with few colors can be com­pressed into files only a fraction of the image’s original size.
  • WebP: WebP is a modern image format developed by Google to provide better com­pres­sion while main­tain­ing high image quality. It supports both lossy and lossless com­pres­sion, resulting in smaller file sizes compared to JPEG and PNG. Thanks to efficient al­go­rithms like pre­dic­tive coding, WebP can compress images up to 30% smaller than JPEG at similar quality. The format also supports trans­paren­cy (alpha channel) and an­i­ma­tions, making it a versatile al­ter­na­tive to PNG and GIF.
  • SVG: SVG (Scalable Vector Graphics) is an XML-based image format used for vector graphics. Since it relies on math­e­mat­i­cal de­scrip­tions of shapes and lines, image quality remains intact re­gard­less of scaling. Unlike pixel-based formats, SVG files can be heavily reduced in size through simple code op­ti­miza­tions and gzip com­pres­sion—without com­pro­mis­ing visual quality. SVG is es­pe­cial­ly ideal for logos, icons, and il­lus­tra­tions on the web.
  • GIF: GIF files are still fairly common on the web—even though they can only display 256 colors. This is mainly because the GIF format supports short an­i­ma­tions made from a sequence of images, which are es­pe­cial­ly popular on social media and similar platforms.
Tip

Com­press­ing photos and images is one of the most important steps to improve your website’s per­for­mance. However, there are ad­di­tion­al ways to optimize visual content. It’s worth spec­i­fy­ing the di­men­sions of an image directly in the source code, so the browser doesn’t have to calculate them. Removing metadata such as meta tags and EXIF in­for­ma­tion can also have a positive effect on loading speed. If your web ap­pli­ca­tion contains a large number of images, using a Content Delivery Network (CDN) is highly rec­om­mend­ed to optimize delivery and per­for­mance.

Option 1: Compress images online

If you want to compress images without having to install special software, you can also easily optimize your images online. For this purpose, there are various offers on the web that enable you to compress them free of charge. The tools usually differ when it comes to the available file formats and possible degrees of com­pres­sion, and they often have lim­i­ta­tions regarding the number of com­pres­sions that can be carried out. Some of the best solutions can be found in the following para­graphs.

Op­ti­mizil­la

The online tool Op­ti­mizil­la from Mediafox Marketing allows you to upload and compress up to 20 images at once. The images must either be in JPEG or PNG format. The web ap­pli­ca­tion uses a com­bi­na­tion of different com­pres­sion al­go­rithms, which are char­ac­ter­ized by a good ratio of com­pres­sion and image quality. You can use the slider to set the degree of com­pres­sion before down­load­ing the results in­di­vid­u­al­ly or together as a ZIP file.

Image: Image compression with Optimizilla
Once you’ve selected the desired com­pres­sion level, confirm it in Op­ti­mizil­la by clicking “Apply”. In this example, the image size is reduced by 22 percent.

To help you find the best possible settings, Op­ti­mizil­la provides you with thumb­nails of the original and its com­pressed coun­ter­part. In addition, the tool specifies the re­spec­tive file size. All uploaded images are au­to­mat­i­cal­ly deleted from the provider’s servers after one hour.

Ad­van­tages Dis­ad­van­tages
Ad­justable com­pres­sion ratio Limited to 20 com­pres­sions at once
Thumbnail preview of original and edited version

TinyPNG

TinyPNG allows – contrary to its name – not only the com­pres­sion of PNG files, but also JPEG and WebP files. In the free standard version, you can optimize up to 20 images of these three formats si­mul­ta­ne­ous­ly, with the maximum file size per image limited to 5 megabytes.

Image: Screenshot of the TinyPNG website
After com­pres­sion, TinyPNG will display the new size of the image file(s) and the saved file size (as a per­cent­age).

The voormedia tool has a pre­de­fined com­pres­sion level that cannot be adjusted, but reduces the image size by up to 80%. Use the drag-and-drop feature to move the desired photos into the displayed area and then download the results in JPEG or PNG format or as a ZIP file. Al­ter­na­tive­ly, you can upload to the cloud storage service, Dropbox.

Ad­van­tages Dis­ad­van­tages
Results can be uploaded to Dropbox Limit of 20 si­mul­ta­ne­ous com­pres­sions and 5 megabyte file size (in the standard edition)
Com­pres­sion level isn’t ad­justable

iLoveIMG

iLoveIMG is an entire online suite of useful image editing tools. The Barcelona-based de­vel­op­ment team provides ap­pli­ca­tions that enable images to be cropped, scaled, converted, and even com­pressed. For the latter, select “Compress IMAGE” and then insert the desired image material using the drag-and-drop feature or the file browser. Possible formats are JPEG, PNG, SVG and GIF.

Image: Screenshot of image compression with iLoveIMG
After com­pres­sion, you can download the images with a simple click.

While iLoveIMG only has a single, default com­pres­sion mode, the tool provides several different export options. It is not only possible to download the results to the local hard disk, but also to upload them to Google Drive and Dropbox and to forward a download link to the com­pressed images. If you are not satisfied with the com­pres­sion result, you can simply delete it by clicking on the recycle bin icon.

Ad­van­tages Dis­ad­van­tages
Results can be uploaded to Google Drive and Dropbox Only one com­pres­sion mode
Further tools for trimming, scaling, and con­vert­ing are available No preview function

Option 2: Compress images with Photoshop

You can also compress your images with pro­fes­sion­al image pro­cess­ing programs. First and foremost, Photoshop, is un­doubt­ed­ly the industry leader. In addition to its functions for creative design and op­ti­miza­tion of pho­to­graph­ic material, the Adobe tool offers various options for changing the image format and adjusting the image size. The “Save for Web” option, which Adobe has im­ple­ment­ed specif­i­cal­ly for op­ti­miz­ing photos and images for websites, is par­tic­u­lar­ly practical for website operators. In this mode, not only the important web formats GIF, PNG, WebP and JPEG can be com­pressed, but also the raster graphics format WBMP (Wireless Bitmap), which is designed for mobile devices.

RjA067CaQhY.jpg To display this video, third-party cookies are required. You can access and change your cookie settings here.

As soon as you edit an image in Photoshop web op­ti­miza­tion mode, a new window will open in which you can not only set the specified target formats, but also optimize the desired image for your website in terms of color depth and size. In the preview window, the Adobe tool compares the original and the target image (including absolute file size in­for­ma­tion), so you can easily see the dif­fer­ence each time you compress the image.

Ad­van­tages Dis­ad­van­tages
Live preview for up to three com­pres­sion results Requires high amount of computing power
Various image editing features available High costs

Option 3: Compress images with freeware and open-source programs

With Photoshop, it’s so con­ve­nient to compress images with desktop ap­pli­ca­tions. These not only offer con­sid­er­ably more functions by default, but also have an advantage over web tools since they can be used without an existing internet con­nec­tion. If you want to reduce the size of your website images, however, you don’t nec­es­sar­i­ly have to use a premium solution such as an Adobe’s product or another fee-based al­ter­na­tive. If you’re on a tight budget or not in­ter­est­ed in more complex editing features, a freeware or open-source program can help you achieve first-class op­ti­miza­tion results when it comes to photos, images, etc. But which of the many free tools are actually rec­om­mend­able?

IrfanView

Since 1996, the image viewer IrfanView has been one of the most popular freeware solutions for Windows PCs. According to the developer, the tool averages around one million downloads per month! This im­pres­sive number is likely driven by its appealing licensing model: it’s com­plete­ly free for personal use, while com­mer­cial use requires a license that costs just a two-digit amount.

Image: Screenshot of IrfanView
If you save your image as a JPEG using the standard version of IrfanView (without plugins), you can easily adjust the quality using a slider.

By default, the image viewer supports numerous image formats such as PNG, JPEG, GIF, BMP, WebP and many more. Once an image is inserted, it can be converted to these formats at any time. When it comes to com­press­ing images specif­i­cal­ly for the web, however, the “Save for Web” function, which can be added via a plugin, is rec­om­mend­ed. This extension allows you to optimize stacks of images and photos, while using the slider to adjust how much the original image quality should be main­tained. A preview image and the com­pressed file size give you an insight into what you can expect the final result to look like.

Ad­van­tages Dis­ad­van­tages
Stack pro­cess­ing possible Com­pres­sion plugin only available in English
Preview function and ad­justable com­pres­sion level

GIMP

When searching for Photoshop al­ter­na­tives from the open-source sector, you will in­evitably come across GIMP (GNU Image Manip­u­la­tion Program). The graphics program for Linux, macOS, and Windows, which was released in 1998, has been im­press­ing people for years due to its variety of functions, which are very similar to those of Adobe’s com­mer­cial model. It now supports more than thirty file formats, including GIF, WebP, JPEG, and PNG, which are crucial formats for the web. This means that you can convert your image files to one of these web formats at any time using the GIMP software.

Image: Screenshot of GIMP
Exporting image as WebP with GIMP

In addition to con­vert­ing images to a smaller file format, GIMP also provides advanced export options that allow you to easily compress images. Use the slider to set the degree of com­pres­sion. The extended options are also practical: for example, if you activate the “Pro­gres­sive” property, the result is slightly larger, but the in­di­vid­ual areas are loaded in a certain order, so that even after a short loading time, a rough view of the entire image is displayed.

Ad­van­tages Dis­ad­van­tages
Open source Preview only shows the file size of the result
Degree of com­pres­sion is ad­justable

PNG­Gaunt­let

The freeware program PNG­Gaunt­let, provides a graphical user interface for the three open-source tools PNGOUT, OptiPNG, and DeflOpt, which were all developed for op­ti­miz­ing and com­press­ing images in PNG format. The ap­pli­ca­tion, which is only available for Windows, is therefore the perfect solution for creating very small logos, graphics, and lettering in PNG format for your web project. Besides PNG itself, JPEG, GIF, TIFF, and BMP are also possible output formats for the com­pres­sion or con­ver­sion process.

Image: Screenshot of the PNGGauntlet interface
If you check “Overwrite Original Files”, PNG­Gaunt­let au­to­mat­i­cal­ly replaces the original image with the newly created file.

There are two ways to compress your images with PNG­Gaunt­let. You can access the standard setup by inserting one or more images and then pressing “Optimize!”, or you can first select an in­di­vid­ual setup by adjusting the settings of the three im­ple­ment­ed tools by clicking on the button with the same name. Re­gard­less of which way you choose, the freeware tool will show you the new size of the image file(s) (compared to the original) as a per­cent­age after com­pres­sion was suc­cess­ful.

Ad­van­tages Dis­ad­van­tages
Straight­for­ward stack pro­cess­ing No preview mode
In­di­vid­u­al­iza­tion of com­pres­sion level is possible Re­strict­ed to PNG as output format
Latest version is from 2012

Im­a­geOp­tim

If you want to compress the images and photos of your web project and need an open-source tool for macOS, we recommend Im­a­geOp­tim by Kornel Lesinski. This GPL-licensed program combines several image op­ti­miza­tion tools such as MozJPEG, pngquant, and SVGO, allowing you not only to remove un­nec­es­sary EXIF metadata, but also to compress various image formats like JPEG, SVG, GIF, and PNG.

Image: Screenshot of ImageOptim
Once you’ve dragged your file into the tool, the com­pres­sion process begins au­to­mat­i­cal­ly. A green checkmark indicates that the com­pres­sion was suc­cess­ful.

Using the drag-and-drop feature, you can place the desired image files into Im­a­geOp­tim where the program will start com­press­ing them im­me­di­ate­ly. However, you can make changes to the settings at any time and adjust the com­pres­sion level and add or remove options. Simply click on the three dots to proceed. Af­ter­wards, simply click on “Again” to perform the con­ver­sion once more.

Ad­van­tages Dis­d­van­tages
Various com­pres­sion functions No preview mode
Open source
Go to Main Menu