How to Prepare Images for Your Blog

How to Prepare Images for Your Blog Kaleidoscope BlogI recently shared with you all 17 Paid and Free Resources for finding images for your blog.

Now, whether you use images you find online, or you create your own images, you may be wondering how to prepare images for your blog so they not only look good, but they work hard for your blog too. I’m here to help! Below I am letting you in on some of the tips and secrets I use to make the most of the images I include on Kaleidoscope.

SIZING + RESOLUTION

In the case of images for you blog, size does matter. You should never just upload and image and have your blog template automatically resize your image, nor should you upload a full size image and then crop it in the admin part of your blog. Why? Uploading images this way means that your blog is storing the full size image. Depending on the image, this could be a significant amount of storage space. Over time, especially if your blog uses a lot of images, this starts to affect the amount of time your blog takes to load. A slow loading blog usually results in readers clicking away before your blog finishes loading and they miss all your fabulous content. That’s not what any blogger wants! So, I have a few tricks to help you have your images perfectly sized so they only take up the storage needed, not a KB more!

1. First you need to find out what size you need your image to be. Every blog template and theme is different, so there is no real standard size, so you need to find out the specific width of your blog body area, therefore discovering the perfect size to make the width of your images. There is a sneaky way to do this. Simply right-click on the an image on your blog that is the correct width and choose “save as”. Then open the saved image in photo editing software, such as Photoshop, iPhoto or on a website like PicMonkey and check the size. To do this:

In Photoshop:

  • With the image open, go to the Image menu, then choose image size. Make sure the measurement in set to pixels and you will have your image size.

In iPhoto:

  • Import the image, click on the desired image in the Library, then click “info”. The information about that image, including the size will open up.

In PicMonkey:

  • Go to PicMonkey.com, then click “edit” at the top. Find the image you want to edit and upload it to PicMonkey. Then click the “crop” option on the left-hand side. Drag the crop markers right to the very edges of your image and take note of the size as displayed in the left-hand crop section.

For all three methods it is the WIDTH size you want to take note of, the height doesn’t really matter.

If you are unable to save an image from your site at the right size as above, then there is an alternative. It’s a little more involved but it gets the job done.

  • Bring your blog up on your screen.

image example 1

 

  • Then, take a screenshot of your blog, making sure that a section of text in the main area of your blog is visible. This will usually be on a single post page, not on your full blog feed page. To make a screenshot on a Mac press command + shift + 3 at once, or on a PC press the “Print Screen” key. These images are usually saved to your desktop.
  • Open the screenshot in an image editing program like Photoshop, iPhoto or use a website like PicMonkey.

image example 2

 

PHOTOSHOP

image example 3

PICMONKEY

  • What you want to do next is crop the image to the exact width of the text, leaving no border. The height doesn’t really matter, it is the width we are after.
  • Then, once the image is cropped you can find the size you need:
    • In Photoshop – simply go to the “Image” menu then choose “Image Size” and make sure the measurements are in pixels and you have the correct size.
    • In iPhoto – click on the image and then click “info” and the size will appear amongst the other information about that image.
    • In PicMonkey – click the “crop” option on the left-hand side. Drag the crop markers right to the very edges of your image and take note of the size as displayed in the left-hand crop section.
  • Note down the width of this image and you will have the ideal width size for your blog! I usually round the number up to the next 5 pixels, for example, if the image size comes out at 653px, I’ll round it up to 655px – just to make sure.

2. Once you have the ideal size needed for optimum display on your blog, you then need to resize whatever image you want to use on the blog to this width. Again this can be done in any image editing program you use, or a site like PicMonkey.

image-example-4In Photoshop:

  • Open the image in Photoshop.
  • Go to the “Image” menu, then choose “Image Size”
  • Make sure the measurement is set to pixels
  • Make sure the chain link is selected between the width and height so that the image will be resized proportionally
  • Also make sure the resample box is ticked
  • Then enter 72 in the resolution box, if it is not there already. You may need to change it from 300 or any other number. 72 is the correct resolution for use online. More on this later.
  • Then enter your ideal image width in pixels in the width box. The height should automatically adjust in proportion to the width dimensions.
  • Click “OK”
  • If you wish to crop the height of the image simply use the crop tool, but make sure you leave the width at full size so as not to make the image smaller in width and no longer the ideal size for your blog.

