Tips on web-ready images

Member Steven Potter asked,

“Could you help me with understanding how to format my photos for upload and how to add the transparent © symbol? (see below) If these are questions that many have already asked, maybe a FAQ on the site would be a good idea?”

We discussed it, and I thought I’d share my quick tips here for the group and the whole intertubes.

If you use software like Photoshop or Gimp to alter the size of your files, aim to make them 100kb or less in size.  (Most of mine fall into the 75kb range).  There’s generally three things that affect file size: colour, dimensions of the image and quality of the image.

Colour: Typically, you are not going to want to reduce your colour range, unless it’s a colour scan of a black and white image.  So let’s leave that alone.

Dimensions of the image: you can often find ways to alter this (keep your proportions the same) under names like”canvas size” or just look for how many pixels wide and high the image is.  Typically, I tend to make things somewhere around 500-800 pixels on the larger side.  Most people don’t want to click to enlarge an image and have it expand to be bigger than their monitor.

Quality of the image: This is a dodgy one, since most of us want everything crystal-clear.  However, jpeg files can be compressed quite well without losing a lot of resolution, at least for posting online.  Not good for submitting to a magazine or for getting prints, but online it’s great.  In Photoshop, use the “save for web” feature (you can monkey with canvas size there too).  In Gimp, you get the option when you save the Gimp file as a jpeg.

I’ve mentioned Gimp a couple of times – it’s a decent, FREE alternative to Photoshop that can do (kinda-almost) everything Photoshop Elements can.  There’s no insidious pop-ups or programming.  It just works really well.   (I do not work for them or receive any cool kickbacks.)   You can find it here. http://www.gimp.org/

To put a copyright symbol on your work, go into the text tool on software like Photoshop, Gimp or many others and hold down ALT and type 0169 .  Let go of ALT and the © should appear.  Or you can cut-and-paste it from this post.

Anyone have any other quick tips?

Advertisements

2 responses to “Tips on web-ready images

  1. Helpful article, Glendon! I personally need to remember to limit the size of my own uploaded work!

    One small point for all the Mac users, the shortcut for © is OPTION+G.

  2. On a Mac, the copyright symbol can be typed by holding down the option key and typing the letter ‘g’. Thanks for the tips, Glendon!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s