One of the hardest parts of building your own website should be one of the easiest, putting photos and logos on your pages.
Does any of this list sound familiar?
- The image is too big or small
- The image is pixelated
- The image takes too long to load
- The image doesn't load at all!
- The background is the wrong colour
- The format is wrong, what is a JPG?!?
- I only want a bit of the image, not the whole thing, how do I do that?
- The colours are all wrong
- I don't want to spend £100000 on software just to put a picture of our staff party up
Here I am going to address all of these common questions and show you the simplest and cheapest (completely free) ways to get your images up and running quickly and professionally.
The software you will need
Good news! Photoshop is not a requirement to edit your photos, if you have it, or want it, get it, but to crop, edit and even create professional images for your website you do not need it.
What do you need then?
So many options, I am going to mention just two:
They are both a lot like Photoshop, only they are both free and available for most operating systems.
Gimp is a program you download, it is a fully fledged editing package that does cropping, colour correction, scaling and all that jazz, you can download gimp here.
Oh how I am in love with the guy who created this online and free version of Photoshop, it looks like Photoshop, opens the same files and works in the same way, except it is missing a few techy bits and bobs and is completely online, and free, did I mention it's awesome, and free? Use Photopea right here right now.
What else do I need?
Nothing, that's it, either of these two excellent and free software packages will fulfil your needs as long as your needs are simple image editing, hell even if you have something more complex they will probably still be ok, give them a try.
What are you hoping to do?
I am writing this guide for people who have a website, and need to upload images to it, were talking logos, photos, backgrounds etc. If you are trying to do this sort of thing and having the kinds of issues I mentioned earlier, then you are in the right place, lets jump in to some concepts.
Re-sizing - My image is too damn big! Or it's really blocky and low quality!
If you took a photo on your phone there is a good chance that it's a huge high quality file, much bigger than it needs to be for the internet. When you upload the file, your website image manager may well make it the right size for you, but then again maybe it wont and the below looks familiar.
In the top example you see the Green Gremlin logo in the top banner of the page, it is the correct size. Below is the same image, only it is too big. Because of its size, it stretches the banner out and stops the page looking the way we need it to look.
The image should be 60 pixels wide and 40 pixels high. Some prebuilt templates will change the proportions for you, but others wont. In the above example we are looking at an image which is 200 pixels wide and 119 pixels high. We are going to resize it, and were going to use Photopea, so follow the link, or use your own software if you prefer.
- Open up Photopea
- Close the massive banner that gets in the way of the screen
- Click on Open From Computer right in the middle of the window
- A window has opened to find the image on your computer, find it, click on it
- Your image has now opened up in Photopea
- There is a menu at the top of the window with the words File, Edit, Image etc, click on Image, then select Image Size
- The width and height are displayed, next to Height is a symbol that looks like a chain link, leave it as it is, this joining the height and width together to keep them in proportion to each other
- Change the height to the height you want the image to be (guess if you aren't sure, you can do this again if you need to) we are changing our height to 40px
- The width changes automatically because the two dimensions are linked, now click OK
- Your image is shrunk, we need to save what we have done
- Click on File, then Export As, then select the file type you used originally, in my case its a PNG
- Click Save, then a box will open asking if you want to download the saved file, click download
- Your newly edited file in saved, probably in your downloads folder
- Have a cup of tea, you did it!
Before we move on, what if your image is not too big, but all blocky or pixelated? When this happens, your image is too small, instead of too big as in in the above. The web browser is trying to enlarge it, but the pixels are just tiny blocks of colour, so enlarging them just gives you bigger blocks instead of greater detail.
You need to find a larger version of the same image and use that, or tell the template you are using to display the image at a smaller size, that is a CSS issue which we aren't covering here.
Cropping - I only want a bit of the image not the whole thing!
You have a new person in the office, they need a photo for the website, the one they sent you is perfect, only it has someone else in it too, but its fine, we can crop that guy out! Here is our example photo.
we are going to use Photopea again, so open it up and follow the below to crop that cheesy looking guy out of our photo.
- Open Photopea
- Click on Open From Computer (Or File > Open if you already have Photopea up)
- On the left of the screen are some tools, at the top is a white arrow tool, below that is a box with a dashed line, hover over it and it says its called Rectangle Select, click it
- Now use this tool to draw a box around the bit of the image you want to keep
- You have made a dotted line box now, if it is in the right place, click on Image in the menu
- Click on Crop
- Boom! The rest of the image is gone
- If you are happy with what you have done, click File > Export As and select the image type you need
- Hit Save and download your cropped image
Below is my cropped image so you can see what I mean:
Cropping is great for getting rid of a bit of an image that doesn't fit your purposes, it can also be used if an image is too big but you don't want to make it really small, like if half of a photo is sky and you just want to get rid of the sky.
Colour correction - It's green but my logo is blue, how do I make the green bit blue?
Colour correction is taking a step into fancy photo editing, but it is a powerful tool that can add a touch of class to an image, lets say our brand colour is a vibrant red, and the image we just cropped above has a woman with hair that almost matches the colour of our logo. Maybe it would be cool to have the two colours exactly the same, it will add some harmony to the page and keep our strong branding going full steam. It may also look like cheesy crap so use your own judgement, anyway, here is how to change the colour.
- Open the image (see above examples for how)
- Click on Image > Adjustments > Hue/Saturation
- Make sure Preview is selected and move the box so you can see your image
- Now move that Hue slider around, watch the colours change
- Click on the Range drop-down and you can isolate different colours to affect, its not perfect but pretty good
- I selected Red in the Range, tuned the Hue down a smidge and turned up the Saturation to make it bolder
Our colours here are all greens, so I turned this redhead into the Grinch:
White balance - My photo is murky and dark, can I fix it?
If your photos are murky and grey than I am going to change your life, well the photos part of it anyway. Take a look at this happy snap of a pagoda I took with a DSLR, proof that an expensive camera does not make you a good photographer.
Its ok, but the darks are a little dark, lets see if we can fix this up. We are going to use GIMP for this, so either download it, or find a tutorial for your preferred program.
- Open GIMP
- Click on File > Open then select your murky happy snap from your own computer
- Click on Colours > Auto > Equalise
- Your image should now have more colour detail, Click on Colours > Auto > White Balance
- Your colours should change a little, with fewer stark colours and a more harmonious whole
Save the file and enjoy your better image. Here is mine.
See how the blues come out better? The image is suddenly much more detailed and the colours have changed to have greater depth. This technique may destroy the natural light of the image, or it might enhance it. If you image looks worse when you apply the auto colour options, try using the manual ones. There are many great tutorials about how to edit colours with more finesse.
Shrinking - The image is too many MB, can I make it smaller?
We've all been there, you upload your nice photo, only to be told by some snotty website that the file is 'too large', that there is some limit and your picture has exceeded it! Or maybe you upload an image and it mysteriously makes the page load like an arthritic tortoise after a heavy day. Either way, your image is too damn big.
Now were not talking its dimensions like we were before, not its number of pixels wide or high, we are talking megabytes. Whats the difference? Information! Depending on the image type, the amount of information present in an image can have a dramatic effect on its size. Let's say you have a huge white square, some image formats need only use a couple of bits of information to describe it, basically its height, width and colour (white). Now add some black to the same image, now there is height, width, colour1 (white) and colour2 (black) as well as which bit of the image is which colour.
Now add 100 more colours, can you see how that detail can turn a tiny file into a huge one? And what about resolution? the more detailed the image is, the more description of detail needs to be in the file, so a crystal clear photo of every crater on the moon is going to be a larger file than a blurry white glow from a low resolution camera.
Ok enough technical talk, you want to know how to actually reduce the size of an image yes?
Our pagoda image from above is 757KB (Kilobytes) but we can make it smaller without affecting its pixel dimensions:
- Open Photopea and get an image up to edit
- Click on File > Export As and select the image type you need, I am going with JPG
- Do you see the Quality slider? Move it from 100% down to 0%
- On the bottom left my new file size has gone from 757KB to 10KB if you are happy with the image quality then hit Save and use the image
- I wasn't happy so moved the slider up until the image was acceptable, I settled on 50% and a size of only 47KB (a big difference so well done Photopea)
- Hit Save, use your new tiny file and save precious seconds on loading your page
Formats - It needs to be a JPG, or a GIF or whatever, bit it isn't!
We have talked a bit about formats, JPG and PNG mostly because they are popular. In the old days it was either JPG or GIF for the web, JPG is a format which allows for lots of different colours and detail while still keeping images pretty small. GIF did something special, it had large files, but it allowed for a transparent colour, and also moving images, so you could play a little video or animation. Cool yes, but these days only used in Whatsapp messages.
You are right, none of this matters, what matters is you have a file in one format, and your website or some I.T. womble needs it to be a different format.
- Open up Photopea
- Open the file (if it wont load then the file may well be corrupt)
- Click File > Export As and select the file format the website is insisting on
- Hit Save and download your new compatible file
Call up Human Resources and let them know you need a certificate and a raise, while you are waiting, check out the tutorials from Photopea and learn some deeper skills.