Resizing, cropping and optimizing your images for web

At Spindogs we develop websites on daily basis so we have seen first-hand what can arise after a website goes live.

In many instances, imagery tends to be problematic as it is all too easy to add an image that has the wrong dimensions, is skewed or cropped incorrectly. With this in mind, I will be writing a series of blogs about how to create images that will ensure your website is as polished as the day it was launched. 

First up is how to resize, crop and optimise your images for the web. Contrary to popular belief, you don't need an expensive program like Photoshop to edit your images, as there is actually a variety of online tools that can help you become a master of web imagery. 

Resizing an image

Lets say for example you are creating a new blog post and your CMS is telling you the dimensions of the image ( in pixels or px for short ) should be 600x400 px. Your image is the right ratio but is 5971x3981px which is far bigger than needed.


You can use a simple, free tool that is browser based so you don’t even have to install it on your computer. webresizer.com makes it really easy to get your image down to the right size.

Go to the site and click the orange ‘Resize photos here’ button. Upload your image via the ‘choose file’ followed by the ‘upload image’ buttons. An ‘original’ and ‘preview’ image should appear. Directly underneath shows you a list of the image details. Below the details you’ll find your editing tools.

Go to the ‘New Size’ tool. Enter your desired width, 600px in this case. Don’t worry about the height as it will work out the height based on the ratio of the image. Sharpen should be set to 0 and Quality to 100. Ignore the other settings if you're a beginner. Click the ‘Apply Changes’ button and check the updated width and height readings of the preview image details. If they are correct you can continue to download the image by clicking the ‘download this image’ button. Voila! You now have an image that is the perfect size.

Remember that most CMS’ can resize an image down for thumbnails (of the same ratio) automatically. This is great as you won’t need to upload multiple size images. What you can’t do is resize to be a bigger size as this will result in horrible pixelated images like below.

Cropping an image

So what happens when your image dimensions are too big and the wrong ratio?

webresizer.com has your back again. Along with it’s handy resizing tool it also has a crop tool too!

Say your image is 3100x3586, you want to use it for a blog post but it needs to be 600x400. The ratio of the images are clearly different. So upload the image to webresizer.com, press the crop tool button just below the upload section. Enter the desired width and height and it will show you a crop box over your image which you can move around freely. Then position the crop box on the focus of the photo.


Once you're happy with the positioning, hit enter on your keyboard and you're left with the image you’ve been looking for ready to download in the size you wanted.

Optimizing images

Have you ever been on a website where a big image banner photo takes ages to load? This happens when someone has uploaded an image that is really large (10mb for example) when it needs to be less than 1mb. This is obviously annoying and leads to a poor user experience, especially in this age of high speed internet where everything appears almost instantly. webresizer.com saves your bacon once again by giving you the option to shrink the file size of your image, thereby making it quicker to load. You can control this by the ‘Image Quality’ setting. 100 being a slight change and 0 being the smallest it can possibly be. As you can see from the example images below, the lower you get the poorer the quality of the image.

I’d recommend you don’t go below 80 as you still want the images to be crisp. Be sure to have the width in the ‘New Size’ box the same as the original image as we are downsizing the file size not the dimensions as we did previously. Click ‘apply changes’ and you probably won’t notice any difference but if you check the new file size we have significantly brought the file size down. This image will now load instantly when the user visits the site.

It's always worth doing

Images are key to websites, they can easily make or break a website or be the difference between losing or converting a lead. So don’t let that new set of professional photos go to waste by making them look broken on your site. Always resize, crop and optimize correctly, as if you do this your imagery will never be a cause for concern. 

If you have any questions about web imagery, we are always happy to answer any queries you have!

What services are you interested in?

What services are you interested in?

 

 

 

 


*

Matt Gadd
About Matt Gadd

Matt is our Head of Design and has always had an interest in design and typography, which continued after he completed a degree in Graphic Communications. He has over 10 years’ experience as a designer and has produced outstanding work for a variety of clients. 

View all blogs
More Blogs