You’ve got your new site all set up and are now wanting to populate it with more content. If the text on your site is main course, the images you post are the dessert, or at the very least, the spices. Consider carefully what you choose to post. It should be relevant, good quality and formatted properly. This will be one of the the highest impact aspects of your website, and will reveal much more than you might think.
Getting Web ready
Once you have selected an appropriate image, most inexperienced web content managers make the mistake of just uploading whatever pictures came off of their camera without doing any prep. In other words, the pictures are not “web-ready.” What do I mean by web-ready? Primarily, this means resizing and optimization. This is so an image can fit properly on a page and also load quickly.
Shrink vs Crop
The two main ways to resize an image are to shrink it or crop it. Properly framing an image is an art form in and of itself, but at the very least, you should consider what is happening inside your picture. What is the focal point? Are there “unnecessary” things going on in the background (does the ceiling really need to be visible above the group shot)? For more details on image composition, check out these pointers from Digital Camera World. Be careful when resizing to make sure you keep the size ratio intact.
[info]Image distortion can make your entire site look amateurish regardless of how well built the rest of it is.[/info]
Media Library
You will notice that all image, video, and text files get uploaded to your media library, and that there are no folders. The media library functions under a search paradigm, so naming conventions become extremely important if you want to stay organized. Please keep this in mind before uploading pictures and carefully consider a naming convention for your all your files, especially your pictures. One common way to help organize your library is to lead the name of all your files with the date and then have some sort of description in the file name as well. Finding the right balance can be tricky. A good example might be “20140202_potluck.” This is better than to “20140202_potluck_in_the_fellowship_hall_honoring_sunday_school_teachers.” Either is much more helpful than trying to remember what “IMG_1034” is.
File type
Most images will be .jpegs though .gifs and .pngs are also common. The latter two allow you to have transparent backgrounds in your image, which is often helpful, but often not necessary. There are a whole lot of other image file types, but most of the web runs on these file types.
Free Tools
Here are several services (all free!) you might consider if you do not have access to Photo editing software. There are of course many others out there that may work better for you. Feel free to comment with your favorite.
- Pic Resize: has a batch function, allowing you to resize multiple images at once.
- Resize Your Image: features a simple interface that gives you dimensions of your image.
- Web Resizer: has an optimization function and the rounded corners feature is a nice addition.
Besides web based tools, there are also free downloadable software programs.
- GIMP: a well known, freely distributed piece of software for photo retouching, image composition and image authoring.
- Free Picture Resizer – This is a free downloadable program from the good folks at CNET
We’ve all seen a “wow” image but unfortunately, we can’t all produce them. However, using these simple tools and guidelines will help give your web site a fresh, professional and attractive presentation.