Last week we talked all about what makes up the perfect blog post. One of the things we touched on, but didn’t expound upon, was images. This week we’re going to dive into images in blog posts in detail, since they are a crucial part of the puzzle.
Google takes a lot of things into account when it ranks your website. One of those things is how quickly your site loads. If your site takes forever and a damn day to load properly, Google is going to penalize you for it and you’ll show up lower in search results.
Which is not awesome.
One of the ways you can make sure that your site loads quickly is to make sure you optimize images for your blog.
Here’s some things you’ll want to take into account.
If the image you’re trying to display is something like 1.4 MB in size, it’s going to take forever and a damn day to load.
Instead, make sure that all of your images are under 400kb or less (and in this case, less is better!).
72 DPI is perfectly acceptable for images for your blog. 300 DPI (or anything greater than 72 basically) is too much, and increases your file size pretty dramatically.
Remember, people won’t be printing the images from your site, so there’s no need to display them at print quality.
Save your images to the width of your blog.
What do I mean by this?
Let’s say, for example, blog posts on your website are 900 pixels wide. It makes no sense to embed an image that’s 2000 px wide, does it?
Also, larger size images than needed will only consume your data size allowed with your hosting company, eating up more of your profit margin. Not good!
If you’re unsure how wide blog posts are on your site, you can experiment by saving an image at different widths. If an image you upload to the post has some blank space between its edges and the edge of the blog post, your blog post width is wider than that.
Another great way to do that is by measuring the width of your blog post space using this really cool pixel measurer extension for your browser.
You can use it to measure (in pixels) how wide the content area of your blog post is.
So for example, in the image below you can see that the blog post content from one of our posts on the site doesn’t fill the entire web browser from side to side. There’s empty space on either side of the content.
You can also see the area highlighted in blue, which is where I used the measuring extension to measure how wide, in pixels, that area is.
If you look up at the top of the picture, you’ll see all the dimensions for the area in blue, and notice that the width is 824 pixels wide. Therefore, it’d be dumb to upload images to my blog post that are greater than 884 pixels wide, because the blog post will reformat the image so it’s smaller anyway.
If you account for this before you upload your images, you can save yourself quite a bit on file size and load time just by making sure you’re not uploading necessarily large images.
Save For Web.
Another great way to optimize your images for blog posts is by using the Save For Web feature in Photoshop. (If you’re not sure how to find that feature on your computer with your version of Photoshop, a quick Google search will probably get you the answers you need.)
This feature is made specifically for saving images for the web, and allows you to change the image dimensions as well as the image quality – decreasing the quality will also decrease the file size without decreasing the image dimensions.
This comes in handy if/when your blog post page width is pretty wide, and saving an image to match that width leaves you with a large file size. In that case, you definitely want to use the Save For Web feature and decrease the image quality.
So to recap, here’s what you’ll need to remember:
- Make sure your file sizes are less than 400 kb (or less if you can manage it)
- Make sure your images are at a dpi of 72
- Make sure your image dimensions aren’t larger than what your blog post will display
- Use the Save For Web feature to decrease file quality so that your images stay under the recommended file size.
When saving images for the web, you want to make sure you save the image in the sRGB colorspace. Photos set to AdobeRGB are the main frustration of photographers posting images online because it causes the images to look dull and green, and the images don’t accurately reflect the true beauty of the photographer’s talents.
Let’s face it … After you’ve put so much time and energy into a session, the last thing you want to see is wonky colors
If you’re not sure how to change the colorspace, we have more info here on the blog about how to do that.
That’s all there is to it!
Nothing too difficult, but all important if you want your blog post to load super speedy quick.
Our next post is going to cover some of the things you’ll want to be doing to optimize your blog post for SEO (in other words, Search Engine Optimization). You can read it here.
Until then, go get ‘em tiger!
P.S. You can pick up our free web & photo enhancer photoshop action on the site here. It’s great for optimizing images for the web so they show up nice and bright and clear every time – as long as you’re using the sRGB colorspace of course 😉
DO YOU WANT THIS BLOGGING SERIES SENT RIGHT TO YOUR EMAIL SO YOU CAN PRINT IT & KEEP IT WITH YOU?