Sometimes, I need to make pixel-perfect HTML markup. This involves exporting a full-page JPG image of the page, importing it into GIMP, drawing a red vertical line in the center, exporting the image, and optimizing it.

Is it possible to do this through a set of terminal commands?

1 Answer 1


Since you have the tag ImageMagick, you can do the following with it in a bash script:

convert x: in.jpg
width=$(convert in.jpg -format "%w" info:)
height=$(convert in.jpg -format "%h" info:)
let w=width/2
convert in.jpg  -fill red  -draw "line $w,0 $w,$height"  -quality 75%  out.jpg

The first line grabs the X11 cursor for you to click on a window that is showing the html (e.g. a browser), and captures it as a jpg image to file in.jpg (or you can start with that file). The next lines find the width and height of the image, and set w to half the width.

The last line draws the wanted vertical line, and the -quality option can be used to reduce the file size.

  • Really cool, man, thanky very much. I changed a bit. file_path=$(fzf) file_name=$(basename $file_path) file_extention="${file_name##*.}" new_file_name="${file_name%.*}_center.${file_extention}" width=$(convert $file_path -format "%w" info:) height=$(convert $file_path -format "%h" info:) let w=width/2 convert $file_path -fill red -draw "line $w,0 $w,$height" -quality 75% $new_file_name
    – serii
    Apr 11 at 7:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .