Menu

RTCXpression

Close

Website Screenshot Thumbnails using a Linux Server

- November 28, 2013

rtcx There’s always more than one way to get something done with a Linux server and sometimes it depends on which distribution you’re using. Here’s one way to create website screenshot thumbnails on Debian-based distributions with XVFB, webkit2png and ImageMagick.

Unlike website screenshot thumbnail services such as “ShrinkTheWeb”, there are no restrictions on how often you can generate or update the images and you don’t have to pay anything extra when you start doing hundreds or thousands of website screenshot thumbnails from your own server.

The Software you need to Create Website Screenshot Thumbnails

Use APT to install the programs and libraries:

apt install imagemagick libicu48 python-qt4 libqt4-webkit xvfb

Download the webkit2png zip file, extract it to a working directory and install the python script:

wget https://codeload.github.com/adamn/python-webkit2png/zip/master
unzip python-webkit2png-master.zip
python python-webkit2png-master/setup.py install

The Commands

Sometimes XVFB will fail to start because it’s already running. To fix that, run killall Xvfb. Make sure it’s a capital X or it won’t be found. I do it at the beginning of my scripts, just to be sure. Here’s a shell script you can work with:

#!/bin/sh

# kill any lingering XVFB processes
killall Xvfb

# capture website screenshot (I'm using my site as an example)
# width, height, depth
xvfb-run --server-args="-screen 0 1024x768x24" python /usr/local/bin/webkit2png -o rtcx.png https://www.rtcx.net/

# the python script ignores the height and captures the complete page, so crop anything below the fold
mogrify -crop "1024x768+0+0" rtcx.png

# convert from png to jpg to get a smaller file size
mogrify -format jpg rtcx.png
rm rtcx.png

# shrink and sharpen to make the thumbnail
# by specifying the width (150) but not the height, the aspect ratio is kept
# check your results with an image editor to see the effects of the quality and sharpening
mogrify -resize 150 -quality 80 -sharpen 14 rtcx.jpg

There’s a lot you can do with ImageMagick’s mogrify command. I urge you to play with it.

The Proof

I created the image above using the shell script above. 150 pixels is the standard width for WordPress images. You can shrink your images to whatever size you need. 120 pixels seems to be what some directory sites use.

I’m not a programmer by profession, so getting something like this to work can be a daunting task. If I can do it, you can do it. If you want to do this in bulk, I recommend using the shell commands from within a PHP script. Variable substitution and looping seems to be easier with PHP (at least for me).

Note: If you get a responsive-type image, like I did, start out with a larger screen size.

Share this:

Categories: Technology

Tags: , , ,

Previous and Next Articles (if any):

« »

More

You've made it this far down the page. Please read some of my more important pages if you have the time:

Comments Policy           Privacy Policy

RTCXpression established Feb 28, 2011
Copyright © 2013-2017 RT Cunningham
Hosted at Digital Ocean