Image cropping
Posted 7th April 2014 in Content
You know how it feels. It’s pretty frustrating when you click a link and end up waiting forever for the web page to load. Sometimes your web browser even gives up entirely!
As a website owner, you’ll be keen to know your visitors aren’t pulling their hair out, waiting for your site to load. Good coding practices can go a long way to keep loading times to a minimum, but this is all undone if your sites images aren’t properly optimised.
Getting ready for the web
That photo you took on your phone this morning is perfect for your website. But it’d take far too long to load if it was used as-is, directly from your phone’s photo library. And that’s with a decent broadband connection, never mind over something much slower like 3G.
Fear not! This is where your content management system (CMS) steps in!
Size
When you upload an image to your website, your CMS should resize it to pre-determined dimensions. Oh, and you don’t have to worry about what the dimensions will be – your web designer should’ve taken care of that.
This means the image is exactly the right size for your web page, and no bigger. So the loading time is as short as possible.
Shape
It’s perfectly normal that your web designer will have decided that a certain image shape (with a set height and width) works best for the overall design of your site.
This shape could be a square. It could be a stubby rectangle – sort of like a postcard. It might even be a longer rectangle, more letterbox-shaped.
The rectangle the image is cropped to could be either portrait (taller than it is wide) or landscape (wider than it is tall), depending on what the photo’s purpose is. If it’s a picture of you, for your About page, it’s more likely to be portrait, but if it’s for your homepage, it might be more likely to be landscape.
Cropping
So your CMS will resize your image to a predetermined height and width, which is great. But what happens if the original photo doesn’t work with those dimensions?
By default, an iPhone takes a photo in widescreen dimensions (16:9), which means it’s a lot wider than it is tall (or taller than it is wide, depending on how you were holding your phone!). This could cause a problem if your CMS is configured to display photos as squares: you’re going to lose the left and right (or top and bottom) bits of the photo.
Your CMS could handle this in one of two ways:
- Squash the image to make it a square
- Crop the left and right from the image to make it square
Option 1 would look terrible, so option 2 (cropping) is normally the way to handle image resizing.
Losing these edges might not be a problem if the subject of your photo is smack-bang in the centre, but what happens if your subject is on the left hand side? Yep – they’ll be chopped in half!
Preparing for the crop
A CMS is pretty clever. But not as clever as you and I… So sometimes it has to use a pre-set way of doing things.
Your CMS will probably not be able to tell that the subject of your photo is on the left hand side and it will crop in the centre of the photo. As mentioned, this might work nicely if the photo suits this, but if not you might have a bit of preparing to do, before you upload your photo to your website via its CMS.
There are a number of great photo editors out there:
…but I find these a bit overkill for simply resizing an image.
Mac users have iPhoto, which does a decent job of cropping an image. The built-in Camera app on iPhone/iPad does a pretty good job too.
Windows users can crop an image using Windows’ Paint and Android users can use their camera app.
All you have to do is crop the image to the approximate shape of the image that will be output by the CMS. Don’t worry if you don’t know the exact ratio/dimensions – doing it by eye is fine. All we’re looking to do is stop any important bits of the photo being lost when the CMS does its work.
If you want to get it exactly right, just ask your web designer what ratio or dimensions they’ve used for your site’s photos and they’ll keep you right.
Happy cropping!
Preparing your images for your website before you upload them via your CMS can help avoid any nasty cropping issues. And don’t forget to check the relevant page on your website once you’ve done the uploading!