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. Conversely, if your small business website only contains tiny, low-resolution images, it might load quickly, but is not nearly as visually appealing and can give the impression that your brand is low-quality. Two important image techniques exist to create fast, visually appealing websites.
{index}
Resizing Images
Resizing and 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). For instance, you might commonly hear a 1920 width x 1080 height image mentioned. The total pixels 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 1920 pixels width by 1080 height image and resize it down to 480 pixels width by 270 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 drag-and-drop 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. What happens is the full image of 1920 by 1080 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 user’s browser still was forced to download the high-resolution image (1920 by 1080) 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 1920 width by 1080 height image truly becomes a 480 width by 270 height image and then is displayed as a 480 by 270 image. Using the same math, we are now only loading 129,600 pixels
Some Content Management Systems (CMS) will have tools built in that truly do essentially 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 for load time of your page. By truly 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 amount area. When somone tells you to squeeze into the middle of the rows at church or a live music event because it’s packed 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 40 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 developer if you aren’t sure how your images are being handled (or just contact us if you’re in need of a professional web developer!).
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,760 width image by 3,240 height images on their homepage slideshow. And, the images were not compressed. Oh my goodness, did that webpage load slow!
At Igniting Business, our web specialists can help design a fast, responsive website for you 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.