Home » The Blog » WordPress » WordPress How To: Website Image Tips

WordPress How To: Website Image Tips

Your website pictures are worth ten thousand words.
Seashore in Taiwan. Stunning, right?

The quality of the photos you use on your WordPress site can either enhance or detract from not only how your site displays but whether you are perceived as tech savvy and credible.

All too often I run across otherwise professional and legitimate business websites that use crummy clip-art. Clip-art just looks tacky and unprofessional.

I also see sites where clearly there is no understanding about the variables involved in integrating photographic images into their themes. The images are of poor quality, improperly sized or orientated.

Being this is a visual medium, we need to take our choice of graphics and photos very seriously by choosing wisely and formatting properly. If you use cheap graphics or photos that are not sized correctly, what perception do you think that provides about your brand?

Photography, as a powerful medium of expression and communications, offers an infinite variety of perception, interpretation and execution.

Ansel Adams

Here are a few tips you need to consider, and implement, to ensure your WordPress site remains visually appealing.

WordPress Photo and Graphic Tips

Determine Theme Image Sizes

Once you decide on a theme for your site, one of the first things you want to do is understand the size of the images that you need to use in the various widgetized areas. Every theme's documentation will note what size images should be used in specific areas for the best results.

These areas are the top of homepage hero graphics, sliders, featured areas, top of post, featured post images, etc. Then when choosing your images — you want to use those exact sizes. Consistently.

This requires that you resize your images to those specific dimensions before you upload to WordPress! Images are one of the primary resource hogs that slow down websites. No need to upload images any larger than we need!

In general, outside of theme specific dimensions, images never need be larger than around 1000 x 1000px. Exceptions would be detailed diagrams, specs of product details where larger sizes are necessary.

Learning how to resize photos to the correct size for use on your website, and in plugins, is critical to creating to a polished presentation.

Image Formats

There are three formats you will use for website images. The rule of thumb is that animations and drawn images, such as logos, can be .gif. Photographic images are always .jpg and/or .png. If you stick to these formats you'll have the best results.

.JPG is best for photographic images.

.GIF works for small animations, drawn logos, icons or images without gradients. You can have a transparent background if needed.

NO CLIP ART: We want quality images. Stay away from cheesy clip-art graphics. I have used clip-art — but that is the rare exception not the rule. I will only use clip-art when the image was so spot on apropos to the topic at hand that it enhanced my post rather than distracted from it.

.PNG is the best of both worlds. Great photo-level resolution — for smaller files. You can have a colored or transparent background if needed. Add styles such as drop shadows to text and PNG is the way to go. But, PNGs tend to have larger files sizes so be aware of that.

Photos/graphic file sizes are a huge factor in how fast your site loads. Having the best looking graphics with the smallest file size should be your primary goal.

You can play around to find the format that offers the best looking image (JPG vs. PNG for example) with the smallest file size. Graphic programs allow you to set the level of resolution quality — which of course will increase or decrease the file size.

Online Resolution

You do not need to spend big money on high resolution photos. High resolution is required for print media but not online. Photos sites will offer you low resolution versions, which are not good for print or off-line use, but are exactly what you can use on your site.

Low Res photos are also the least expensive. Paying big bucks for a high resolution photos to use on your site is not necessary. Only buy higher resolutions if you need a larger physically sized image or intend to also use off-line.

CAMERA RESOLUTION: When using your digital camera to take photos for your website, set it at 1024×768 resolution. If you don't know how — learn. Your camera need not be set higher than 1024×768 for photos to be used on your site.

Higher resolutions only make the file and physical size larger than needed for your website. Humongous files sizes will unnecessarily use server resources without resizing the photo down to a reasonable size. If your files are in the Megs (2M) vs. Ks (500K) you need to resize and compress.

Resize Carefully

When it comes to resizing photos keep in mind you can always reduce a photographic image's size, but cannot increase in size from the original size. So, you can go smaller — but not larger.

Increasing from a photo's original size results in loss of resolution and a blurry photo. And with every “save” the file quality will degrade.

Yuck!

Homepage Sliders

Many Premium WordPress Themes have gallery sliders on the homepage that provides the opportunity to have a representative photo of a few featured posts or pages. While these galleries are very cool looking (I call them “eye-candy”), putting photos in that space that have poor resolution or are not the correct physical size for the gallery can leave a less than stellar impression.

Themes that use galleries will let you know exactly what size looks best in that space. That is the size you must use or you will not have the same elegant effect the gallery is meant to relay.

Using vertically tall graphics when the gallery is meant to use horizontally aligned images and they will be cut off. Use smaller graphics and they won't fill the space; larger graphics may be skewed or blurry. Use the wrong size and you have whitespace where you shouldn't.

Once you know the size of the space the a photo will display in, only use photos that you know will look good in that size. So if you have a gallery that is set to display at 1000 pixels in width by 400 pixels in height you must use a graphic that looks great in that specific size. Do not deviate.

Copyright Matters

Make sure you have the right to use the photos you select. Just because you can right-click/save doesn't mean you can use any graphic you find online. Just because you can view photos in Google's image search engine does not mean that they are yours to take and use.

Big image houses now have teams of attorneys who do nothing but hunt down copyright infringers and levy very large fines for illegal use of their images. You don't want to wake up one morning with an email demanding past residuals ($$$) for using a photo you used illegally that you will be obligated to pay.

Ignorance of copyright law will not be a valid excuse to avoid any penalties. Not knowing who to ask or who to contact to use the graphic, and then posting to your site anyway, does not release you from this responsibility. Take my word for it — copyright Infringement is not something you want to have to remedy.

  • When you find a graphic you would like to use on your site, you must ask the creator or site owner.
  • If you do not get an answer — do not use the graphic.
  • Are you unsure if the graphic or photo is free and clear for you to use? Do not use it.

Graphic Compression Tools

I've mentioned several times about images slowing your site. Once you get your images to the correct size, further compression can make those files sizes even smaller. Here are some tools to consider:

Graphic Tutorials

Here are a few sites to help you hone your graphic resampling skills:

Images and SEO

If you've read anything about search engine optimization, it's a bunch of little things that all add up to how your website gets ranked. Images are part of that.

  • Physical size no larger than needed to display to not hinder performance.
  • Named to be representative of where and why they are used — with a keyphrase.
  • Accurate Alt and Title tags completed in your Media Library so that those are included in the code when images are inserted.

A Word About Image Choices

Taking the time to choose or create jut the right image that relays the intent and meaning of your content is as important as everything else. Rarely will just any image do. Your images should relate to the topic at hand and offer a representation of what you are sharing with your reader.

Yes, it is easy to upload images to your WordPress media library. However, making sure you are uploading quality, properly sized and formatted photos and graphics in the first place is what will really make your site zippy and visually stunning.

At your service,

Judith: WordPress Consultant and Business Coach