Supercharge your website with image optimization
Everyone loves images and they are just about everywhere. They inspire, move and captivate. As humans, we are hardwired to visual cues and imagery. And in a world where it takes less than one second to recognize in image, images play a huge role in telling a story about your brand and you. Images are often a big chunk of website traffic. They can also slow your site down and take up heaps of space if they aren’t optimized. As a customer of Get Pro Websites, we automagically optimize images so that your website always looks great and loads superfast.
The basics
If you’d like to turbo charge your website performance, optimizing images is easy win. The 3 things to lookout for are:
Breaking down the jargon
Images come in all sorts of formats. jpeg, png and gif are the most common. And depending on the format, it can also be a file extension and if there’s one, an international standard like ISO. JPEG is the perfect example. It’s a part of an international standard, a compression algorithm, a file format and a file extension.
File size is often used interchangeably to either mean the dimensions of a file in width and height or the amount of space it takes up in storage on your laptop, mobile or platforms like Dropbox or Google Drive. Apps like Finder on a Mac or Photos on Microsoft Windows make it super easy to find out the file size and image dimensions. Here’s what it look likes in Finder if you’re on a Mac.
Choosing the right format can make the difference between a blazingly fast or a crawling site. For example, if you’re using the camera that came with your mobile, chances are that’s it’s saving the image in JPEG format. This just means that there are optimizations like compression which make the file size of your image smaller. The upside is that it takes up less space, The downside is that if it’s set to maximum compression, the image can appear pixelated and grainy.
On the flip side, if it’s a digital camera like a DSLR, it may save the photo in RAW format. It stores pixel perfect images without any compression. The tradeoffs are that you have a file format that you can do more with but it isn’t universally supported so you can’t just upload it to your website and it takes up heaps more space. Unless you are a budding or professional photographer, JPEG is always a safe bet for photos.
Check it out
There’s no difference between jpg or jpeg. jpg is a hark back to a time when file extensions could only be three letters long.
So what are some other popular file formats? There’s webp and svg. webp promises the best of jpeg and png. svg is infinitely scalable, which is just a fancy way of saying you can shrink or increase its dimensions as much as you want to without losing quality. Depending on the type you’d like your users to have, you’ll want to choose a format that makes sense. Here are a few examples:
Flash tip
If you’re after animated images, WEBP, APNG or AVIF may be good alternatives. They tend to have smaller file sizes, a richer color palette and a sharp look. They may not be suitable for all scenarios like social media or email.
Benefits of optimizing images
You can optimize images for file size and dimensions. If they’re too big in file size, your site could take forever to load. If they’re don’t have the right dimensions, the layout on your site can shift as the site loads.
Image file size can vary based on a number of things. Take your mobile camera for example. It’ll feature X megapixels such as 21MP and on average, the file size of the image could range from 7 MB to 12 MB. Even at 7 MB, it’s outrageously large to download and it’ll chew through the available data on your mobile plan.
So we know that images can increase the size of your website but most of us leave optimizing images as an afterthought. You spend countless hours creating amazing content and work hard at promoting it so the last thing you want is for potential users and customers to be leaving your site before or as it loads! Since users are mostly using their mobile and tablets that may have slower connections, it’ll be a poor user experience.
Dimensions of an image are measured in width and height. And you can adjust these based in units of pixels (px). There are also other units of measurement such as inches or centimeters but for the web it’s pixels. Like file sizes, image dimensions come in all proportions. The problem occurs when you have image that’s 2400 pixels wide × 1600 pixels high squeezed into a smaller image container like 800 x 600 px.
When this happens, the browser downloads a larger file and spends the time downscaling it to smaller dimensions as the page loads so that it fits nicely on the page. And while it’s doing that and as the image loads in the background, it pushes the surrounding content that ends up causing content to shift or “jank“. Paired with large file sizes, users have an overall bad experience.
Ways to compress images
If you’re looking to get more out of your images without losing image quality, there are free online, cross platform open source and paid image optimizers. Not all of them will support every image format so pick one that gives that works best for you. Here are just a few of them.
Online
Open Source
Paid
Flash tip
Before you compress files that may contain private or confidential information, always check the terms and conditions when using online optimizers.
Ways to resize images
If you are after a specific width and height, you can resize these with free open source and paid image editors that work on Microsoft Windows or macOS. Here are few examples you can give a whirl.
Open Source
Paid
Wrapping it up
Not everyone is going to have a high speed connection and if users have a poor user experience, you’ll be turning them away from engaging with you. Keep an eye out for file formats, sizes and dimensions by taking advantage of tools out there to help you.
If you need help or don’t quite know where to start, feel free to drop us a line. We’d love to work with you.
