Resizing Art for the Web

posted in: Uncategorized | 1

In light of the recent discovery of the crap web site wallpart dot com, among others, who’s business model relies on scraping the internet for copyrighted images on private blogs and making them available for print posters, here is a quick primer on reducing the resolution of your artwork so it still looks great on your web site, but will print very blurry. I’m including info for WordPress, Mac and some Windows references (I don’t have access to windows at the moment, but I expect it is quite similar). There are also online image resizing utilities (this is a bit snarky, sorry; http://bfy.tw/Rot) I can’t vouch for them.  If there’s something I didn’t cover here, scroll down to the bottom and leave me a comment, I’ll try to edit it in later.

This has been a hot topic in Zentangle circles, and on Ben Kwok’s Ornation Creation facebook group (If you’re not familiar, he’s worth a look.) Certainly you can use Photoshop for this, I’m going to assume if you’ve got it you know how to use it. A minor caveat: Each time you resave a .jpg file, you degrade the quality of the image just a bit. Sort of like the 50th generation of a photocopy is usually illegible. If you can save your originals as tiffs, or RAW, that is better.

Most of us follow the path of least resistance and post images of our artwork that we took with our phone, directly from the phone—me, too! Unaltered, these images can absolutely be used in print without your knowledge or approval by folks with no moral compass. Print resolution requires that an image have at least 300dpi (dots per inch) to print looking good. Usually, images come in from your phone at 72dpi, which is screen resolution, and super crappy for printing. No problem, right? Wrong. Those images are 72dpi, but they’re usually 32×45 inches at that resolution, so it is trivial to print high res at smaller sizes. A regular image, straight from your phone, has at least enough pixels to print at high resolution to an 8×10″ size page. This is a feature, phone designers want to accommodate your desire to have nice pictures to print. Your job as an artist is to see that only people who you approve (like paying customers) are capable of doing this.

The same goes for scans, usually if you have the equipment to scan your artwork, you likely already control the resolution situation to your satisfaction. When I scan, I create a high res image for myself, and a low res image for the web 720×576 pixels (72dpi at 8×10″—can still be used to print a 2×2.5″ image at high res. I guess they’re welcome to that.) I usually save the number 72 in the image name, i.e. “flowers72.jpg.”

An added benefit of smaller images is that your blog page load times will speed up.

Mac

I have Photoshop, but sometimes it is a bazooka when all I need is a squirtgun to get the job done, so I frequently use the built-in Preview software. Super simple, just open your image and go to Tools: Adjust Size on the menu bar, then change things as you like: Keep it under 720×576 and you’re gold.

Screen Shot 2015-06-21 at 11.49.23 AM
Menu bar: Tools: Adjust Size…
Screen Shot 2015-06-21 at 11.49.38 AM
The Adjust Size window in Preview on OSX on Mac.

Windows

Here is a link to using Microsoft Paint to resize your images. It works basically the same way. Here is the link to a windows app that will let you resize, called, aptly, Image Resizer.

WordPress

I happen to be using WordPress for this site, so I can tell you about how I use that. Wp comes with a few built-in image editing tools, including resizing. That is what I use on images I upload directly from my phone (on the phone app, I create blog drafts including images) You need the desktop browser interface to edit images, not the phone app. So after the images upload to the Media Library from my phone, I go to my laptop and resize them in the browser. (I could put them on my laptop to begin with, but space is at a premium there; your situation might be different.)

It looks like this:

Screen Shot 2015-06-21 at 10.59.20 AM
Click on an image in your Media Library to get this window.
Screen Shot 2015-06-21 at 11.00.04 AM
These options will appear when you click Edit in the previous window, along with icons for cropping and rotating above the image.

There is more information on using these tools on the WordPress.org Codex.

At the Scale Image area, you’ll have to do some thinking about how big you want your image to be. I try to keep everything under 720 x 576 pixels (8×10 @ 72dpi)

 

 

One Response

  1. TinkeredArt
    | Reply

    Well done and so needed – now if folks will use it. I used to watermark everything then it just became easier not to, my bad. Hard to complain too loudly if I don’t take care of business on my end. Thanks for getting this out there quickly and concisely for folks.

Leave a Reply