Skip to content

Latest commit

 

History

History
79 lines (52 loc) · 3.18 KB

images-screenshots-gifs.md

File metadata and controls

79 lines (52 loc) · 3.18 KB
Raw

Reference: Images, screencaps, and GIFs

By Dan Phiffer

Images

The visual rendition of a thing, is achieved through imagery. Online, images take on a format like this:

<img src="fuji.jpg" alt="an illustration of Mount Fuji, with a cat looking over cherry blossom treetops">

In this HTML you have an <img> tag, a file fuji.jpg is implied, and is accompanied by a textual alt attribute, provided for visually impaired visitors (and for search engines).

an illustration of Mount Fuji, with a cat looking over cherry blossom treetops

Image tips

  • Resize large images to make them load faster online
  • Different formats are better for different things (.jpg, .png, .gif, and .svg formats each have their advantages)
  • Sometimes a photograph taken on a phone will appear rotated incorrectly (resizing it will fix this problem)
  • JPEG metadata, especially the GPS location of a photo taken on a smartphone, could unexpectedly reveal information you did not intend

Software for editing/resizing imagee

  • ImageOptim
  • Adobe Photoshop
  • Adobe Lightroom
  • ImageMagick (command-line utilities)

ImageMagick

ImageMagic is a popular set of command-line image manipulation utilities. To install it:

  1. Install Homebrew
  2. Enter: brew install imagemagick
$ convert image.png image.jpg
$ convert -resize 1280 image.jpg
$ convert -resize 1280 *.jpg

Screencapture

For still images, you can capture a part of the screen with the following keyboard commands:

  • Cmd + shift + 3 will take a screenshot of your entire screen in .png format (it will appear on your Desktop)
  • Cmd + shift + 4 will let you click and drag to take a screenshot of a single area of the screen
  • Cmd + shift + 4 followed by spacebar will let you click on a window on the screen to screencap just that window

If you prefer not to include the dropshadow in your window screencaps, hold down the option key as you click on the window.

Another macOS utility you may want to try on the lab computers is called Grab. On Windows you should try out the built-in Snipping tool.

Video screencaps

For capturing a video screencap, use QuickTime Player.

  • Choose File menu → New screen recording
  • Check the little arrow context menu next to the record button for audio and "click circles"
  • Click and drag the area you want to record (or just click without dragging to record the entire screen)
  • Press the "stop" button in the right hand side of the menu bar, it looks like a circle with a square in it

The resulting video will open inside QuickTime Player. You can save it as a .mov file.

GIFs

You can convert these video screencaps into GIFs using the following shell script in Bash:

Note: this apparently has stopped working??

function mov2gif() {
    name=`basename -s .mov $1`
    echo "$1 => $name.gif"
    ffmpeg -i "$1" -vf scale=980:-1 -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=2 --delay=6 > "$name.gif"
}