Making White Background Transparent

by Koit Saarevet on 31/01/2015

Overlapping images with and without white backgroundsI often need to remove white background from images in order to place images close to each other or make them partially overlap. Most of my use cases (slides, paper documents) have white as the background colour for the final document.

Many image editors have sophisticated tools (magic wands, Color to Alpha etc.) to create masks from similar colours bordering an area, which then allow you to turn the masked area transparent. Such tools need good care, because using them with wrong sensitivity settings can result in turning too much of the image transparent. They also demand a lot of patience to master, so they are occasionally cursed as “tragic wands.” For removing white background from images to be used on a white background, such sophistication is often not necessary – it is enough to just make one colour – white – transparent in the images. While it is a trivial change in the file, unfortunately many image editors offer no such functionality.

In Windows, I used IrfanView: in Save options for PNG there is a checkbox “Save Transparent Colour” and you can select the colour to become transparent by a single mouse click on your image. I haven’t found a similarly elegant solution on Mac, but GIMP can do it relatively easily (I learned this solution from that post).

Transparent background in GIMP

  1. Enable transparency: Layer -> Transparency -> Add Alpha to Channel
  2. Activate the “Select by Color” tool
  3. In “Tool Options,” set Threshold = 0 and press Tab key to make sure the new value is set
  4. On the image, click on an area that has the colour you want to make transparent
  5. Clear the selected area by Delete or Cut
  6. Export the image to PNG using File -> Export As

This method often leaves the edges of the image rough, which is fine if you only want to overlap the empty areas of the images, but not suitable for clean full overlaps. In these cases you can try higher threshold values (e.g. 50 or 100) or use intelligent tools such as magic wands.

No Comments

Opera Speed Dial (and Website Icons in General)

by Koit Saarevet on 24/01/2015

Opera Speed Dial screenshot

Opera is my main browser. Upon opening a new blank tab, it shows Speed Dial – large buttons that link to pages recently visited or deliberately added to Speed Dial. I noticed that some pages are displayed as screenshots, while others display a neat icon. My site displayed the screenshot (the lower left image labeled Before), but I wanted it to show the icon (the lower center image labeled After). Figuring out the way from Before to After was quite an effort. Here is how I got it done.

Theory and Tools

What Opera uses is basically a flavor of favicon, the tiny icon often seen in the title of tabs, next to page title text. Turns out, there is a wide variety of favicons in use: the tiny 16 by 16 px ones in address bars and bookmark lists, medium sized ones used as icons for web page shortcuts on desktops, and 180 by 180 px and larger images used by Opera Speed Dial, Windows 8 tiles etc. Altogether about 20 different image files, which would take half a day to create manually with an image editor.

Luckily, I discovered Real Favicon Generator that does it in an automated way, meaning, it does both the image files and the HTML that goes with them. To get the best results, I ran it twice and used a combination of images from the two sets.

Run 1

Source file with transparent background, no margin. The image fills the space edge-to-edge – this is important to get the best quality for tiny sizes like 16 x 16 px. My source file was 1000 x 1000 px.

Icons for web clips on iOS home screen need backgrounds and handling of them depends on the specifics of the image. In my case, the image had plain white background, so in the section “Favicon for iOS – Web Clip” I chose “Add a solid, plain background to fill the transparent regions” and set the color to #ffffff.

In the section “Favicon for Windows 8 – Tile” I left the default “Use the original favicon as is” and again set the tile color to #ffffff.

For compression, I had “High quality, low compression factor.”

For scaling algorithm, Lanczos seemed to do the best job with my image.

Run 2

Source file again with transparent background, but with a margin added. For margin size I took inspiration from the default settings of realfavicongenerator.net, which created 180 px icons that had 156 px images + 12 px margin around them (12/156 = 7.7% of base image). I took the same 1000 px base image I used in Run 1, added 77 px margin and got 1154 px resulting image.

From the second run I only took these files:

  • favicon-96×96.png
  • favicon-160×160.png
  • favicon-192×192.png

HTML

realfavicongenerator.net gives you the necessary lines of HTML:

<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
<meta name="apple-mobile-web-app-title" content="My Site">
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-config" content="browserconfig.xml">
<meta name="application-name" content="My Site">

Publishing

Applying it to the site is straightforward: upload the files to the proper directory on the web server and add the HTML code into the <head> section of the index page.

Final Comments

Opera Speed Dial seems to use the files in this order:

  • favicon-192×192.png
  • favicon-160×160.png
  • apple-touch-icon-180×180.png
  • apple-touch-icon-152×152.png

However, I’m not fully sure this is the actual order – testing it is cumbersome because of image caching. Sometimes a reload can be forced by right clicking on the Speed Dial image and selecting Reload, but occasionally it still left me with a cached image.

The total cost of these bells and whistles was 168 KB of icon files plus 1561 bytes of HTML in the index.html. Considering that in a normal use scenario, the browsers only download the HTML and the 8 KB favicon.ico, the actual extra traffic is about 10 KB. The improvement in beauty is, of course, priceless :-).

Links

For a general understanding of favicons, the Wikipedia article is really good:

http://en.wikipedia.org/wiki/Favicon

This FAQ page gives all the necessary technical knowledge:

http://realfavicongenerator.net/faq

These pages also have some useful info:

http://iconhandbook.co.uk/reference/chart/favicons/

http://webmasters.stackexchange.com/questions/29616/how-do-you-add-a-opera-thumbnail-for-your-site

No Comments