Use Images Effectively (Best Practices)

It really is true: A picture is worth 1,000 words, and in the context of an online generation where “skimming” and “scanning” is the general practice of reading web copy the importance of these “1,000 words” is even greater. From The Complete Guide to Using Images in your Blog Posts

Best practices for images

Images in your site should support your ideas or illustrate the concepts that you are writing about. First impressions count and you want to leave a good impression.  While good images can greatly enhance your site, poor quality images will reflect poorly on your site. Resist the temptation to add an image just for the sake of adding an image. You want your images to be relevant to your content and make your posts and pages more interesting and informative.

Note: If you are looking for high quality photos for your website http://www.pexels.com/ features lots of great photos you can use freely, without attribution of any kind.

Here are some tips for improving your use of images in your posts and pages:

Resize large images

  • We frequently see images that are many times too large for WordPress sites.  Your site’s Media Library will notify you if your images are starting to take up a significant percentage of your allotted quota.
  • Before uploading any image into your WordPress site we recommend that you optimize it for the web.  If you upload a picture right from a digital camera you can be sure it will be MUCH larger than it needs to be and will unnecessarily take up space in your media library.
  • The larger the file size, the longer it will take to load. Keeping your file sizes low speeds up your web page access times.  Typically an image on the web is between 30kb to 500kb depending on it’s physical size.
  • The resolution of an image dictates its clarity.  Minor adjustments in resolution can improve the file size of your image, but you should never reduce the resolution so far that the reduction in quality is noticeable.
  • The physical size of the image is it’s size on the screen (ex. 500px).  Reducing the physical size of your image is usually the first place to start when resizing.

Out of all that information, the thing you should primarily worry about is the physical size of your image as this is the easiest to understand and work with while usually giving the most results.

Digital camera files are often a major source of images that are too large.  Even the most basic digital cameras give you images that are much too large.  Most of our layouts don’t go over 900 – 960px wide and your image will not need to be larger than that (usually it will be smaller).  All of our themes have maximum widths that are lower than any modern camera produces so you will likely need to resize your images before uploading them. Reducing the physical size of your photo down to the size that is most appropriate for your website will make a huge impact for many of your images.

Web Resizer is a very easy and free online tool for optimizing images for your website. Simply browse and upload an image. The image will be automatically resized and you’ll be able to download the newly optimized photo, save it to your local computer, and then use it on your WordPress site.

Avoid pixelated and low quality images

  • If the image you’re uploading/inserting is too small or pixelated it won’t look good on screen.
  • Images containing words that are blurry or hard to read are especially problematic on websites.

The following two images illustrate the difference between a good quality image and a poor quality image.  Notice how the image on the left has distracting artifacts in it as a result of reducing the resolution too far and displaying it larger than intended.  The image on the right is how it should look.  When placed side by side, you can see just how much it matters not to use poor quality images.

poor quality image and good quality image

The image on the left is an example of the type of image to avoid while the image on the right is the same image serving as an example of the type of image to use. Quality matters.

Apply universal usability principles

  • Always provide meaningful alternative text (alt-text) to your images. Alt-text should present the content and function of any images in your website and is a key component in Web accessibility. When images don’t have alt-text, users who cannot see images will miss out on your content.
  • If you aren’t familiar with alternative text, I recommend this comprehensive article from WebAim:  Appropriate Use of Alternative Text

Don’t upload duplicates

  • Remember you have a space quota for your WordPress site (100 MB). There’s no need to upload multiple copies of the same media element (image or file) because all of your pictures, PDFs, and other media files are stored in your Media Library for later use. If you need to re-use an image in another post or page, simply insert it from the Media Library tab instead of uploading another copy. (When you go to insert/upload an image on a post or page, notice the Media Library tab which gives you access to all your previously uploaded media elements.)

add-media-from-media-library

 

Understand copyright

  • Although it is easy and tempting to simply copy an image from other website onto your own, you should always assume that another site’s content is protected by copyright.  When in doubt, ask for permission to use an image you find on another site.  Tech Tuesday archive: Finding Images (approx 40 minutes) – has many useful tips on locating images that can be used without copyright infringement. Additionally, here is a handy visual guide to help you determine if you are using an image legally.

Note: If you are looking for high quality photos for your website http://www.pexels.com/ features lots of great photos you can use freely, without attribution of any kind.

Don’t Link To Media File

  • By default, when you insert an image to a post or page the ATTACHMENT DISPLAY SETTINGS is set to  Link to Media file. This means that when users click on the mage it will take them off the page they are currently looking at and directly to the image file itself. In most cases this is not useful and does not add value to the page or post. ( A possible exception would be if you had an image of a map or other detailed image that users would benefit from seeing full sized version.
  • When you add an image to a page or post make sure that the Attachment Display Setting is set to None.Don't link to media file