How to Resize Image Without Losing Quality
Images are very important when it comes to marketing yourself, brand, or service on the web. We live in a time where visualization is everything, whether it is on your website, pinning a post on Pinterest, or sharing a post on Facebook. According to zabisco, 40% of people will respond better to visual information than text. So it can be very important to have a good system in place when it comes to how to resize an image without losing quality. The last thing people want to see is a blurry photo, as this can give a bad first impression.
Resize image without losing quality
In a previous post we discussed how to optimize images for performance, for SEO, and for social media. In this post we want to dive deeper into how to resize an image without losing quality. There are two different aspects to this, scaling up (upsampling) an image and scaling down (downsampling) an image.
Upsampling an image
PNGs and JPEGs, also known as bitmap images, are made up of tiny little pixels. If you zoom in on a photo, like we did on the one below, you can actually see the individual pixels.
Upsampling an image actually refers to the process of enlarging the image bigger than the original source. According to Adobe, when you increase the number of pixels in this part of the dialog box (upsampling), the application adds data to the image. Generally you don't want to do this because the program is guessing where to add additional pixels. However, it also depends on what you are upsampling. With most PNGs you will probably notice a big difference due to they are already smaller and optimized for web. JPEGs and or photographs you can usually get away with a little upsampling before you notice some degradation, simply because their resolution is much larger to begin with.
As you can see below, once you get into the 3x the size realm it starts to become quite blurry. Usually you can get away with 2x upsampling before noticing a big drop in quality.
When your upscaling there are a few ways to maintain some of the quality without seeing huge degradation.
- One way in Adobe Photoshop is to use the "bicubic smoother" option when resampling your image. This can be found under "Image" and "Image Size" in Photoshop.
- Another is a popular premium plugin designed for Photoshop called ON1 Resize 10. The entire purpose of this plugin is to get you the highest quality photo enlargements, using its fractal technology.
- Irfanview and Gimp are also free alternatives which provide image size options which will maintain more of the quality than if you just resized it yourself. For the sampling/quality option you will want to ensure you choose the Lanczos option.
Downsampling an image
Downsampling an image works the opposite way. According to Adobe, when you decrease the number of pixels (downsampling), the application removes data. When data is removed the image also degrades to some extent, although not nearly as much as when you upsample. By removing this extra data ( downsampling) this results in a much smaller file size. For example, you can see below that our original image was 17.2 MB at 3000 by 2000 pixels. When we downsampled it to 1000 by 667 pixels this resulted in a file size of only 1.91 MB. It is also recommend to use the Bicubic sharper option if you are using Photoshop.
Save for web
So we can confirm that downsampling or sizing down your image definitely decreases the file size. You do however want to be careful. If you use the "Save for Web" feature in Photoshop changing the quality can have quite different outcomes. The original image below is 3.1 MB. On the left you can see bringing it down to 20% quality results in a file size of 486 KB, but also pretty bad pixelation. On the right is 50% quality which results in a 799 KB file. Generally aiming for 50% reduction should result in decent quality depending upon the original image.
Resizing with Optimus image optimizer
Another way to resize your images would be to use an image compression plugin or API like Optimus image optimizer. If you are running on WordPress, Optimus image optimizer won't resize your image, but rather it will reduce it using lossless compression. The great thing about lossless compression is that you don't have to worry about the quality being lost. However, it might not result in as big of a decrease in file size either. So what is recommended is to downsize/downsample your images accordingly, and then you can compress them even further upon uploading to WordPress.
First of all, you should not always rely on CSS to resize your images, but rather upload them at scale when possible. This does get trickier though if you introduce retina images into the mix. See our post on how to use retina and WebP images.
Summary
As you can see both upsampling and downsampling images always results in some degradation to a certain extent. But by using different tools, such as Photoshop or Gimp, as well as a lossless compression plugin you can do a pretty good job at resizing an image without losing quality. At some point it is definitely up to the user and how much quality they require vs file size.