How to prepare photos for your website for free with Pixlr [VIDEO]

pixlr-blogNOTE: Since being published, image size preferences have moved on. This tutorial still shows you how to manipulate images but for current sizing preferences, please read The right picture size is worth a thousand blog posts: Image sizing for blogging, Apple and Facebook.

One thing that will hurt your website’s usability and search engine rankings is using photos that are too large and heavy.

If users (or Google) catch you using images that take too long to load, you will punished by them turning their backs on you.

Short of buying software like Adobe Photoshop Elements (which I love), there is a free online tool, Pixlr Editor, that can cover the basic steps of preparing images for the web. On the Pixlr page, scroll down a little and click to launch the Editor web app.

What makes website photos different?

Photos on web pages need to be large in visual size to grab attention but small in file size so they load quickly.

In today’s article, I will play you a video tutorial I made that walks you through the basic steps of preparing images for the web.

Of course, you will have thought through what sort of images you need to illustrate your products, services and overall brand positioning, so today’s tutorial will pick up from there.

I will assume you have taken a great image on your smart phone, tablet or camera and have managed to save that to your computer.

For smart phone and tablet users, simply click on your image in your devices photo gallery, choose to email it to yourself and then save the image file to your computer.

For camera users, connect your camera cable to your computer and transfer photos manually.

Tutorial: Using Pixlr to make images web ready

The key steps I demonstrate in this video are:

  1. Opening Pixlr editor at
  2. Opening your selected photo in Pixlr
  3. Rotating the photo (sometimes you need to do this)
  4. Checking the light levels (making images darker or lighter)
  5. Cropping the photo to the desired shape while cutting out unncecessary elements of the photo using the marquee tool, set to be constrained 1 to 1 (the constraint is optional, I just prefer square images on my websites for aesthetic appeal)
  6. Changing the pixel dimensions (or visual size) of the image to something suitable for the web (I choose 600 x 600 pixels because that size tends to sit nicely on most web pages, allowing room for text to wrap around the photo)
  7. Naming the photo file something meaningful, not just IMG7675
  8. Saving for the web as a jpeg file at 60 per cent quality

Good luck with your photo taking, editing and publishing.

If you need guidance on adding photos to your WordPress website, take a look at this tutorial I produced earlier this year: WordPress Basics: Publishing A Blog Post.

Here is the video tutorial for Pixlr. Special thanks to Carol from Bromeliad Bed & Breakfast in Darwin for permission to use the photo in the video.




  1. Scott Schulze

    Hi Steve,

    Nice article. one minor point is the typo in the 3rd paragraph where you have “took” instead of “tool”, now this could be deliberate just to see who notices and contacts you in which case well done. :+)



    • Steve Davis

      My work here is done 🙂

      And typo fixed. Thanks.


  2. Gianfranco

    400×40 pixels?? I thought you suggested 300×300 to me.

    • Steve Davis

      Hi Gianfranco. An important thing to remember is that everything changes online, constantly. New templates, new trends, new innovations. I suppose the insight is: web instructions are not etched in stone.

      And, I should point out I usually advise somewhere between 300 and 400 pixels as a rule of thumb.

      Glad you noticed and I hope this helped.



Submit a Comment

Your email address will not be published. Required fields are marked *

Chat With Us On Messenger