You can optimize your images for the web and make them load faster using Pixlr. The websites mentioned in this tutorial are Unsplash and Pixlr.
In this tutorial I will be finding images on Unsplash and optimizing images for the web using Pixlr
If you develop sites for clients there’s a good chance those clients will be adding blog posts, with featured images, to their sites.
Wouldn’t it be nice if you could have one simple set of instructions for all of your clients, without having to worry about which image editor they use.
You can. Just recommend that they all use Pixlr.
Pixler is a free and powerful image editor
Pixlr is a free image editor that’s more than capable of resizing, cropping and compressing the photos you or your clients use on websites.
When you load the pixlr web page you have 2 options
- Opening an image on your computer or…
- Loading an image from a web page.
Using pixlr to open, crop and compress an image from the Unsplash website
- Browse Unsplash and find an image that you like.
- Click the image, then click the image a second time. You must view the image at it’s full size!
When the magnifier icon changes from a plus sign to a minus sign…
- Right click and choose: Copy image address.
Now go to the Pixlr website and choose…
- Open image from URL
- Paste the image address you copied from Unsplash into the dialogue box.
- Click OK.
The image is now open in Pixlr and ready to be resized
- In the Pixlr file menu choose Image > Image Size.
I’m making a large hero header image, so I chose 1920 pixels wide. I do not touch the height setting at this point. I’ll do that later using the crop tool.
After I click OK my image is resized to 1920 pixels wide.
Next I select the crop tool, it’s the top left button in the toolbox
- In the top bar, I select Constraint: Aspect Ratio.
- I type 1920 for the width and 1080 for the height.
- I place the crop tool in the grey border that surrounds the photo.
- Then as I drag, the box is constrained to the correct proportions.
- When I click the left mouse button, the marque I’ve drawn changes into a crop box.
- At this point, you may want to try again. If you do, press the escape key on the top left of your keyboard.
- To crop the image press the enter key.
I’m now going to save and optimize the image…
- I choose: File > Save. From the file menu.
- I type a name for my image.
- I choose JPEG for the file format.
- I choose 30 or 60 for the quality setting.
- Then I click the blue OK button and save my image to my desktop.
One tool, one set of instructions, everyone’s happy
If your clients already have a photo editor they prefer to use, that’s great. But for everybody else, Pixler is a good free tool that’s easy to use.