As some people asked for more information about how I render thumbnails for NodeCloud, I decided to document the process and post about it, so here we go.
In order to take the screenshots, I’m using a simplified version of the rasterize.js file bundled with PhantomJS, configured with a viewport size of 1024x768 and modified to wait 2000 milliseconds before creating output file, in order to allow every page element sufficient time to render.
Here is the script :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
To rasterize a given page, we call the previous script as follow :
phantomjs --load-plugins=yes rasterize.js http://www.nodecloud.org nodecloud.org.png
Now, the second part of the process is creating a thumbnail using ImageMagick :
convert "nodecloud.org.png" -crop 1024x768+0+0 "nodecloud.org.png" convert "nodecloud.org.png" -filter Lanczos -thumbnail 200x150 "nodecloud.org-thumbnail.png"
This is done in two steps : first we crop the top of the output rendered by PhantomJS in order to get a 4:3 ratio image, and then we resize it using the Lanczos filter.
We can easily automate the process to convert a batch of sites using a simple Bash script defining an array containing a list of URLs to generate thumbnails from :
1 2 3 4 5 6 7 8 9 10 11
Lastly, I would recommend using the excellent OptiPNG to optimize thumbnails file size.