How to resize and crop photos for your website

In my many years of designing websites for a growing number of clients, perhaps one of the most asked questions from them when they’re editing their website or drafting a blog post is, “how do I resize a photo for my website?”. Either they’re needing to crop a photo to a set of exact dimensions or they need to reduce the file size for their website (because no one likes a super large image that takes forever to load). Website platforms such as WordPress and Squarespace do their bit to resize images but reducing their file size even further yourself will ensure faster website loading times.

My tool of choice for these tasks is Photoshop but not everyone has the inclination to subscribe to it or take the time to learn it. Nor do you need to anyway. In this day and age, we have loads of apps to choose from.

Not all computers are the same and every user will resonate with the app that feels most logical to them. Based on this, I’ve provided some go-to solutions to help you on your way.

Preview on Mac

First up: if you’re a Mac user like me, you need not go further than Preview; the inbuilt app that your Mac defaults to when you’re viewing an image or PDF on your computer. Here’s my tutorial video showing you how to both crop your image and resize it if needed.

WordPress Image Editor

WordPress has its own inbuilt image editor which can help you on the fly to edit images when writing your content. Watch my tutorial to become familiar with cropping and resizing images in WordPress.

Pixrl

One easy to use app that is purpose-built for any images you need to edit for your website, social media and newsletters is Pixlr. And true to its name, all dimensions within the app are in pixels, perfect for your online images. And it’s free. Even better, it doesn’t matter if you’re on a Mac or Windows computer, it’s all done within your internet browser.

Gimp

Another free, lightweight and Mac and PC friendly app is Gimp. You’ll need to install their software first and then start playing with your images.

Visit Gimp for a few short image tutorials to get you started.

TinyPNG

After you’ve resized your image, head to TinyPNG to further resize its file size. This is an important step before uploading your image to your website.

I recommend trialling a couple (or all) of these options to find the one that fits with you the best. Let us know how you go in the comments below. If you use a different app from the ones listed above, let us know too. Happy editing!