There’s something so dead simple you can do to your site to help make it load faster for nearly all of your viewers. Any guesses as to what that could be?
“Perform some black magic on it?”
Well, not quite, but I like that you’re thinking outside the box. The answer is much simpler and it shouldn’t require eyes of newt or any of your blood. I’m talking about compressing your images.
Have you ever meandered onto a website, possibly a photographer’s site with heaps of portfolio images, and had to sit for what feels like ever while everything loads? It’s 2018 right now. It should be criminal to suffer through dial-up-like performance. The reason for all that waiting is the photos they’re using are enormous, full-resolution beasts. Each one is probably around at least 3 megabytes big, if you’re lucky. That may not be a huge problem for one image, but when you’re trying to load 10…20…50… photos, that website is going to feel like it’s trapped in molasses.
It’s important to be a considerate web designer. Not only does a fast loading page show some respect to your visitors, it’ll help keep them from closing your tab in justified frustration. In this post, I’ll be showing you some worthwhile steps you can take to strip away all the unnecessary junk from your images. Let’s get to it.
First things first, you’re not going to do yourself any favors by working with low resolution images. If you’ve got tiny photos measuring something like 500 pixels wide by 338 pixels tall, then what you’ve got there are images that are going to look blurry and terrible on your website. Don’t be that kind of person. We live in a high definition world, so kick that resolution up!
Squarespace recommends using images that are at least 1500 pixels wide, but no more than 2500 pixels wide. Sure, they’ll accept bigger photos, but then you’re not actually fixing anything (and they’re going to resize your images anyway). So check your photo sizes:
- On a Mac - right click an image file and then select Get Info
- On a PC - right click an image file and then select Properties
We need to understand what file types we can work with. Squarespace only accepts three types of image files:
Don’t even think about trying to throw on some TIFFs or PSD files. Those things aren’t going to display and they’re usually crazy enormous. We’re talking 20mb to over 100mb each.
JPG files will likely be your most common file type. They’re ubiquitous and can be compressed like no one’s business. They work especially well for photos.
PNG files are perfect for icons or anything that needs a transparent background. Let my astronaut friend here show you what I mean:
GIF files are commonly known these days as animated photos. You can throw these all over a Squarespace site, but remember that a GIF file is essentially a bunch of images that play in order, like a video. Those things can become huge, so take caution with them.
If your image isn’t at least 1500 pixels wide, then do yourself a favor and find a different image that is. You can always make an image smaller, but you can’t make one bigger and have it look good. To resize an image, you can use the Preview app if you have a Mac and Windows Photo Viewer if you have a PC.
If you’re using stock photos and need something bigger (or not watermarked), then head on over to one of my favorite places on the internet: Pexels. They’ve got just about any photo you could ever need.
While we’re at this, let’s fix up your file names. Uploading a ton of images with file names like DSCN1425.jpg or IMG0136.png isn’t going to help you stay organized. Furthermore, you’re not going to do yourself any SEO favors with names like that.
Have fun with your file names and get more descriptive with them. Turn DSCN1425.jpg into girl-laughing-with-water-balloon.jpg. You’ll know exactly what that image is without even having to think about it now.
Time to slimming up your images. What these tools try to do is take away the complexity of your files. Most use something called “lossy” compression. During compression, a program will look for blocks of the image that share similar colors and average out those colors. For instance, instead of using thousands of similar red colors in an area of your image, it’ll “smudge” that bit into hundreds of similar colors. That’s certainly not the most technically accurate explanation for the process, but it’ll give you an idea.
Here come the handy tools for you:
- ImageOptim - a handy, downloable Mac app that can compress .jpg, .png, and .gif files
- TinyPNG - a useful web service that can take up to 20 files at a time
- Compressor.io - another web service that will do both lossy and lossless compression
Any of those will do the trick. Give them a full size image and they’ll spit out a file that will look just as good and have a shockingly small size, like 25-75% smaller on average.
Keep working with your images until you’ve got their file sizes as close to 500KB (kilobytes) or smaller as you can get. That’s the file size Squarespace recommends, so that’s what you should aim for.
Thinking outside the box is surely what was done when image compression was being developed. I can imagine someone saying, “Hey, so how can we take an image and make its file size super small without actually doing anything people can see to the image itself?” That may sound like some sort of black magic trickery, but I assure you it’s not.
We’ve gone over some handy and free tools to make your website load so fast you should think about changing your site’s name to “Barry Allen.” Take the time to optimize your images and make your website a more pleasant place to spend some time on. Your visitors will thank you.
Keep being awesome, cats.