How To Create Better Thumbnails On All Types Of Websites

Thumbnails are features on web pages that amount to links expressed as images that readers are supposed to understand at a glance represent clickable elements. In many instances, the fact the image is supposed to be clicked to bring the user to a new page is intended to be made apparent by concise yet descriptive text accompanying it. This usually works better on websites like YouTube, where users already expect every image to represent a link to a corresponding video that the thumbnail depicts a screenshot of. The text in this case can safely and tightly be grouped together off to the side or bottom of the screenshot, and it is even possible for the text itself to link to the same destination without having the text underlined to indicate a hyperlink.

Grouping descriptive text closely around a screenshot intended as a link can work on websites that may not be focused on providing users regular video or streaming content. However, this approach takes up more real estate on a given web page and can make a page's content feel more spread out than it has to be. In response, web design standards had long since innovated having descriptive Unicode text overlaid on top of a screenshot without the need to make the text a permanent and rasterized part of the underlying image.

The overlaying text, however, can easily become difficult to visually distinguish from the contents of the underlying image; this can be the case even if the text is using an effect such as a prominent outline surrounding each letter. On the other hand, having the displayed image dynamically covered by a transparent gradient that effectively darkens its contents is a good way to make even simplistic white text much more legible. The use of a linear gradient allows the area aligned behind the text to be comparatively darker while letting the rest of the area display the image's contents more brightly. While it is possible to achieve a simple yet effective gradient with a short line of CSS code, more focused variants usually require many more lines. For more information click here https://i.redd.it/kygnoi4e75j61.jpg.