2 Warning Signs That You’re Not Resizing Photos Properly

Resize photos
ShareThis:
Facebooktwittergoogle_pluspinterest

Do your photos look stretched or fuzzy?

Does the text on your images get cut off in its prime?

Well, you’re not the only one.

Resizing photos for FB, Google+, and Pinterest. I always seem to use a graphic that is too big for the cover or for uploading to my FB page. I have several graphic editing software, but am not graphically gifted. How do you resize an image properly? – Michelle, UK

Great question Michelle and one that we’ve been asked several times. So here’s a foolproof way to get your images the size that you want.

Why resizing photos is important

  • So your images look professional
  • So you can see all of the image on each site, and not have crucial bits chopped off – this can happen on various Social Media sites particularly if you use text.
  • To reduce the size so that a web page loads quickly (the smaller the image, the faster the web page will load)
  • Most email providers limit the size of images that can be sent, so it’s important to know how to reduce their size.

Read this: to understand what’s happening here

The actual process of resizing the photo is pretty straightforward.

But if you understand what’s happening, you can avoid making the mistakes in the first place.

The best solution is to use a photo that’s the exact size, or larger than what you need.

Why is this? If you use the exact dimensions then you’ll know in advance that all of the image will be showing (including any text you may have on it such as a Call to Action).

If you use an image that is larger than what’s required, you won’t lose any quality if you reduce the size.

If you use an image that is larger than is required and you have text on it, some Social Media sites crop the image and so you could end up with your text missing – cut off in their prime so to speak!

If you have to increase the size of the photo to fit in a particular space, you could end up with a photo that is fuzzy (= pixelated)

To find out more about why fuzziness in a photo occurs click on the link and enjoy the slideshow.

Resizing Photos Top Tip

 

What is also a really good idea is that you use a photo that is the same orientation
as the space you’re going to use the photo in.

Here’s an example of what I mean:

 

Landscape orientation    

This is where the width of the image is greater than the height.

Here’s an example of what a landscape image looks like. This is a Google+ header and the size is is 2120 pixels wide by 1192 pixels in height.

Landscape orientation image

 

Thanks to Plus Your Business for the use of the photo.
(BTW – if you want to learn all about G+, then take a look at Martin’s great training)

 

Portrait orientation:

Portrait orientation is where the height of the image is greater than the width.

This image by Design your own Blog is 396 wide x 584 pixels in height.

Design Your Blog

 

 

Thanks to Design Your Own Blog for the use of this photo.

 

So if you use a portrait style photo (or even a square one) in a place that is actually landscape in shape (Facebook cover photo or web header for example) then chances are that your photo will be stretched to fit the header space and it could end up looking fuzzy.

 

How do you resize a photo?

Most photo editing software has some means of resizing the photo. There are 2 ways:

1. Using the Resize function in the software

Simply insert the actual sizes needed but if you do this then do make sure that you have the ‘Constrain proportions’ selected. See further down the post for the definition of this.

This will mean that the image isn’t being stretched.

Here’s an example of an image where the ‘constrain proportions’ function of the original photo has not been used. See the difference?

You may not think there is much difference but there’s enough for the photo to look not as polished as it could be.

Also if you have text on an image the issue is exacerbated!

Resizing Photos properly

 

 

2. Cropping the photo

Here I suggest you just put in the exact dimensions of the photo – for example 851 x 315 for a Facebook cover photo, and again make sure you have ‘Constrain proportions’ checked  and you should be good to go.

 

 

 

What software is available to resize the images

As I mentioned above almost all editing software programmes have the ability to crop and resize images. But if you’re not sure which ones to use, you could try these.

The ones with an * are free to use and may require you to register, and they are supported by Ads.

