ThumbNails and Icons

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.

Thumbnail Images

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:

Easy Thumbnails

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

Image Magick

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

GIMP

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.

  1. In file explorer right-click the jpg or png file and select "open with" GIMP. If this does not work simply start GIMP and select open from the file tab and then find the file to open.
  2. Ensure the Toolbox - Tool Options sidebar/window is open. If it's not use the "windows" tab, "dockable dialogs", "tool options" to open it.
  3. Use the rectangle select tool (in "Tools", "Selection Tools", "Rectangle Select") to mark a rectangle anywhere on the image.
  4. Note the tool options shows the size and relative location of the select rectangle. Click on the first Size field and set it to the desired width, tab to the next field and set the height. Tab again and see that the on-image select box now has the dimensions specified. Now click on the Fixed button of tool options and select Aspect ratio (should be the default).
  5. You can now move, expand or shrink the current select box or simply draw a new rectangle at any location and of any size to capture the image portion needed. Create the select box over the area you wish to keep. You can modify the box size by dragging its corners, the aspect ratio is now maintained automatically.
  6. Now go to the "Image" tab and click on "Crop to Selection". The non-selected areas of the image will be removed. If you now find you could have placed the box better, simply use Ctrl-z to go back and reposition/resize the select box.
  7. Go to the "Image" tab again and click on "Scale Image". Check that the height and width are linked (the chain connecting these is unbroken) this again maintains aspect ratio. In the dialog's "width" input field enter the width as originally desired for the thumbnail, when you tab to the "height" input field it should automatically change to the correct height. If this does not happen your select fixed aspect ratio request has probably become unticked. Cancel the scale request and use Ctrl-z repeatedly to return to the start and repeat the procedure. Once the sizes are correctly set simply click on the scale button.
  8. Now use the "File" tab, "Export As" to bring up the export dialog. Select the output folder and thumbnail file name, note specifying the output file type .gif, .jpg, .png etc will if necessary convert the output file to that format, check that the folder is correct and then click on export and export again.

You can download GIMP from here: https://www.gimp.org/downloads/

Icons

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.

Image Magick

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.

GIMP

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.

Icon Formats

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

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