How to Resize an Image for the Web Using PIXLR

How to Use PIXLR to Resize an Image for Web Use

In Marketing Photography, Social Media Marketing, Web Development by Allen Butler

If you’re like most people, you’ve probably wondered, “How do I make this image smaller without destroying it!?” For years I used Microsoft Office Picture Manager to quickly compress images to “Web” or“Document” size in order to email them or place them in an email marketing piece, or upload them to my Web site. That seemed to work pretty well, but then I wanted more control, and dug deeper into Adobe Lightroom and Photoshop to get the results I wanted. However,for most people, Adobe photo programs are overkill and come with a steep learning curve.  Today I’ll walk you through how to use PIXLR to resize images for the Web, email, or thumbnails.

To resize an image with PIXLR: first, upload an image or point PIXLR to the URL of the image you want to resize. Next, click the IMAGE menu drop-down and select “IMAGE SIZE”. Tell PIXLR what your desired image dimensions are, and hit OK.   Finally, on the FILE menu drop-down, select SAVE. Play with the Quality slider and watch below for your target save size.  Adjust to taste and hit OK.  Save your file with the name and location desired, and you’re done!

What Size Image Do You Need?

While you could use PIXLR or any other image editing program to just crunch that image down, one size does not necessarily fit all when it comes to images. For best results, how you intend to use the image is terribly important.  If you intend to use the image on a Web site or blog post, it pays to know what size the image “should” be.  Many times, if you’re uploading an image to a social media platform, they’ll advise what the suggested image size should be. It might be 1000 pixels by 1000 pixels or an overall maximum upload size of 1 megabyte.  Make a note of this.

If you’re planning to upload an image to your Web site, or use in an email marketing piece, you should seek to get the best image quality and smallest size for the intended space the image needs to fill.  Web sites can get bogged down right quick if you’re uploading images that are too large. This will potentially also result in your getting dinged by Google for a slow Web site, and they won’t direct users there. Not good for your SEO strategy, right?  So, unless you’re featuring large, high quality images for a reason (a photographer?), you should make those images less that 100kb, if possible. The same thing is true for email marketing pieces. If your images are too large, they can automatically be rejected by the incoming server. Not good!  Regardless,you’d be surprise how good an image can look on the Web if it’s sized correctly for the space it’s in.

1.5--Size Image with PIXLR-- Inspect Element

If you want to use best practices for Web sites and email templates, you might want to use the “Inspect Element” function of your browser
to find the optimum image dimensions. For example, if you’re creating a blog post, and you want the image and text to be responsive, upload the largest size image you’ll need, and let your system dynamically serve images based on your user’s device. A good practice is look at a blog that features an image that is the perfect size for what you want to do. Look at it on your desktop Web browser as well as your cell phone. Look great on all of them? Perfect. Just right click the image on your desktop browser and select “Inspect” or “Inspect Element,” depending on your browser. This will open up the development console, where you’ll be able to see the dimensions of the photo. Note that, and you can make your image this exact size using the directions to follow.

Resizing and Saving in PIXLR

First navigate to PIXLR.com and select “OPEN PIXLR EDITOR”. It should be the first thing you see. This will open a new window, and you should have three options:

2 --Size Image with PIXLR--Open Image

You’ll probably choose to either Open an image, or point to a URL for an image you found online (is that a copyrighted image? Just checkin’!)  Navigate to the image you want to open, and it should pop right up. Next, if you’ve got pre-determined pixel dimensions, you’ll want to grab those and have them handy.  For general Web use, and if you don’t have specific dimensions, you might suggest something less than 1000 pixels on the longest edge. Now let’s open up the RESIZE function.

reSize Image with PIXLR--Size Image

Now that you’ve resized the image to the using the longest edge, it’s time to save that image in a size that works for you.  As you can see from my image, if I allow the program to use it’s default slider quality (80%), I’ll get an image that is only 100kb. This is perfect for the Web, and even if used full screen on a desktop, it’ll likely still look really good. Feel free to play with the slider function and try a few different sizes and see how they turn out. Sometimes, experimentation is key, and you’ll quickly get a feel for what sized images work best for your application.

Hopefully this helps you get the image quality and size you need for all your projects. If you have any further questions about image manipulation, just let us know!