How many times has this happened to you – you’re browsing the web and see an article that looks interesting. You click on the link and …..
It takes forever to load! Ughhhh!!! I don’t know about you, but usually that means I close the window and move on.
You definitely don’t want to be the link on the receiving end of that treatment, but unfortunately tons of sites are and 9 times out of 10 the reason is because the size of the images on their page is enormous! (Disclaimer: like most statistics on the internet that last one was made up, but Image Bloat is real people!)
I’ve been the victim of my own extra-grande image sizes in the past and suffered the consequences in terms of slow sites that drive away traffic, so I know your pain. Fortunately for you, I have a simple fix for your image size woes.
Why Images Matter
Images are crucial for bloggers and entrepreneurs because people are visual creatures and no one wants to read a 5 page post with no pictures. Seriously. Take a look at some of your favorite blogs or websites and chances are that they have gorgeous photos and a clear visual style. Now, you may not be a pro behind the camera (yet) but most of your favorites learned on the job also, so don’t stress about it but do commit to learning more going forward.
One great way to get images for your blog or website is via stock photography, and there are plenty of free or low-cost options out there. One caveat though, typically those gorgeous images you download are going to have a massive file size attached to them. Same goes with any photos you take yourself (even on the iPhone). So, let’s talk about how to fix that, shall we?
Image size optimization doesn’t have to be intimidating and once you develop a good workflow for your image production it will become second nature.
Step One: Save as a JPEG
I for one had no idea what the difference was between a JPG and a PNG when I first got started, nor did I realized that PNG images tend to be 2X or more the size of an identical JPEG image. Just to give you an example, when I downloaded the cover image of this post from Canva as a “Image: For Web (JPG)” it clocked in at 487 kb pre-optimization, while when I downloaded the same exact image as a PNG it was 1 Mb! That’s a substantial difference folks. PNG images still have their place on websites, but they should be reserved for graphics or logos (especially if you require a transparent background) and usually these items are much smaller in terms of pixels so their overall file size isn’t as large as an entire photo would be.
One caveat: if you need an image with a transparent background (say, because you want the image to be round or something) or you have a lot of text (like the infographic above) then you definitely want to go the PNG route because in the first case JPEG just can’t do that and in the second it gets really blurry when you scale it down. You should absolutely run it through an optimization software though before uploading (see step three).
Step Two: Size Appropriately
Remember how I said that the files you download from a stock photo gallery or off your iPhone are really large? Try 3264 x 2448 pixels large… even a 15″ MacBook Pro Retina only has a 2280 x 1800 px display. While it is ultimately up to you how large you want to go, here are a couple of max-sizing recommendations based on your usage:
- fullscreen, entire page image: 1600 x 1080 px
- featured images optimized for Pinterest: 735 x 1102 px
- featured images optimized for Facebook: 1200 x 628 px
- images intended for Instagram: 1080 x 1080 px
Or, if all these image sizes make your head spin stick to these two classics:
- horizontal: 1024 x 512 px (works for Facebook and Twitter)
- vertical: 800 x 1200 px (works for Pinterest and Google+)
Insider’s Tip: Canva for Work offers the “magic resize” function (among many awesome others) which means you design your image once – then you click a button and it will create alternatively sized images in any format you like – including sizes for all the social media channels and more!
Step Three: Pre-Upload Optimize
There are a few plugins out there that will do the image optimization for you after you have uploaded your images to WordPress (such as EWWW Image Optimizer); however, I would recommend optimizing your images before you upload them instead. One reason for this is getting an idea of what the image will look like post-compression before you put it on your site, and the other is that you typically have a bit more control over the optimization process if you do it in advance.
If you are using a desktop photo editor like Photoshop or GIMP, I have linked to a few tutorials on how to compress your images as you download them. I don’t work much with Photoshop and couldn’t ever get the hang of GIMP, so I use PicMonkey and Canva exclusively for photo editing and graphics creation now. After I download them I run my images through an Image Optimization program called ImageOptim (Mac) or RIOT (Windows), both of which are free and use pretty standard image compression algorithms. ImageOptim saves over the original image (not sure about RIOT since I’m on a Mac, so read the documentation first) so make sure you save another copy elsewhere in case you don’t like the results. It’s also drag and drop so it goes to work as soon as you drop the image into the box, easy! If you want to get more granular into controlling the optimization process check out this tutorial, but the basic setup works well enough in most situations.
One of the advanced options is to temporarily enable “lossy” compression (as opposed to “lossless”) which means the image is of a lower quality than normal – under no circumstances do I recommend this on any image that you have put text over because it will really blurry, but normal high quality photographs on the other hand can tolerate a bit of lossy compression without ruining the overall look. In fact, the images on my homepage were generated with a lossy compression of about 70%.
Insider’s Tip: If lossy compression looks okay at your original size, it will probably not look as good in the smaller thumbnail sizes. If you are going to want it in a smaller size, create that size and compress it and upload it separately or just use regular lossless compression (depending on file sizes and personal preference)
Get Those Images In Shape
Well, there you have it! Three simple steps to reduce the image size of your pages, improve your page speed, and your SEO while you’re at it. If you’re still not sure if your site is optimized properly, I would love to help you out with a personalized Site Audit and Analysis. I also personally recommend the Genesis Framework to all of my clients for its speed, SEO optimization, and mobile-responsive design – and when paired with properly optimized images and a well thought-out strategy for content generation and promotion it’s a recipe for success!