The best way to process your images for your website

We all know people don't really read much, well maybe you do! But pictures are so damn important to websites and social media but there are things you might be doing which are not doing your site speed any favours. According to HTTP Archive, on an average, around 64% of a website’s weight is comprised of images. 

If you're not careful with your images, you can also get penalised in search engines for being a bit on the slow side, not to mention that you're annoying your readers.

What exactly am I talking about? Uploading images holus bolus without worrying if they're the right size for purpose without thinking about compression and image size.

say what now?

If you're making a blog post or a new product on your website, doesn't matter if it's wordpress, shopify, squarespace or the myriad of others...

Do you click upload and you're done?

Let's have a chat about that. 

Check Your Image Size

How about we work through an example.

I've downloaded a really pretty image of flowers from unsplash. Get that image info by hovering, right clicking, apple+I or properties (Windows) in the file manager of your system before you upload it.

How big is this one image?  You can see that the size is 2.56MB. Given that the data size of a page should be under 3MB, you're going to obliterate any chances of this if you upload this bad boy. 

Next thing, dimensions. You need to have your image at 2000px or so wide for any hero type sections, but on a page anywhere is generally okay with 800px wide. This one is 3456 wide, and is portrait oriented so the height is even bigger. 

yowsers!

Already uploaded it to wordpress? You can check this info in media library, click on the image and view the Attachment Details. 

Image Compression And Optimisation, Baby!

If we are able to reduce the size of these images without reducing the image quality, then it will have a direct positive impact on page load speeds and user-experience of visitors on your websites. YASSS.

Optimizing web images is a process of delivering the high-quality images in the right format, dimension, size, and resolution while keeping the smallest possible size. Your website itself should have some tools to help, but the most powerful of all is getting it in there right in the first place. 

There are a lot of tools you can use to trim those images to size. There's a method for those with Adobe Creative Cloud, and another for those without.

You can even batch process images in Photoshop so you don't have to do this to all the images individually. Handeh.

Have all your images open, and go to File > Scripts > Image Processor.

You'll have a few options in here to play with. I have set my images to be 2000px wide (not the best for portrait, so try and get landscape in one go, and portrait in another) and at 6 quality, and JPEG. Hi res images at 6 quality really can't be differentiated by the naked eye. Promise. You can choose which folder to export into as well. Hit Run, and watch the magic happen.

Our image from the example was knocked down to 218KB.

If you've created the image in Illustrator, you can export the image using File > Export > Save for Web. You have a series of settings to use, but keep an eye on the file size in the bottom left corner. You can see how changing the image resolution changes the file size. Save where ever you like when done.  

There are a bunch of services you can use, but I like http://picresize.com/ because it has all the options in one place. Our example image was reduced to 543kb easily. It's as simple as following the video below. Lots of annoying ads, but it's free...

Wanna See The Results?

Let's place these images side by side, and see what the difference is. If this post loaded slowly for you, here's the reason! I've forced them all into the same sized container, though their 'natural' size is different.

The Original

2.56MB, 3156 x 5136px.

Hero Dimensions

526KB, 2000 x 3000px

Smaller Dimensions

219KB, 1000 x 1500px

Can You See The Difference?

If you squint, place your hand on your chin, and say 'hmmmm', chances are you can see a bit of a difference between the depth of the first and the third. But geez, you have to try.

Considering the big image is over half the weight of this page even though there are three videos on it too, smushing those images makes a big difference to load and little to the eye. Totally worth the effort.

Reckon That's All Too Hard?

Well, there's actually a plugin you can use to smush what's in your database already AND resize your images to the appropriate pixel width. The paid version on EWWW Image Optimizer is the go. The results are outta this world.