I bet you work really hard on your blog. The last thing you need is some nerd telling you there’s something else you need to do.
You write great posts. Then you pair them with nice-looking graphics that’ll get noticed on social media and take the time to pin, tweet and Facebook them.
So it really sucks that one or two wrong moves can make your images 20 times bigger than they need to be.
Worse still: Multiply that by however many of those extra-big images are on any given page. Suddenly you’ve exploded your load time into unreasonable territory.
You’re probably losing page views.
The worst page is usually your front door. Your home page, with all those gorgeous featured image thumbnails.
If your site is more than a hobby, it costs you when people leave.
Enough Debbie Downer already
Everything above is true. And it’s a pervasive problem, else I wouldn’t get all ranty about it.
But change up just three things in your usual routine and BOOM – you’ll be rocking a much zippier website.
Oh yeah, and this: None of these suggestions are difficult, expensive or time consuming.
Choose the best image dimensions
Every social platform specifies at least one optimal image size. Twitter, Facebook and Instagram display a different size depending upon where on the platform the image appears.
If you’ve been at this blogging/social media thing very long, you know these recommended sizes are subject to change at any time.
In this post we’ll focus only on images shared from your site. Those are the ones that directly affect its performance.
Need to keep up with other platforms or get more granular about the various sizes? Sprout Social offers a continuously updated guide to social media image sizes.
How many different image sizes should you create?
Shares to Pinterest, Facebook, Twitter and Google+ account for the vast majority of social media sharing.
When you look at optimal image dimensions for those platforms you’ll realize you can get away with just two image sizes:
Best dimensions for Pinterest pin images: 735px wide by 1102px tall.
Workable dimensions for all other platforms: 1200px wide by 628px tall.
I use Social Warfare Pro, which makes it super simple to include these images without necessarily having to embed them in the post or page.
The free option is great, although its Pinterest options aren’t quite as robust.
Bigger images aren’t better
Make sure you don’t use images any larger than necessary. And don’t scale them down in the WordPress editing window (instead of resizing them before uploading).
Scaling images in the editor doesn’t discard pixels. The entire image is loaded.
Use the best file format
JPEG for pretty much everything
Most people don’t realize how huge a difference it makes when they create a Pinterest image and save it as a PNG instead of a JPEG.
They just like that slightly-more-crisp text that PNG delivers.
I get that. Really, I do. And if it were only text in the image, and only one or two colors, PNG would be cool.
But when you have photos or anything else with multiple colors in it, PNG creates monster-size files to cope with how bad it is at those things.
Simple logos and text graphics with only a few colors are usually good candidates for PNGs.
Anything else? Choose JPEG.
3% prettier is nearly 20x slower
To give you an idea how big a difference the right file format makes, I saved the same image in both PNG and JPEG.
I then created an optimized version of the JPEG with ShortPixel (the image optimization tool I recommend).
Here’s how each stacked up:
In case you’re like my hubby and love data visualizations, here ya go:
Social platforms squash ’em anyway
Even if you ignore best practices and don’t care about making people wait (hopefully…but maybe driving them away) on your site to load, it’ll be for nothing.
Pinterest, Facebook, Twitter and every other social platform optimizes your images on upload.
Yep – your pretty PNG with its 3%-more-crisp text? It’s a slightly softer JPEG.
Sorry.
Might as well accept the slightly-less-perfect reality and save as JPEG.
Optimize images the best way
Make it automatic
Let’s be honest: If it ain’t easy, we aren’t going to do it.
Unless it’s fun.
Having to think when it comes to image optimization isn’t fun.
Set up ShortPixel (or whatever else you use) to compress and resize automatically on upload. Figure out the largest size you need and set that as the max size.
You’ll never have to think about it again. Whee!
Get familiar with the settings
ShortPixel has every setting you’d ever need to squash the hell out of your images (without any noticeable loss in quality, BTW).
But it’s possible to defeat it.
For example, ShortPixel knows when an image would be better off as a JPEG than a PNG. It’ll convert it for you automatically on upload if it’ll result in file size savings.
But only if you’ve ticked a box in the settings. And only if the image doesn’t contain transparency.
Other helpful features include the option to remove EXIF data (this could save an additional 15% on file size) and automatically sync saved images with Cloudflare.
Simple enough?
Feel like you’ve finally got your head around some easy changes that’ll lighten your (page) load?
I hope so!
Leave a comment either way and let me know what’s going on with your social images.
For future reference
If you’re like me, you’ve read so many blogging-related posts in the last few days that your head is spinning.
You’ve got the background info you need. Now all you have to do is remember 😉
Or, you could get all the important info in one handy printable sheet when you join my weekly e-mail list.
I’d love to have you 🙂