I totally get it. Compressing images for the 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.
Oh, what's that? Ticktock, ticktock. Geez, I don't
have time for this. Psst! Make sure to
stay until the end is I'll share a resource to check the loading speed of your
website. Before we dive in, please subscribe to my channel,
where I'll demystify digital marketing and share the best marketing strategies
to grow your coaching business online.
And don't forget to hit the bell, so you don't miss a thing. 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 below. 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 in the description
below this video. 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 below. 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 this video where I listed all the tools
mentioned in this video.
I'd love to have you inside my free "League of Brilliant Coaches" community
where I share marketing strategies to get you more coaching clients.
Just head to the description below this video where you can find the link.
And as I love having you around,
please check out my other videos here 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.
[music]