WE ALL CREATED "PIXELATED" ART IN THE PAST WHEN TRYING TO COMPRESS IMAGES TO GET THE FILE SIZE DOWN...
Well, the good news is that with the right process and a great app (which is free by the way!) you don’t need to compromise between image quality and file size.
...how I prepare my images to reduce the file size immensely before I even touch a compression tool (most people skip this step completely, which is a big mistake).
...which tools you should trust to edit your images like a pro without spending big bucks on monthly subscriptions.
...the compression tool you must use if you’re after stellar images with tiny file sizes and the exact settings to reduce the image file size without compromising quality.
...the free tool that analyses your page loading speed including recommendations to make your page lightning fast.
...why image file size matters when it comes to page loading speed.
Image optimisation is easy when you follow this two-step process that explains how to compress images for the web.
I totally get it. Compressing images for web is a nerve-wracking job. I mean, let’s be honest, how much can you really optimise your images without losing quality?
As you’re here, I guess you created some “pixelated art” in the past, too, or are wondering why your images suddenly look so different after compressing them or trusting a highly rated compression plugin.
In this video, I’ll show you how I prep my images to reduce the file size by a lot before I even touch a compression tool. Then I’ll reveal the compression tool I trust for years now. It’s as easy as drag, drop, and you’re done.
You’ll get stellar quality images with a tiny file size so your coaching clients won’t jump ship before they even reach your page.
Because we all know how important it is that your website loads at lightning speed to keep your visitors around. Psst! Make sure to read all the way to the end is I’ll share a resource to check the loading speed of your website.
So, let’s talk about the prepping process first, which unfortunately most people miss completely. Think about how you want to use your image - as a background image in full width or as a teaser image for your blog on the overview page. Because depending on your usage, you need a bigger or a smaller image from a dimension perspective. And that’s where we start when working towards a tiny file size; we adjust the dimensions of our image.
If you’re on a Mac, you can do this with the “Preview” app. Or, the app that I use for all my photo editing is Affinity Photo - a great app by the way available for Windows and Mac, which actually can do most of the stuff that Photoshop is doing just without the price tag.
I’m curious, what tools do you use to edit your images right now? Let me know in the comments here.
So, let’s get to work. I have an image here which happens to be the thumbnail of my last YouTube video where I’ll talk about how you can spy on your competitors’ Facebook ads. If you haven’t watched it yet, put it on your must-have watch list. Now this image here is 5,616 pixels in width and 3,744 pixels in height. It has a file size of 17.2 MB. As I want to embed this image on my website in full width, I’ll change the dimensions to 1,920 pixels in width, then I’ll let the system do the rest of the math and click “OK”. Voilà, you just decreased the size of your file size from 17.2 MB to 2.3 or 2.5 MB depending on which app you used by just doing a little bit of prep work.
Now let’s assume you want to use the image as a teaser on your website. What I do is think how much percentage would the image take on my page compared to the full-width image? So maybe it’s one fourth. What I do then is divide 1,920 divided by 4 equals 480 pixels in width, and I go with that for the teaser image. Easy isn’t it?
Let’s compress this baby without losing quality. I love “ImageOptim” for this with, and this is important, “Guetzli” enabled. You can play around with the other settings here, but I do love mine because they provide a good balance between compression and quality. “ImageOptim” is free for Mac, and you can use the link on this page here or find the link here.
So let’s take our jpeg and make a copy of it, drag it over, drop it and wait and wait and wait. Depending on the file size and due to the fact that “Guetzli” is enabled, it will take a little bit of time, but it’s worth the wait. Tada, and it’s ready. Here is our compressed file. We decreased the file size from 2.3 MB to 424 KB. Pretty amazing, isn’t it?
I’m impressed by the file size, but what about the image quality? Let’s have a look and compare, and let’s zoom in a little bit. The original image is here and the compressed one here. I personally can’t see a difference truth to be told. Let’s see what it would look like on a website.
I put this image on a blank page here in WordPress. This page has the original file embedded on it with no prepping and no compression. This is the prepped one where we adjusted the dimensions, and here I have the prepped and compressed image embedded. All three of them look pretty much the same. No pixelated areas, no shocking differences in colours. This one looks a little bit less crisp at least on my MacBook Pro display here, but I can live with that especially considering the small file size. So for me... thumbs up.
Let’s see what difference the file size makes when it comes to loading speed. I use Google’s “PageSpeed Insights” here. Now let’s look at the loading speed of the prepped image, remember no compression, 66 points out of 100. And the loading speed of the prepped and compressed image, 70 points out of 100. Now maybe this doesn’t sound too much of a difference to you but remember I put only one image on this page. Most likely, you’ll have more than one image on your page, so it will add up quickly. And your clients won’t certainly be happy browsers - especially the ones using their mobile phones - if you don’t do the work and prep and compress your images properly.
Now you have all the knowledge and tools at your fingertips to prep and compress your images for web without losing your good looks, your sanity or your savings.
What do you think of this process and the tools I share to compress your images? Let me know in the comments here.
If you liked this video, please give it a thumbs up, subscribe to my channel and share this video with your friends, peers, VAs or web design team. And if I went too fast, check out the description section below the video where I listed all the tools mentioned in this video.
And as I love having you around, please check out my other videos on YouTube. They’re all about how you can grow your coaching business online with ease and grace.
Bye for now, and I’ll see you in the next one.
Having a fast website with amazing-looking images is key to a well-executed branding strategy (and a great boost for your conversion rate). And with the process and app, I share in this video, you’ll be all set.