image example 5In iPhoto:

  • Import the image you want to resize
  • Click on the image and then click “edit”
  • Choose “Crop” on the right-hand side and then in the drop-down menu choose “Custom”
  • Make sure the “constrain” box is ticked and then enter in the ideal image width in the first box leaving the second box at 0.
  • Click “Done”
  • If you wish to crop the height of the image simply use the crop tool, but make sure you leave the width at full size so as not to make the image smaller in width and no longer the ideal size for your blog.

image example 6In PicMonkey

  • Go to PicMonkey.com then click “Edit” at the top
  • Choose the image you want o resize
  • Then click “Crop” on the left.
  • Drag the crop makers to the very edges of your image
  • Make sure the “Scale Photo” option is ticked
  • Then enter your ideal image width into the first box. The second box will adjust proportionally.
  • Click “Apply”
  • If you wish to crop the height of the image simply use the crop tool, but make sure you leave the width at full size so as not to make the image smaller in width and no longer the ideal size for your blog.

 

RESOLUTION

The Resolution of an image dictates how much information and detail is saved into the image. The higher the resolution the bigger the file size and the more space it takes up in your storage. High resolution images also take longer to load on your site. High-res image are best used when you are printing an image and are set at 300dpi. Images on the web only require a low resolution. This means they load quicker and take up less storage space. A low-res image is set to 72dpi.

Once an image has been converted to low resolution, it cannot be made high-resolution again as the file has discarded a lot of stored information in order to make it low-res. So make sure you have saved a copy of your original image if you are changing the resolution.

We already spoke about changing resolution in Photoshop above, but here is a recap, plus some extra info, and how you can do it using the other tools also:

Photoshop

image example 7

OPTION 1

  • Open the image you wish to change the resolution on
  • Click the “Image” menu, then choose “Image Size”
  • Change the resolution to 72
  • If the image dimensions change, then enter in the width you require again
  • Save the image as a .jpeg

OPTION 2

  • When you have made all the adjustments to the image that you desire, WITHOUT having changed the image resolution, go to “File” in the menu bar, then choose “Save For Web”.
  • This will automatically choose the web-optimised options for your image.
  • You can save your image in a variety of file types on the right-hand side, but I would recommend PNG-24 for the best web option.
  • Click “Save”

iPhoto

image example 8

  • Select the image you want to adjust and click on the “File” button from menu bar.
  • Then choose “Export”
  • In the Export window, choose “File Export”, which lets you adjust the size of the image. Your options are small, medium, large, and full-size. For web, you would choose small or medium.

PicMonkey

image example 9

OPTION 1

  • When finished cropping or editing your image, click “Save” at the top.
  • A new window will open with the option of saving a jpeg as “Rodger” (low resolution),  “Pierce” (medium resolution) and “Sean” (high-resolution).
  • Choose “Rodger”
  • Click “Save”

OPTION 2

  • When finished cropping or editing your image, click “Save” at the top.
  • When the new window opens, in the drop down menu next to the file name choose “.png”. This will automatically save your image optimised for the web.
  • Click “Save”

 

IMAGE ORIENTATION

Ok, so truth be told, most blogs look best using horizontal or “landscape” images. They tend to sit more nightly on the page. However, Pinterest LOVES vertical or “portrait” images, and with Pinterest being the highest driver to traffic to many blogs, it makes sense to make Pinterest happy!

Vertical images also look best on a “masonry” style blog feed, like I use on Kaleidoscope.

This is just something to consider. I opt for vertical images to please Pinterest.

TEXT + WATERMARKS

You can easily add text to images in all three photo editing options I have outlined above, but perhaps you don’t know WHY you should add text like titles and watermarks to your images.

It comes back to Pinterest again. You want people to be pinning your images, and sharing them on other social media networks, so you need to make sure you image is working hard for you when not viewed in context of your blog post.

Let’s say you wrote a fabulous post on how to make a gorgeous flower arrangement. You have some stunning images of your arrangement, but haven’t added any text to your image. That image then gets pinned, and repined, or worse, added to Tumblr and any trace of where it was originally published is lost. It might be a gorgeous image, but no one knows that it is part of a “how-to”. Other may even use your image and not be able to give credit as they cannot find the original source.

