How to Resize Images for the Web (Photoshop + Pixlr)

Updated: Jun 20

Want to learn how to quickly and easily resize and optimise your images for the web and SEO?


This short guide will show you exactly how to do this using both Photoshop and free online photo editor, Pixlr (in case you don't have Photoshop). You can watch the instructional video below, or read this guide, depending on your preference.

Why is it important to resize & optimise images for the web?


If you don’t resize and compress your photos and imagery before uploading them to your website, it can slow down your website’s loading time considerably – leading to frustrated visitors and decreased rankings in search engines.


Like most things in life, I learned this the hard way…


Back when I landed my first job as a web content executive, I didn’t know anything about resizing and optimising images for the web. I ended up slowing down the website substantially after months of adding huge images! (They add up over time, trust me).


So, what happened?


Luckily the web developer noticed it before it affected search engine rankings too much, but I got a little slap on the wrist and had to go back through every blog post I'd written to edit and re-upload every single image.


All 200 of them…


That wasn’t a particularly fun, or quick, process.


Let’s make sure that doesn’t happen to you, yeah?


Please learn from my mistakes...


Resizing and optimising your images before uploading them to your website may take a little longer now, but trust me when I say it will save you SO MUCH TIME in the long run.


Here’s how to properly resize images for the web, and optimise them for search engines (SEO) at the same time.


How To Resize Images For The Web

1. Find out the dimensions for the image placement


First, you need to know the width and height in pixels that your image should be in order to fit the space on your website properly.


For example, an image for a blog post will be a different size to an image that’s used for a big homepage banner.


You need to resize your images accordingly, because if you make them too small they will pixelate when they are uploaded as they’ll stretch to fit the space.


There will be specific image size requirements to fit the theme of your website.

  • For my blog posts, 740-800 pixels wide is perfect.

  • For a full screen banner, 1000-1300 pixels wide is usually the right width.

You can see the dimensions of an image on your website by right clicking on the element, and clicking ‘inspect’.


A console will pop up with code from the page. Next to 'Elements' on the top of the panel, on the left, click the button with the square and mouse curser on it.


Then hover your mouse over the image you want to know the dimensions of, and it will tell you the width and height of the image in pixels, like this:

You’ll only need to know the height if it’s set. Like a homepage banner, or feature image for a blog.


Once you know the dimensions of the space the image is destined for, you’ll need to make sure your original image is that size or larger.


Why?


Because you can make an image smaller, but it’s very hard to make a small image bigger. If you do, it will pixelate and look blurry and grainy.


If the image you have is too small for the space, sorry my love, but you’ll have to pick a different one! Otherwise it’s going to look low-quality and unprofessional.

2. Crop your image


Using a photo editing tool, like Photoshop, or free online photo editor Pixlr, crop your image to fit the space it’s destined for on your website.


When cropping your image, make sure you’re cropping the height and width in the pixels required to fit its intended space.


Once it has been cropped and you’re happy with it, it’s time to resize and save the image for the web.


I cover how to do this in both Photoshop and Pixlr below, depending on which you have access to.

3. Export images for the web in Photoshop


When you're ready to save the image, navigate to: File — Save for web

Then this box will appear:

Change image size: (bottom right boxes)


Between 700px and 1200px is usually wide enough for the width, depending on your website template. Type this into the width box and the height will automatically change.

Then, top right under JPEG: Click the drop down arrow (where it says ‘very high’)

Change compression quality to either:

- Very High, high, or medium, while keeping an eye on the size of the image on the bottom left corner.


You want the image to be around 100kb, depending on its size. The bigger the dimensions of the space the image is destined for, the bigger the image needs to be to maintain quality.


Tick: Optimized


Look at the bottom left corner: showing JPEG, image size, and loading time.

Aim for 200K maximum. If it's larger than this, change compression to medium or low. Ideally, you want the images to be 100K or less, depending on the width of the space they need to fit.


For example, a banner image will be a larger file size than a blog image - probably up to 300kb.


If your images are over 300kb you should resize them, as they will be slowing your website down.


Click save.


Rename the image in a way that describes the image and use the keyword you want it to be found for. This is for SEO purposes. Don't use capitals or underscores. Try not to use numbers. Dashes are fine.


For example, this image will be included in a blog providing interior design tips for people on a budget, so I could rename this image: budget-lounge-interior-design-tips


Now your image is optimised for the web (and SEO).

How to optimise images for the web using Pixlr


If you don't have access to Photoshop, you can use a similar free online image tool called Pixlr X. The process is almost exactly the same resizing and optimising images for the web, but here's a quick run-through of how to do it.

When ready to save and export the image:

  1. Click 'Save'

  2. Change image width to desired dimensions

  3. Change quality to make image desired size (about 200kb or less, depending on the size of the image)

  4. Change file name to something SEO friendly/relevant to the page the image will go on.

  5. Click 'Download' to save the image to your computer. You're done!


How to batch resize images


If you have a bunch of images to compress for your website at once, use BulkResizePhotos.com – it’s a free image compressor tool that enables you to batch resize a group of images at the same time, without having to do it individually.


However, this doesn’t give you as much control over the image compression than if you do it individually. It’s easy to make images too small by accident, which will make them look pixelated on your website.


Only use this compressor if you have a lot of the same kinds of images to compress at once, such as 10 images for a blog post, or 50 images for a shopping category. The images need to be around the same sizes as each other to start with, as the compressor resizes them all the same way.


Now you’re ready to upload your images to your website.


Congrats – now that you know my image optimisation secrets, you will save yourself loads of time and frustration of having to re-resize and upload images in the future.


Have a question about image optimisation and SEO?


Leave a comment below or get in touch through my Contact Page.


If you want to learn more about optimising your website for search, be sure to check out my Beginner’s Guide to SEO, and sign up to my mailing list (sign up box at the end of this article) to get SEO tips and tricks delivered directly to your inbox each month.


Need help with SEO? Check out my SEO Consultancy Services.

© 2020 by ContentQueen. Wellington, New Zealand.

  • Black LinkedIn Icon

CQ serves clients in the UK, USA, EU, NZ and AU