One of the most common tasks for anyone who sets out to personalize a template or a theme is adding images that reflect the site’s content, business, brand, or even set the tone and emotional context for the web page.
How you add photos can make or break a website.
What could be easier, one might say. Just buy a nice photo, upload it to the server, and add an
<img /> tag to the page.
Not quite so fast. We need to pick the right images, prepare the images for the web, and add them in a way that looks clean and professional, without neglecting some SEO (Search Engine Optimization) aspects that will benefit your website.
Here’s what you need to know when adding graphics to customize your template or WordPress theme.
Choosing Images For Your Website
Where do I go?
The best option is that of using your own images. If you can and are willing, grab your digital camera and go about finding inspiration in the world around you.
The advantages of this approach are:
- Your photos will be totally original and unique;
- There will be no doubts as to whether the photo is licensed appropriately and you’ve applied the license’s terms correctly.
If taking your own photos is not an option, then it’s a good idea to try to avoid some overly used stock photos, such as business people smiling and shaking hands.
Also very important is paying attention to the photo’s license. it makes clear what you’re allowed to do with the photo, on which kind of projects you may use it, how many times you may use it, etc.
How do I pick my images?
Knowing the topic, tone and colors of the web page where you’re going to place the image as you pick it up is an important factor. This way, it’s easier to ensure that the visual imagery integrates with the page as a whole and with the message it intends to convey.
Optimizing Your Images
Before adding an image to your web page, you need to perform a few simple tasks to make it look professional and fast-loading.
Most often than not, you’ll need to resize or crop your image before adding it to the web page. WordPress has some nice cropping and image editing capabilities, but to have more control on the result it’s advisable to use a full-fledged image editor.
The industry’s standard is Adobe Photoshop. However, unless you intend to become a professional designer, other excellent, less expensive, or even free editors, will do perfectly.
One great tool for this task is Pixlr.com: it’s feature-rich, it’s free and you can start using it online right away. Follow these steps:
- Click on the Pixlr Editor navigation link and once on the editor page upload your photo;
- Select the crop tool on the top left of the canvas. I circled it in red in the photo below.
Also, you can choose to constrain the proportions of your selection so that they respect the right ratio between width and height by selecting Aspect ratio from the drop-down box on the top of the page;
- Then simply click your cursor inside the photo and drag to make your selection.
You can also move, enlarge and shrink your selection. The portion of the photo you want to remove, will be outside your selection;
- When you’re happy with the smaller photo, crop it by clicking again on the crop tool.
A dialog box pops up that asks you if you want to apply the changes. Click Yes!
Retouching an image is not just for fashion magazines and pop stars. A food blog or a restaurant website would certainly gain many more visitors and potential customers if it splashes colorful and detailed photos of delightful dishes.
By using the Adjustment or the Filter menu links in Pixlr (or any other good photo editor), you’ll have a plethora of options at your fingertips. Simply play around with the values and check the results;
Saving images for the web
When it’s time to save your image in Pixlr, click on Save in the File menu item. A dialog pops up and you can easily adjust the image quality and check the image size.
The lower the quality the smaller the size. The smaller the size the faster the web page loads in the browser and the happier your visitors will be. Don’t overdo it, though. Images have to look beautiful, too.
Images and SEO
One further step to adding images to your website correctly, is to enter metadata, that is, information about the image.
This information is usually put inside the alt attribute of the
<img /> element.
In HTML, it looks like this:
<img src="myimage.jpg" alt="Image of a fabulous looking pizza." />
WordPress invites you to enter this information each time you add an image to the system, and it’s important not to ignore this invitation.
Why bother about the alt attribute? Because …
- Your HTML mark-up will not be valid according to the latest standards;
- Screen readers cannot read images, therefore having some text about the image is fundamental to make web content accessible to all;
- Search engine bots crawl textual information to rank your content in their search results.
To Sum Up
Adding images to the web involves a few steps. Just remember the points below:
- Crop what you don’t need in the image, but use the aspect ratio functionality of the photo editor, if necessary, to make sure the photo doesn’t look squashed;
- If the photo needs it, do some retouching by adjusting the colors or applying some filters;
- Save the images for the web trying to achieve a good balance between image quality and size;
- Always accompany your images with meaningful and informative meta-data.