Saltar al contenido

Thumbnails in WordPress, what are they and how to manage them?

febrero 2, 2020

 

Perhaps one of the lesser known features of WordPress is its support thumbnail ( «thumbnails» ) of images stored in the media library, but no less important, given its potential impact on the performance of the website.

When we wrote an article for our blog, we pay special attention to textual content to provide useful and valuable information, and the quality, size (weight) and dimensions of the images that accompany it … but not much pay attention to WordPress generates thumbnails.

Thumbnails will impact and special role in mobile devices with small screens where you literally do not «fit» the main images of our products; at the least, not in its original dimensions.

On the other hand, the number and size of thumbnails on a website WordPress may vary, depending on the subject ( «theme») chosen, especially if it’s a responsive design, and installed plugins, and that we should also pay attention.

As we discuss in this article, management adequate and effective thumbnails in a WordPress website not only will help us improve response navigation our server and user experience, but also reduce the storage space on disk .

Table of Contents

  • What are miniatures ( «thumbnails») in WordPress? What are thumbnails?
  • What are thumbnails?
  • How images are managed in WordPress? How to edit thumbnails WordPress? How to view thumbnails we have on our website?
  • How to edit thumbnails WordPress?
  • How to view thumbnails we have on our website?
  • How to remove thumbnails
  • Conclusions
  • are no longer used What are thumbnails?
  • How to edit thumbnails WordPress?
  • How to view thumbnails we have on our website?

What are miniatures ( «thumbnails») in WordPress?

When got an image to the media library, WordPress generates a series of images (thumbnails) of different dimensions (i.e., height and width), either by cropping or resizing, depending on the ratio between the original dimensions and the thumbnails:

  • Crop the image. WordPress short image with two sidebands (left and right) or two bands above and below, so that the image fits within the dimensions of the thumbnail. Therefore, the thumbnail does not show the same as the action performed original.Esta WordPress image when original and thumbnail dimensions are not proportional to each other (that it, width and height that do not keep the same aspect ratio).
  • Crop the image. WordPress short image with two sidebands (left and right) or two bands above and below, so that the image fits within the dimensions of the thumbnail. Therefore, the thumbnail does not show the same as the action performed original.Esta WordPress image when original and thumbnail dimensions are not proportional to each other (that it, width and height that do not keep the same aspect ratio).
  • Crop the image. WordPress short image with two sidebands (left and right) or two bands above and below, so that the image fits within the dimensions of the thumbnail. Therefore, the thumbnail does not show the same as the action performed original.Esta WordPress image when original and thumbnail dimensions are not proportional to each other (that it, width and height that do not keep the same aspect ratio).
  • Resize the image. When height and width the same ratio aspect, WordPress reduces the image to match the size of the thumbnail. In this case, the thumbnail shows the same as the original, except that little more image.

The following image shows an example of how the CMS resize or crop an image to generate thumbnails in WordPress paths:

Click to enlarge

the image on the left corresponds to the original; the image of the center is the original redimensionada; while the right is the original cut their sidebands.

we mention that WordPress generates these miniatures; however, also some plugins or theme ( «Theme») installed on the website, or custom development, generate their own miniatures, in addition to WordPress.

What are thumbnails?

Using thumbnails, WordPress (or plugin or theme) provides an alternative set of images that, at the same time, take up less space (ie, «weigh» less) and have less visual size.

When we see a web site on a computer with a large screen over 20 inches, the website has enough size to house and display in full our original images without cutting them or resize them.

In fact, when designing a website, the original images have dimensions adapted to the display size of web pages on a computer screen.

However, on a mobile device like tablet or mobile phone with a lower long screen, the browser should «fit» the original image within the space provided on the website: much smaller than on a computer screen.

If there were miniatures, the browser would have to download the original image and on the device itself, resize or crop it to fit on the screen of the device.

is, we are downloading a large image (for the dimensions of a mobile device), the download time that entails, and then having to spend resources on the device itself to change its dimensions.

with the miniatures we solve these two problems:

  • The only browser downloads the thumbnail whose dimensions are equal or most closely to those of the space where they are displayed on the screen of the mobile device, so you do not have you resize or crop them .
  • The Miniature download weighs considerably less than the original image, so it saves time during unloading, which can be critical if the mobile device is in an area of ​​limited coverage.

How images are managed in WordPress?

For our part, as users or administrators of WordPress, we should not worry about doing anything to use thumbnails that best fit according to the display size of the website on the screen of the device.

be the subject code installed, or if any plugins generates its own thumbnails, who is responsible for selecting the original image or another model and, depending prove more efficient.

