At Spindogs, we develop websites on a 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, we have written 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 and crop images, and optimise them for the web. Contrary to popular belief, you don’t need an expensive program like Photoshop to edit or crop your images. There is actually a variety of online image cropping tools that can help you become a master of web imagery and ensure that they are of the highest quality for your website.
How to resize an image
Let’s say, for example, you are creating a new blog post and your CMS (Content Management System) is telling you the dimensions of the image (in pixels or px for short) should be 600×400 px. Your image is the right ratio but is 5971x3981px, which is far bigger than needed.
You can use a simple, free online tool that is browser-based to resize your image, 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 horribly pixelated images like below.
How to crop images
So, what happens when your image dimensions are too big and the wrong ratio?
webresizer.com has your back again. Along with its handy resizing tool, it also has an image cropping tool.
Say your image is 3100×3586, you want to use it for a blog post but it needs to be 600×400. The ratio of the images is clearly different. 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 a cropped image you’ve been looking for ready to download in the size you wanted.
How to optimise 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 is a slight change and 0 is 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.
Why it’s worth resizing and cropping images
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 images and optimize them correctly.
If you have any questions about web imagery, get in touch to speak to our design team.