Now, let’s say you added the title “How To Create a Stunning Bouquet” as a text title onto your image, and added your watermark or web address to the bottom of your image. Now it doesn’t matter where your image ends up, everyone will be able to know it is part of a tutorial and where to find that tutorial!

Remember though, that the fonts and colours you use are very important and should be in keeping with your blogs brand. (more about that here) Take a look at some of your favourite stylish blogs and see how they go about adding text and watermarks to their images as a source of inspiration. Not to copy.

FILE NAMES + SEO

You might think that what you name your image file doesn’t really matter. It does! In fact, your file name is a great way to help bring more traffic to your site!

How?

Well, including a few keywords about your blog post or the content of the image and this will increase your chance of your image being found in searches and readers clicking through as a result.

Want to take it to the next level and really optimise your images for SEO (Search Engine Optimisation)?

When uploading your images to your blog, fill in the “Alt Tag” section for the image. Again, think of keywords that readers might use when searching the internet that relate to your blog post or image. For example, in my image Alt Tags for this post I entered “How To Prepare Image for Your Blog Kaleidoscope Blog”. It details the content of this post, and where it was published. Do this for every image you upload to your blog and I guarantee you will start to get more traffic to your blog through images being picked up in search engines because of their Alt Tag.

Alt Tags are also used in the description when Images are pinned from your site – so that’s another great reason to use them!

________

I know that is a LOT of information, so here is a recap of the main things you should do to prepare images for your blog:

1. Know what the ideal image size is for your blog layout and resize all images to that size/width.

2. Make all images low resolution or use “save for web” options for small storage allowance and fast loading.

3. Consider your image orientation – will you make your images “Pinable”?

4. Add text and a watermark to your images to that it will always relate to your blog post, even when removed from its context on your blog.

5. Use keywords in your image Title and Alt Tag to make the search engines happy.

Follow these 5 tips and you’ll have the images on your blog looking good and working hard!

I hope that helps!

As always, if you have any questions, please don’t be shy. Ask them in the comments below!

________

Image Source could not be found.

 

Amanda Fuller

Founder at Kaleidoscope
Founder of Kaleidoscope - facets of blogging, womanhood and life, Amanda is on a heart-led quest to create a savvy resource for the modern day woman β€” a one-stop-shop overflowing with real life, been-there-done-that wisdom and curated inspiration.

About Amanda Fuller

Founder of Kaleidoscope - facets of blogging, womanhood and life, Amanda is a blogger on a heart-led quest to create a savvy resource for the modern day woman β€” a one-stop-shop overflowing with real life, been-there-done-that wisdom and curated inspiration. She is also a Graphic Designer at Amanda Fuller Designs and a woman who simply loves beautiful things.

23 thoughts on “How to Prepare Images for Your Blog

  1. I have never for the life of me known how to take a screen shot on a Mac and never thought you even could! Thanks so much for that tip. Also, really interesting in knowing about the sizing of images, makes so much sense and I’ll have to go and take a look at my site now to see how it differs. Lots of useful information, thank you for taking the time to write all that out! -Steph x

  2. Thanks for the great tips! When I’ve been resizing my images for my blog, I’ve wondered “what’s the right size”? Sometimes my images are too big where if I post a quote graphic, you don’t see the quote all on one screen; you have to scroll down a bit to get the full quote. Does that mean that my image is too big (even if it’s the perfect pinnable size)?

  3. Thanks, especially of the SEO tip on naming! I frequently use different method for photos. Load image to my iMac screen (27inch screen) resize until it looks about right, take screen shot, use image.

  4. Hi Amanda! Thank you for your post on images for blogs, I really love your writing style- it is easy to follow and very enjoyable πŸ™‚
    Regarding Image rezising, do you know if I can do this in Lightroom? If so, would you mind please sharing how? I just purchased LR and I am relatively new to the Adobe world but I am so excited to learn new things in there!

    1. Thanks for your comment. I have actually never used Lightroom, so I’m not sure how to do these steps in that program, but you could try following the photoshop steps to see if that will work.

What do you think?