Uploading images to your website is an essential way of conveying a message and illustrating your words. But uploading images in their original form may not suit the webpage due to the dimensions or the size of the image. If the image is too large, it will cause the site to load slower, causing Google and other search engines to punish your site in their search engine rankings, not to mention causing users to turn away in frustration at the length of time taken to load the page. Most people won’t have access to Adobe Photoshop, so here is a quick guide on how to crop and compress images using Pixlr, a free image editor available in the browser, with no sign-up and no download necessary, that is an excellent alternative to Photoshop.
Go to Pixlr in your internet browser. If a pop-up box appears, you can click on “Open image from computer”. Alternatively, click on File –> Open image as in the image below:
Once that is clicked, a box opens up, navigate to where the image is, click on it and select open. The image will open up in Pixlr. For this example, I am going to use this lovely image of some spaghetti, basil and tomato, as highlighted below:
However, let’s say we don’t want the spaghetti and basil in our image, just the tomatoes. In tools on the left, we can see that the crop tool in the very top left is already selected. This will allow us to crop, or cut out, the area of the image we want. Click the corner of where you want to cut and drag diagonally, like below. Release the mouse and press enter on your keyboard. That will crop the tomatoes out as you selected.
When that is done, if you’re happy with the image, go to File –> Save, and the following box will appear:
Set the name of your file, the format you prefer (jpeg is usually the best), and the quality. The better quality, the bigger the file size. Setting it to 60% is usually the best quality/size trade-off. Then hit Ok, choose the location you want to save it, and you’re done.
That’s how to crop images. If you want to just resize images so that they are all the same size then it is very similar. Let’s use our image from above which includes the spaghetti and basil. The image needs to go into an area that is 300 pixels x 300 pixels. So click on the drop down arrow beside the constraint “no restriction”, as in the image below, and select “output size”:
Once that is done, enter 300 in the width column and 300 in the width column. Then drag from one corner to the other as was done above. If you can’t seem to click on the very edge of the image, click outside the image. This will crop the image from the very edge. Once done, release the mouse and press enter. Also, it is worth noting that the images in the slider for the ETBI school websites should be 1080 x 350.
If the image shrinks down like in the screenshot below, you can click on the size in the bottom corner and change the percentage to 100% (or more) if you want to see it better.
After that, just save the image as in the instructions above, making sure to adjust the quality to the desired amount.
If you are uploading to WordPress and are having difficulty, check out our other blog on uploading images to WordPress.
Leave us a comment or drop us an email if you need any more information or clarification. Your website will be looking sharp in no time.