What is the Difference Between Resizing and Compressing Images?

Websites are filled with images. Big, small, and some with stunningly high definition. Although website visitors may want to see all those images, they often do not wish to wait long for the images and the remainder of your webpage to load. In fact, a study by Google/SOASTA Research showed that the probability of a bounce (someone immediately leaving your website) increases 32% as page load time increases from 1 second to 3 seconds. 

On the other hand, if your small business website only contains tiny, low-resolution images, it might load quickly, but it is not nearly as visually appealing and can give the impression that your brand is low-quality. If visitors believe your brand is low quality, this can negatively impact your conversion rate.

As a web designer who has been building websites for over two decades, I use two important image techniques to create fast, visually appealing websites.

Resizing Images

There are technically multiple ways to resize images for the web, but the methods are not created equal and have serious pros and cons.

Resizing an Image with HTML Attributes or CSS – Not Recommended

Images consist of pixels which are points of data that make up the image. How many pixels are in an image is calculated by multiplying the width (measured in pixels) by the height (also measured in pixels - or px for short). For instance, you might commonly hear a 1920px width x 1080px height image mentioned. The total pixels within that image are 2,073,600 pixels – that’s a lot of pixels!

Resizing an image is typically thought of as simply changing the visual dimensions of the image. For instance, you may take a 1920px width by 1080px height image and resize it down to 480px width by 270px height. Resizing an image is certainly important to ensure it fits within the constraint of its placement on your webpage.

Many website tools may allow you to upload a large image and then automatically or click-and-drag resize it visually to your intended placement on the webpage. However, here’s the kicker; your website is still likely loading the full image even if you don’t realize it. The full image of 1920px by 1080px loads (2,073,600 pixels) in the background and is resized visually either via CSS or HTML attributes to the desired display size. Unfortunately, in this case, the visitor's internet browser still was forced to download the high-resolution image (1920px by 1080px) which negatively impacts page speed and the user’s experience.

Note that resizing an image simply by defining HTML attributes or scaling with CSS does not decrease the file size. When an image is resized with this method, the same amount of data will remain, but the image will be displayed smaller from a visual perspective.

Resizing an Image by Exporting a Truly Smaller Version

On the other hand, there is a way to resize the image properly by lowering the resolution and thus exporting fewer “pixels” of data. In other words, the 1920px width by 1080px height image truly becomes a 480px by 270px image and then is displayed as a 480px by 270px image. Using the same math, we are now only loading 129,600 pixels.

Some Content Management Systems (CMS), as well as select Content Delivery Networks (CDN), may have tools built in that take the original image uploaded and create multiple smaller versions of the image with smaller dimensions that can be used in the various sections of your website based upon what display size is needed. It’s important to learn how your CMS is handling images as it can have a drastic impact on your user’s experience, page speed, and even Search Engine Optimization (SEO).

Ultimately, resizing your image is critically important to improve the speed of your page. By actually resizing the resolution of your images (not just visually!), a browser can load the image much faster, minimizing wasted time loading an unnecessarily large image.

Compressing Images

Image compression utilizes specialized mathematical techniques to reduce the file size, while maintaining its resolution (remember, number of pixels!) and visual dimensions. Think of it as a way to fit more data in the same area. When someone tells you to squeeze into the middle of the rows at church or a live music event because it’s a packed house, you aren’t creating more space or adding additional seats (pixels) but rather reducing the wasted (in other words, uncompressed) space between you and the next person.

From a more technical perspective, compression techniques attempt to reduce the complexity of an image's structure, thus requiring less data to store, while attempting to leave visual fidelity uncompromised. Thus, a 2 MB (2,000 KB) file can be compressed to 250 KB.

The only caveat is that too much compression can somewhat reduce image quality, just like being too squished at a concert can get a wee bit uncomfortable and ruin the experience.

It’s important to balance both true resizing and compressing of your images to ensure your website is as visually appealing and quick to load as possible. Not only does this improve your visitors’ experience, but it also reduces page loading time which is a direct ranking factor impacting SEO.

How Do I Start Compressing and Optimizing Images?

First of all, you can use simple paid web apps like Kraken to help you resize and compress images in a flash! If you want more control over how your images are exported and also need image editing capabilities, you could also consider using professional products from Adobe like their professional-grade Adobe Photoshop or even their free and easy-to-use Adobe Express toolset which has a built-in image resizer and basic image editing functions.

Additionally, some content management systems also have components and plugins that can be added to help make the process more automated as a part of your web publishing workflow. It is always advisable to talk to a professional web designer if you aren’t sure how your images are being handled.

Do keep in mind though, not all web designers are focused on speed and efficiency – we’ve recently worked on a website that was “professionally” designed by one of our competitors. The website used 3-4 images that were each roughly 5,760px width image by 3,240px height images on their homepage slideshow. And the images were not compressed. Oh my goodness, that webpage loaded so slowly!

Does Image Format Impact Compression Quality and Load Speed?

Yes, the image filetype (format) can impact compression quality and overall file size. For example, most photographs use the jpeg/jpg format and logos, and graphics typically use PNG by default. However, newer file types like WebP, AVIF, and SVG have distinct benefits when it comes to additional compression and fidelity control. Tools like Adobe Express typically provide tips on what file types to use for which use case. If you're still not sure which filetypes to use, you should contact a qualified web designer.

At Igniting Business, our web designers can help design a fast, responsive website for your small business, full of high-quality (and optimized!) images. For more information about or web design services, contact us today!

At no additional cost to you, we may receive a commission if you click on some of the links on this website and make a purchase.