Thumbnails are the small lower quality copies of images, normally enveloped in html links or javascript code that allows the full-size high-pixel-density image to be viewed in detail. The aim of the thumbnail being to preview the original image with the smallest file size and therefore least impact on page load times possible. Thumbnails may be in any of the web image formats, e.g. .jpg or .png, with .png having a modest compression/quality advantage.
By playing with the css surrounding thumbnails it is possible to encapsulate multiple thumbnails in a single file. These are then known as image sprites and can provide efficiency gains when loading a page containing several thumbnails. Note these are image collections, not the same image at different resolutions.
Icons are used on the web as buttons but may be used in OSs e.g. Windows, IOS, Android and Apps/Programs, the size and format of icons is typically pre-defined by the environment in which the icon is used. While some apps support thumbnails in this context, there is also a dedicated .ico format that uses a .bmp image or since Windows Vista a .png format image and prefixes this with a very small header. The .ico format is designed to structurally support multiple icon images in a single file, the same image at different pixel dimensions.
With thumbnails our first action is to scale down either part of or an entire existing image. If the image size or aspect ratio are unimportant, we can simply crop an image using Windows Photos “Edit and Create” and then make a thumbnail from this new image. There are many applications to generate full image thumbnails on Windows, here are two possibilities:
A product of “Fookes Software”, easy thumbnails is a free download with an impressive GUI that enables simple experimentation with images and file sizes. There is also a batch (multiple) file option.
As well as the GUI there is a command line option so that you can imbed thumbnail generation into more complex scripts. A sample line command:
EzThumbs.exe input_files_*.jpg /D=output_folder /EXIF=No /L /Q=80 /W=240 /H=180
An input folder and file mask determine the images to be thumbnailed (.jpgs), /L ensures the output file name is in lowercase, /W and /H specify maximum values for width and height. Output jpeg quality is set with /Q and /EXIF=No prevents exif tag data being copied to the thumbnail.
You can download Easy Thumbnails from here: https://www.fookes.com/easy-thumbnails
Is the open source software product of choice for batch image manipulations, it’s flexible, powerful and light-weight enough to also perform image manipulations real time. I do image magick a major disservice if I imply that its key function is making thumbnails but it is good at them.
A sample command for making thumbnails with magick is:
magick mogrify -format png -path output_folder -thumbnail 300x100 *.png *.jpg
This will output png format thumbnails, max 300 x 100, from all files of type png or jpg within the current folder. As with easy thumbnails specifying a disproportionately large width gives a batch of thumbnails of varying widths but the same height.
Same height thumbnails work well in a slide bar arrangement as shown below:
<style>
.sbframe {width:100%;overflow-x:auto;margin-top:1em;}
.sbbar {width:auto;white-space:nowrap;}
.sbtnail {height:100px;cursor:pointer;margin-left:4px;}
</style>
<div class="sbframe">
<div class="sbbar">
<img src="images/photo1.jpg" class="sbtnail" style="margin-left:0;" />
<img src="images/photo2.jpg" class="sbtnail" />
<img src="images/photo3.jpg" class="sbtnail" />
<img src="images/photo4.jpg" class="sbtnail" />
<img src="images/photo5.jpg" class="sbtnail" />
<img src="images/photo6.jpg" class="sbtnail" />
<img src="images/photo7.jpg" class="sbtnail" />
</div>
</div>
Each image can be wrapped in <a> elements with an href tag to the full size image, or more likely an onclick="function()" event handler that does the same.
You can download Image Magick from here: https://imagemagick.org/script/download.php
When cropping an image and using approximate dimensions or aspect ratio is insufficient for your needs then the Gnu Image Manipulation Program is the best open source image processing software available for free. You can use GIMP to easily produce thumbnails from portions of an image that exactly meet your thumbnail requirements. GIMP is so powerful that it can be a little overwhelming, so here is a detailed instruction for creating a thumbnail with precise dimensions.
GIMP is so powerful that it can be a little overwhelming, so here is a detailed instruction for creating a perfect thumbnail with precise dimensions.
You can download GIMP from here: https://www.gimp.org/downloads/
The .ico file format supports a directory or index to one or more icon images held in the file. These images are typically identical but at different pixel sizes, allowing the receiver to select the best resolution image for its environment. Today the .ico file can often be replaced by multiple image files with parameters defining the image sizes.
Both image magick and GIMP allow you to create .ico files of any dimension.
You can create .ico files using image magick, as in the example below which converts a .jpg input file to a 128 pixel .ico file, using the command:
magick input_file.jpg -background none -resize 128x128 -density 128x128 output.ico
Note that you can specify multiple input files that will then all be included within the same .ico file.
You can create the image as explained in the GIMP thumbnails section and then simply export this as a .ico format file. It is also possible to create a .ico file containing multiple images using multiple image layers. I have not experimented with this but there are various documents on the web explaining how this can be done.
I was about to list the icon sizes used by the principal OSs but I see this has already been done,
see for example
https://www.visualpharm.com/articles/icon_sizes.html.
Note that these OS icons are normally provided as sets
with images in varying dimensions that can then be used by the OS as appropriate e.g. icon size selected by
user (small, medium, large), icon sizes for display type: list or details view, icon view, start menu
or task bar.
Favicons the small icons typically used on a browsers tab (and sometimes in the history) used to be a fixed 16x16 .ico format file in the root directory of a website. Today the site icon can be any web acceptable format and located in a subfolder. A link statement located in the html head section is used to identify the file and folder containing the favicon file. Multiple format image files can be used and are identified using the sizes tag as shown in the examples below:
<head>
<link rel="icon" href="/images/my_favicon_32.png" sizes="32x32">
<link rel="icon" href="/images/my_favicon_196.png" sizes="196x196">
</head>
A good starting article on the many variations and uses of favicons is available here:
https://mobiforge.com/design-development/adding-favicons-in-a-multi-browser-multi-platform-world
Questions or comments, want to recommend another thumbnail app or add an entry to the icons table, please e-mail us at info@snys.nl