How Thumbnails Work – Image Handling

Home » Handling Media » How Thumbnails Work – Image Handling

Background on Thumbnails

Fundamentally, one needs to understand the concept of thumbnails before we get into how thumbnails work in WordPress. Essentially, a thumbnail is a smaller version of a larger, higher-quality image. Thumbnails are used in many WordPress themes to provide both informational and aesthetic benefit to site. Newspaper themes / Magazine themes use thumbnails extensively on their home page. The diagram below reflects how a single large image can be used to generate thumbnails of various sizes. This is exactly what happens behind-the-scenes in most WordPress themes.

Image-handling-thumbnails

 

Now that you know what a thumbnail is, let’s quickly discuss two important concepts:

1) Image Quality – for best image quality, you always want to use a large, high-quality image. This is logical and obvious! Please do not expect great thumbnails if you are starting with an image smaller than the thumbnail size. For example, if your original image is 100px x 100px, and the thumbnail size generated is 200px x 200px = that will result in stretching the image and loss of image quality. This is common sense, right?

2) Image Dimensions – pay attention to image dimensions and types. If your site uses landscape thumbnails (width is greater than height), then do not expect amazing thumbnails if your original image is portrait (height is greater than width). Obviously, either the width or the height has to be compensated for to fit into a fixed content area.

Keep these two factors in mind when working with images and investigating thumbnails.

Featured Image

If no custom field is defined, the theme will try to find a post thumbnail set in WordPress. To define an image as post thumbnail you just need to click on Set Featured Image button below the category under Featured Image panel on edit/add new post window.

Thumbnail-featured-image

Upon uploading the image, be sure to click on the Use as Featured Image button at the bottom of the upload dialog box as shown in this screenshot.

Thumbnail-use-as-featured-image

No Image

If theme cannot find a custom field defined or a wordpress featured image thumbnail set, it will display a default category image. In Gabfire Themes, this is usually an image that displays the text “No Image Found.” The default images are stored in wp-content/themes/THEME_NAME/images/thumbs directory. You can always change these default images to your own logo/branding or preference, however keep the image sizes exactly the same as each corresponds to a different content area.

Catch First Image

In some themes, we may offer an option titled “Catch First Image”. This function checks the body of the post and use the first image found as the image for thumbnails. NOTE: Only available in some themes (not all). If your theme does not have this option in the THEME OPTIONS, then it means it is NOT available for that theme.

Thumbnail-catch-first-image

Hierarchy Order of Thumbnails

To recap, here is the order of hierarchy for thumbnails:

  1. Custom field “thumbnail” with a valid value (URL) is used to define the image for thumbnails.
  2. WordPress ‘Featured Image’ function is used to define the image for thumbnails.
  3. Catch First Image from the body of the post (if any).
  4. If none of the above, then default image is used for thumbnail in order to maintain the structure of the site.

How to Add a Post with an Image

Instructions are provided in both text-format and video tutorial format on the code here – How to Add a Post with Image Thumbnail.

Basic Image Requirements

  1. Correct format (landscape-horizontal, not portrait-vertical),
  2. Proportionally close to 16:9 ratio (or 4:3) – for example, Advanced slider image is 16:9 proportion (478×270)
  3. Minimum width and height of largest image size in theme. Though, if it’s reasonably smaller or larger in width or height, theme will resize as needed.

Why are my thumbnails stretched, skewed, blurry, ugly?

Provided you read the information above, you should now understand the concept of thumbnails and the importance of the original image. If you are encountering issues with the quality of your thumbnails, then these are possible reason(s):

  1. Original Image is not an ideal size (too small) – trying to use a small image and make it fit into a large thumbnail area
  2. Original Image is not an ideal size (too large) – trying to use a very large image (example: 2000px or 3000px wide) – or large in MB filesize (example: 5MB or 10MB) – and asking WP to re-size it. You should not want images this large anyway.
  3. Original Image is not high-quality – trying to use a low-quality image and make it render beautifully
  4. Original Image is in a different format (landscape vs. portrait) – trying to fit a portrait image (3×4) into a landscape area (4×3) or vice versa
  5. Original Image is in a non-standard file format (something other than .jpg, .png, or .gif)

99% of the time, one of the above is the cause of such issues.

References

If you are interested in more documentation related to image thumbnails, here are some references:

  1. How to add a post with an image – see video tutorial above. (link to the same video tutorial on support forum)
  2. All themes come equipped with a README folder inside the theme directory. Within that directory is the Installation Guide.pdf which has a section specifically on how thumbnailing works.
  3. To understand WordPress Featured Image function, see WP CODEX and this blog post.
  4. To understand Timthumb, see this resource. Timthumb.php is a commonly used, open-source PHP script that generates thumbnails. Many themes use this script to generate thumbnails.
  5. Image Ratios

These are common / standard functions used in almost all themes (not just Gabfire).