Please give feedback in this thread so that I can improve this tutorial.
How to edit and optimize your photos for Permies.com
For images to display optimally on permies, we like the images to be 700px wide. Now, not everyone knows what that means, or how to resize images. And not everyone has a computer program to do it with. So I have created this tutorial, using free software you can download.
In this tutorial I'll also show you how you can enhance your photos to bring them to life: lighten dark photos, darken light photos, get the color looking better, etc.
And don't get scared! There looks like lots of stuff you have to do, but once you do it a few times, it'll be old hat! And I'm always here if you have questions.
The image editing software called GIMP (GNU Image Manipulation Program) has been around for decades. I haven't used it for decades, so I just gave myself a little tutorial on how to use it, so I can show you! It's come a long way.
I work on a Mac, so those of you on some other kind of machine might see things a little differently. But the information should all be the same. If you’re having trouble, well . . . get a Mac. Just kidding. I'll help you even if you don't have a Mac.
- Find where your image is listed on your computer
- Click and drag it to GIMP icon
- Drop it into the GIMP program
- Right click on image name in list
- Go to ‘Open With’ in the pop-up
- Select GIMP
Now you have the image open in GIMP, and you can play with it.
To Crop an image
- If you want to crop an image, do that before you resize it
- In the tool bar on the left, in the top left, click the Rectangle Select Tool (see image below)
- Select the part of the image you want to keep by clicking and dragging the cursor. Start in a corner, and drag it out until you’ve selected the part of the image you want to save
- Click Images in the top menu
- Click Crop Selection - Done!
- Now you can resize it (see next section)
To resize an image
- Click on Image in the top menu
- Select Scale Image in the drop-down menu
- In the window that pops up, type 700 in the box labeled Width (don’t worry about the number in the Height box - it will automatically change to keep the image in scale)
- In the little thingy to the right of that, make sure it says px (see image below)
- Below that in the X resolution box, make sure it says 72. Changing the X Resolution will automatically change the Y Resolution
- In the little thingy to the right of that, make sure it says pixels/in (see image below)
- Click the Scale button at bottom right of the window
- Done! Your image is now the optimal size for uploading and viewing on permies!
NOTE!: If the number in the width box is less than 700, you cannot resize to 700. Making the image bigger will lower the resolution, and it won't look good at all. Yucky. Don't do it. Just leave it the size it is.
To save your photo
If you just save your photo, GIMP saves it with some weird kinda file extension (those letters that are at the end of the file name, after the period - like .jpg, .png, etc.) So you’ll need to do one more simple step to save it as a useable file.
- Click File in the top menu
- Select Export As in the drop-down menu
- In the pop-up window Change the name of your photo to a descriptive name. Use hyphens between each word, not spaces or underscores.
- Select where you want to save the photo (left), and what file extension you want to use - which is jpg or JPEG (bottom right)
- I think that after you have done one image, jpeg will be automatically selected as the preferred extension name, but check anyway.
- You’ll get another little pop-up now. Just ignore most of what it says and click the Export button
How to Rotate a photo
If your photo is sideways, and you want to rotate it, here's how:
- Click Image in the top menu
- In the drop-down menu, go to Transform - In that drop-down menu, choose which way you want to rotate the image: Rotate 90º clockwise, or Rotate 90º counter-clockwise
Want to do a little more doctoring to your photo? The following features are not necessary for uploading your photos to Permies. But it you'd like to learn a few advanced techniques to play with, read on!
This is a good tool to enhance images, bring out details, and brighten colors.
- Under Colors in top menu select Brightness-Contrast - Play with the sliders
- Too much contrast can make a photo look overdone, and too much brightness can make a photo look over exposed, so just a small tweak is usually all that’s needed to make a difference.
- Play with it, get comfortable with what you can do with it. Fun stuff!
Sometimes the camera plays tricks on us, and our photos come out with the colors a little off.
This tool can help to get colors back on track, or really enhance certain colors if you want to.
- Click Colors in the top menu
- Select Color Balance in the drop-down menu
- In the window that pops up you’ll see some sliding scales to play with
- Above those scales you’ll see a place to select either Shadow, Midtones or Highlights. You can work with each separately. Play with it.
- Click and hold on the dot on the scale; slide it toward red to enhance the red in the photo, slide it toward cyan to lessen the red and increase the blue, and so on. Play with it! Have fun with it!
- You may want to make a copy of the image to play with until you get good at it, so you’ll have a backup in case something goes drastically awry.
Light and dark
If your photo is really dark, you may be able to lighten it. And if you have a pale, washed out photo, you can darken and enhance it.
This tool can help to bring a photo back to life when you thought it was unusable.
- Click on Colors in the top menu
- Select Levels in the drop-down-menu
- In the pop up menu (see image) you’ll see where you can lighten and darken the image.
- The far left upward pointing triangle when moved to the right will darken the photo. (click and hold cursor on triangle to move)
- The middle upward pointing triangle will adjust the mid tones - move left to lighten, right to darken.
- The right upward pointing triangle will lighten the lighter tones when moved left. Careful with this as it can easily make a photo look over exposed. Just a tweak if the photo is a little too dark will help.
- If the photo is already quite bright and overexposed and you’d like to darken it, or way too dark and you'd like to lighten it, use the next sliding scale below that
- Slide the right triangle to the left to darken highlights
- Slide the left triangle to the right to lighten dark areas
Image pale, colors washed out?
- In that same dropdown menu under Colors, select Hue-Saturation - In this pop up window you can select each color separately to play with
- Select a color
- Play with the sliding bars to change the color (Hue), lighten or darken the color (Lightness), or give the color more or less saturation (Saturation). i.e. if you slide the third slider all the way to the left it turns the photo to grey scale - completely de-saturated.
Again, play with it! It’s fun!
If you have any questions at all, just ask!
The 'why' of it all
We ask for images to be 700px wide because that is the best size for images to display optimally on this site, without taking up lots of space on the server. We would love to have threads loaded with images, but really big images take up a lot of space. 700px is that size that has been chosen for use on this site.
We ask that images be 72dpi because that is the optimal size for web images - this gives a good viewing size, without taking up tons of space on the server.
We ask you to please name your images, and use hyphens between the words, because that is attractive to search engines. If you can give your photos descriptive names - or better yet use the word 'permaculture' as often as possible in the name of your photo - the search engines will show a lot of love to Permies. Paul is trying to get Permies to show up at the top of page one on Google. His goal of 'infecting the minds' of the masses with permaculture will be greatly helped if, when people search with the term 'permaculture', Permies shows up as #1. We're #1!
This is awesome. I love the "hand drawn" arrows and text.
I haven't downloaded the software yet, but can I request a final bit that explains how to upload an image to permies.com? I only know how to point at an image already on the web somewhere else, and uploading things to a image hosting site is a pain, so I haven't posted an image in years. Really. It's sad, actually.
Thanks for the feedback, Rebecca. I'll answer more fully later, but just wanted to make this one point:
Adding hyphens between words when naming photos before upload is very important for SEO. We would like the photos on permies to help with the SEO of the site, and are therefore going to encourage people to do this. The images will 'work' without the hyphens, but they won't be as helpful with SEO. As a graphic designer, I have been using hyphens between the words when naming image for decades, and sometimes forget that other people don't know the 'why' of it. So I'll explain that in the tutorial.
The bigger the better, as far as I'm concerned. That way you can crop if you want, or use it to print out. But you can fit more photos on the camera with the smaller size. I always go for bigger photos, and so pick the bigger number.
Okay, I can already see that there are a couple of things that need to be added, to clarify the 'why' of things. I've already touched on the use of hyphens above, and will add that explanation into the tutorial, as an aside for those that need to know the 'why'.
As for making the resolution 72. Yes, it is important. It speaks to the size of the image - how much space it takes up - as well as to the display quality. 72 is the standard optimal size for web images. Print images are 300 or higher. So, please make your images 72 for best results. I will add this info into the tutorial.
Rebecca, the image you attached is quite large. It is 72dpi, but it is 1944px wide instead of the required 700px. The reason for this tutorial comes out of the staff meeting on Saturday morning. Julia did some great transcribing of the notes here.
We are trying to optimize the images used on permies, to not only take up less space, but to make them look great, and help with SEO (search engine optimization). So, as staff we have the opportunity to help out by learning the policies and procedures, and then sharing them with the general populace. So, this tutorial is aimed at helping people create the best photos they can, while also helping the site by sizing and naming them optimally.
There are other tutorials in the works for just about everything that staff needs to know, so we can help other members and new staff. Everything we're doing is to help the website become the best it can be, and reach as many people as possible. And there are lots of little things that we can do to help this along. Sizing and naming photos optimally is just one of those things. But it's a pretty important thing. So this tutorial is just for working with the image. Uploading and other aspects of posting will be in a separate tutorial. But all of these tutorials will be put somewhere together so that people can easily find them and learn from them.
I'll go over the tutorial again, once I have more feedback, and add in some more info. Perhaps I'll put the 'why' in points at the bottom, for those who are interested, so it doesn't add more confusion to the main tutorial. I'd like to keep it clean and simple.
Perfect! Yes, it will look small, especially if you're working on a laptop or tablet. But it looks perfect here!
Edit: if you click on the first one, you'll see that it opens in a new window, and if you click again, you'll see that it is HUGE. So the second one, is the right size, and the first one 'looks' like the right size, but it's very large.
So, do you see the difference between the two image sizes? Clicking on the first one will show you just how big it is. It's over 4000px. The second one is 700px, but they both look great. So using the smaller size gives a great image, but doesn't take up as much space.
I used the contrast option to play with the colour. I tried pressing some buttons and there's some pretty scary stuff happened. I need to sit down and play with it properly. I'll have loads of questions when I do.
I didn't realise my pictures were that big compared to others. I have to say, I'm hugely surprised that the image still looks good when I made it that small. AND, it encourages me to name my photos for a change.
I've been playing with the program a bit and I'm still having a bit of trouble with the colour.
First challenge - remembering to turn off f.lux.
Second challenge - I don't know enough about colour to know which button to press. Are there any "I'm an idiot, please fix colour for me" buttons I can press? (I'll re-read the tutorial just in case I missed this).
But for auto color enhancement, and some other stuff in GIMP, if you look in the drop-down menu under Color in the top menu, you'll see Auto. Go there, and there's another drop-down menu. In the menu you can chose a few different things to be auto-enhanced, including color. Try playing with that.
f.lux is a program that turns your computer's screen progressively more orange/less blue as the evening progresses into night. It's supposed to help with the melatonin-disturbing blue light of screens, that can cause insomnia.
I have it on my computer mostly to remind me to go to bed.
Thanks for the info! I think I will go back and edit the photos I posted about my projects at my place - lots of pics and I was thinking they were a bit too large. Also, an alternative to GIMP that people might like is the Pixlr Editor. It is a free web based editor that does not require installing anything on your computer other than flash. Very easy to use and is very similar to GIMP in regards to its interface.
I've been trying to understand all of this, and I've got a summary that might be good to add to the top of the initial post. But I don't even know if my understanding is correct! Please advise.
To make your pictures work well for Permies.com please save them like this before you upload them:
1) Maximum 700 pixels wide. This makes the page load fast, which is important for our users with slow internet. Crop and rotate before resizing to 700 wide.
2) Name picture files properly before uploading:
-- Include keywords and phrases about what it is. Use lowercase, not capitals. Remove unnecessary numbers left over from the camera or date.
-- Use hyphens, not spaces or underscores.
-- These allow search engines to guess what your photo is about, so that your image on Permies may come up when people Google your topic.
3) Save photos as .jpg . Save logos or scanned text as .png .
Good file names compost-toilet.jpg
Bad file names DCM00123.jpg
Compost toilet.jpg (The file location on the internet will end up as compost%20toilet.jpg)
Works at a residential alternative high school in the Himalayas SECMOL.org . "Back home" is Cape Cod, E Coast USA.
Most of that stuff will be in the Image Uploading tutorial - which may or may not be added to this tutorial, depending on how long it is. But there will be a link to it here for sure. The part about the size and naming is already in this tutorial, but I'll expand it a bit to show examples.