Each theme and plugin that will generate thumbnails or may have a specific mechanism to manage and configure these miniatures, and we will have to consult their instructions.

Now WordPress generated thumbnails can be managed through the Control Panel within the menu Settings-Media, as shown in the following image:

Click to enlarge

in its default installation (a plugin can vary the appearance of this screen), WordPress allows you to create three models, or alternative images for each image that go up to the media library.

The WordPress configuration page, can indicate the size of the thumbnails (ie, height and width) and if we want the thumbnails are cut to the exact dimensions you have specified.

In general, we should ensure that the size of the thumbnails keep an aspect ratio as the original image, so that is not necessary to cut or resized thumbnail does not distort the overall design of the rest of the website.

In case we upload images to media library whose dimensions are smaller than those of a miniature WordPress not generate such «miniature»; ie only generates thumbnails smaller than the original image.

can also tell WordPress that does not generate a certain miniature; for this, we only indicate that its dimensions (width and height) are zero:

How to edit thumbnails WordPress?

If we entered the media library, only see that we have come up with their dimensions and sizes of original images in WordPress … Where we can view thumbnails that are created?

Thumbnails are not displayed as such in any section of the WordPress Control Panel; in library only means you can edit or configure the original images, clicking on them:

The information we bring to this image (title, legend, and alternative text description) is also associated with each model, but we can not access or configure each model separately. In this aspect, it behaves as a single image medium.

When editing a page or post (publication), we can choose which version of an image (ie, their thumbnails) want to be displayed in a particular place on the website, as well as specify a custom size (other dimensions that do not have an associated thumbnail):

in this case, we select which model or version of the image directly displayed by default on the page or post.

When we are using a theme or plugin with Responsive design, PHP code theme or plugin include references to the generated thumbnails by WordPress or by themselves, so that the browser can find out which one best fits the size available screen and download that and only that.

How to view thumbnails we have on our website?

If WordPress can not see the thumbnails are generated by WordPress or theme or a plugin, how can we know that have been created correctly? Where are they stored?

When a thumbnail is generated, a new image file for that model is created, with the dimensions you have configured (or determine the theme or plugin), which has the same name as the file of the original image, followed the size of the thumbnail.

For example, if an image file is called «access-disco-duro.png» default thumbnails created by WordPress will have the following names:

access-disk-drive-150 × 150.png

access-hard-disk-300 × 300.png

access-disk-drive-1024 × 1024.png

Each of these files will be stored in the same location of the hard disk where the file of the original image is stored; ie within the «public_html / wp-content / uploads /» folder of your and web server, if you select «Organize files into folders based on month and year» in the folder of the month and year concerned.

To view these files, you can install a plugin that allows us to view the contents of the hard disk of the web server (such as File Manager) or, better yet, using the cPanel configuration, or the like, which gives us our hosting provider :

Click to enlarge

in this pantallazo , we can see that the image files are organized by year and month (left) and right, we can see the different models that the website is for the same image, each with their respective dimensions.

Removing the thumbnails that are no longer used

Depending on the theme and plugins installed, a website can have many image files, because they can generate thumbnails.

As we saw in the previous section, through the CPanel File Manager, for the same image uploaded to the media library, you can create many miniatures. All this can take up much space on your hard disk server hosting.

Now if we change the subject or uninstalled these plugins, these thumbnails are stored on the hard drive, not deleted. In this case, we are wasting disk space with images that we will not use or ever need.

On the other hand, if we decide to change the size of a thumbnail in the WordPress control panel, this new configuration applies only to images that are stored in the media library from that time.

In this case, the above images have thumbnails that are no longer used and will be short thumbnails with setting new dimensions.

WordPress does not provide any mechanism to generate new thumbnails or delete old ones that are no longer used. To do this, we can use the plugin «Regenerate Thumbnails Advanced», shown in the following video:

Conclusions

Thumbnails in WordPress are versions of different sizes of the images that got into the media library and They provide a system to meet the following two situations:

  • us to choose the size of an image when you’re editing a post or page in WordPress.
  • the thumbnail browser download that best fits the available size on the screen of the device, whether computer or mobile.

There are two ways to change the dimensions of an image: cutting, resulting in a model that is a fragment of the original image; or resized, showing the full original image, but with different height and width

WordPress provides the ability to generate up to three variants or thumbnail images, which are generated when they are loaded into the media library.

also topics (especially if they are responsive design) and plugins can generate their own thumbnails, according to their own characteristics and configuration possibilities.

WordPress does not provide a direct mechanism for managing files thumbnails, which are stored on the hard drive of the Web server, but can use a plugin, both to regenerate new models, to delete those that are no longer used.