If you post images on the internet with some regularity, you may have noticed that every platform has different recommended sizes for images. It can be a pain to make a graphic over several times to post in multiple places. In a previous post, I wrote about Biteable, a tool that will automatically convert any image to all of the recommended sizes for social media platforms. This is great for my social media needs, but not for another resizing issue that comes up regularly for me.
Our website has a row of featured events/services/announcements that need to be sized at 300px x 300px in order to line up or stack neatly on any size screen. I have been given graphics and logos in all dimensions that I have needed to make fit into these blocks. Canva has a magic resize tool, but that hasn’t generated results that work for me.
Enter Pixlr
Pixlr comes in two “flavors.” Pixlr X and Pixlr E. Both are free, browser-based tools that don’t require an account. They are similar to Canva, but not as full-featured. Pixlr X is meant for creating basic designs, while Pixlr E is for editing photos. The free version of Pixlr X is what we are using today, but both products have robust premium versions if you are interested in AI assistance, a larger decorative element library, more support, or no ads.
How I Use It
I am fortunate enough to have several design editing tools at my disposal, and I use different tools for different tasks. Pixlr X fills a very specific need for me, and it never fails.
As I mentioned, the library website needs images that are 300px x 300px. Product logos/graphics, ready-made templates in image editors, and graphics for initiatives from outside our organization (Summer Reading, Tech-Talk, etc.) rarely come in that size, or even in a square shape. For instance, here is the logo for Consumer Reports, a digital resource we provide to our patrons:
The original is 1600px x 900px, so it needed some editing. I opened Pixlr X, then clicked “open image” in the center of the page.
This opened a window that allowed me to select the original Consumer Reports image that is 1600px x 900px. The first thing I wanted to do is scale this down to a 300px width, so I clicked on the layout button in the left menu.
I selected “resize page (scale)” and reset the width to 300. By leaving the “constrain proportions” toggle activated, the height automatically adjusted to prevent the logo from being distoryed.
The next step is to add a 300px x 300px background and center the image. Staying in the layout menu, I selected “set page size.” Here I changed the height to 300, made sure the “relative change” toggle was deactivated and anchored the logo in the center of the image.
This is how it turned out. The checkerboard part indicates transparent space. The next step is to add a background. I could just add white, but then the image would be really boring.
Instead, I want to copy the green from the logo and make that the background. I did this using a separate eyedropper tool to get the hex code number for the color (covered in this article) and then going back to my layout menu in Pixlr to activate the background toggle. This suggests a few colors, but you can click any color to reveal a box to enter a custom color.
I entered the hex code for your desired color in the box and hit “enter” to apply.
This is the finished product. It’s a simple fix that preserves the company’s logo guidelines while making the image suitable for our website.
Pixlr offers different formats and quality options for downloading your new image.
Summary
Pixlr is a free tool that makes design and image editing easy. While many of its features are duplicated in other free or low-cost image editing tools, the ability to change the size of the image canvas without messing up the aspect ratio of the original image in addition to changing the image itself has permanently secured its place in my image editing toolbox. What are your favorite design editing tools? Let us know in the comments.