*Picresize

  • Select the picture to resize
  • On the next web page select RESIZE (you can crop as well)
  • Resize your Photo – Use the drop down menu (#1) to select Custom Size and put in the width and height in pixels
  • #2 – This is where your custom size shows.

Resizing photos properly

 

What I like about Picresize is that if you try and increase the size of the image to be larger than the original, it won’t let you do it. You get a red error message.

This prevents you from making the image fuzzy and pixelated (see the above point).

 

* ipiccy

This does a whole lot more than resizing images, but here’s the resizing function.

Resizing photos using ipiccy

 

#3 – make sure you have ticked the ‘Constrain Proportions’ option.

Constrain Proportions means: it will  maintain the proportions of your photo if you increase or decrease the size of the photo. And this means the photo doesn’t get stretched or squashed.

Or alternatively, you can take the easy route and use the presets in the ‘Crop’ function with the scale photo ticked and these include Youtube thumbnail, Facebook etc.

Just make sure that once you’ve cropped the photo you pull on the handles to the size you want.

If you’d like to find out how to use ipiccy, we have a training programme specifically for it and you can find out more about it at DIY Marketing Graphics Training.

* Picmonkey

Inkscape – we do have many free tutorials on Youtube which you can find at this link.

Photoshop/Photoshop Elements

Does this clear things up?

I see the question about resizing asked a lot and so I’m keen to know if this explanation is clear.

Please leave a comment below if you now understand this or you still have questions.

 

ShareThis:
Facebooktwittergoogle_pluspinterest
About The Author

Caroline Jones

I’m Caroline and I look to help small business owners create their own graphics by writing tutorials and tips on graphics editing software. I live in Wales , love Tartan and Coffee Ice Cream. You can read more about me here

  • I use photos a lot on my site and have had problems when I needed to re-size them, so thanks for this information – now all I need to do is practice!

    • Hey Barb! You know what they say – practice makes perfect! It does become easier though. Let us know if you need help – 😀

  • ImperfectlyWonderful

    Thank you! This is very helpful. It is so nice to have this info in one place! Sometimes I find it difficult to find what the appropriate size image is for each site. I need to write down them all down!

    • We have done a few guides with the image sizes, but the trouble is they change so often. Even I haven’t got my ‘master’ list handy any more so I too will need to start a fresh one.

  • I find the thumbnails for my blog posts one of the trickiest to re-size. They are tiny at 120px by 120px, so I often have to both crop & re-size.

    • Hey Henneke! So very nice to see you in these Welsh parts!
      Ooh, yes, a bit of a pain, so you must be fab at cropping and resizing by now 😉 The Cropping & Resizing Queen..

  • Delia @ Blog Formatting

    Lately I’ve been using picmonkey to resize my images when I create them, great tool! Excellent explanations and thanks for providing the other options, Caroline!

    • Delia – Picmonkey is a great tool also. Whatever you feel comfortable with.

  • Great explanation! I’ll definitely be sharing this one with my audience. Thanks for sharing DYOB too 🙂

    • It’s a pleasure Marianne! Hope your readers find this helpful.

      • I’m sure they will. Thanks for all your support! 🙂

  • Roz

    Great explanation. I use Ribbit mostly and sometimes pic monkey. Thanks for info on the others.

    • Ro – yes, most programmes do have a resize function, but it’s understand what’s happening that I think it the most help for folks. Then if there is a problem you can have some understanding of the reason for it.

  • Lee DB

    Photoshop is the goto software for all pic work. I noticed no real mention of the obvi os tips.

    1. The resol tion and thus quality of images is expressed in ‘Dots per inch’. (Most net pics/Google Images) are 72Dpi. Printing and enlarging is to be avoided. IF it’s 300DPI then you are laughing. THe Image DPi is found in IMAGE SIZE.

    2. If it’s only for the net and screen viewing then a slight enlargement is doable for a •72DPi• image.

    SIMPLY FOLLOW THESE ACTIONS

    a. First in IMAGE SIZE deselect RESAMPLE IMAGE.

    b. Then change 72 to 300 dpi – OK AND CLOSE image size.

    c. Reopen IMAGE SIZE and select RESAMPLE IMAGE.

    d. Change image size in Pixel Dimensions or Percent to desired size. Always have ‘CONSTRAIN PROPORTIONS’ selected.

    e. Close IMAGE SIZE and reopen it.

    f. Deselect RESAMPLE IMAGE and change RESOL TION to 72 DPi. You now have the best possible enlargement of net images at 72Dpi.

    _______________

    1. If you have an image that is around •300Dpi•, you have the optimum image Dpi for HI REZ printing and net viewing. If you want to use it for the net then follow this for optimum results. It’s really the reverse of above.

    SIMPLY FOLLOW THESE ACTIONS

    a. In IMAGE SIZE, Select RESAMPLE IMAGE and then change the resolution to 72Dpi. This will automatically increase the size the image. At this point you should RESIZE by DOC SIZE or PIXEL DIMENSIONS for the desired screen size.

    b. Image is ready for upload and Screen viewing on the net.

  • Lisa Mallis

    Wow – so much info! I’m bookmarking this post for next time I need it. As always, thanks for all the great resources. I love that you always include free ones. Plus – great dog pictures!

    • Hi Lisa – well, there are lots of tools to do this out there including the paid ones like Photoshop (which we use), but not everyone has the time to learn it nor the inclination. So that’s why we feature free tools as well.
      In fact we use the free ones as well because sometimes it’s just quicker.

  • Always love your pointers. Resizing just right can be tricky! I like the resources you shared and will use them. I use PicMonkey, which I love. But will try out these for sure.

    • Hi Laurie – yes Picmonkey is certainly a tool that you can resize images. Most good editing software will have this functionality.

  • Robin Strohmaier

    Another fantastic article, Caroline, filled with golden nuggets. I haven’t tried these free tools to resize photos and will take a look. I am a Photoshop fan, but am always looking for great alternatives for those who do not have the program.

    • Hi Robin – yes, we use Photoshop to resize (and Inkscape) but it’s horses for course and not everyone haev them!

  • This is great advice. Thank you for all the links and free tools.

    • You’re welcome! Hope you can implement it.