We like clients to be able to update their websites once we hand them over. But there’s a knack to it, and the area that usually proves most troublesome is adding images. Easy peasy to resize images for your website right? I’ve got this digital photo of my cat saved on my computer for the homepage of my website, simply upload it through the CMS and…
BOOM! One horribly squashed cat. What on earth went wrong?
Generally, image fields on a website will be designed at a specific size. If you add a different sized image then the website will do its best to fit it to that space, but no matter how good the code, in the end the site’s just guessing. For best results you should always resize the image yourself before uploading it. Yes, it’s a pain, but there are good reasons why you need to do it:
- Aspect ratio: If you add a portrait shaped image to a landscape shaped image field then it’s either going to get squashed and look all wrong (as above) or cropped and possibly lose a vital part of the image.
- Aesthetics: You can select for yourself which part of the image to use. Crop out any unwanted detail to focus on the subject.
- File size: That 6000 x 4000 pixel image from your 24 megapixel camera is going to look great when you print it out, but your visitors won’t like waiting for ages while the oversized image downloads.
- Server load: All those oversized images will rapidly fill up your allocated server space and we’ll have to put you on a more expensive hosting package!
Cropping and resizing images is a breeze if you’re a Photoshop whizz. Thankfully for everyone else, there’s the Social Image Resizer Tool. There are other online graphics tools available but this one makes light work of cropping and resizing at the same time. Here’s how it works:
- Click Browse and open an image from your computer.
- Click Upload.
- From the Choose a Size dropdown, select User Input from the bottom of the list.
- Enter the required dimensions in the W (width) and H (height) fields. We will let you know what size images you need when we hand over your website.
- Drag the corners of the selection box on the image to choose an area to crop to.
- Click Done Editing.
- You will now see the cropped image and you can click Download to save it back to your computer.
Now your website will be picture perfect, and cats everywhere can sleep easy!