Skip to content
This repository has been archived by the owner on Sep 22, 2021. It is now read-only.

Latest commit

 

History

History
79 lines (55 loc) · 2.82 KB

images.md

File metadata and controls

79 lines (55 loc) · 2.82 KB
Raw

Best Practices: Images

Responsible Responsive Images

Background Images

Native Images

Tools

Use these tools to make your image optimization workflow easier.

TinyPNG

This tool allows you to drag and drop files from your desktop and have them optimized. Usually removes unused colors and has little to no noticeable effect on the quality of the image. Not uncommon to have 50% reduction in file size.

Kraken.io

This tool allows you to drag and drop files from your desktop and have them optimized. You can then download individual images or a zip file with all of them.

There are two options:

  • Lossless - This mode will push your images to the extreme without changing a single pixel. (Better for large background images)
  • Lossy - This mode will sacrifice a small amount of image quality, allowing you to save up to 90% of the image weight.

Sips

This is a command line tool on Mac which lets you batch crop and resize images.

Example usage (folder has a bunch of JPGs):

# Replace all JPGs in folder with a max image width or height of 1500px
$ sips -Z 1500 *.jpg

# Replace all JPGs in folder (recursively) with a max image width or height of 1500px 
$ find . -type f -name '*.jpg' -exec sips -Z 1500 {} \;

Mogrify

This is a command line tool which lets you do pretty much anything to an image.

Mogrify is part of ImageMagick. Install it with Homebrew:

$ brew update && brew install ImageMagick

Examples

# Resize: Retain Aspect Ratio
# Usage: mogrify -resize [largest dimension] [filename]
# Usage: mogrify -resize [max width]x[max height] [filename]
$ mogrify -resize 500 logo.jpg

# Resize: Exact Dimensions
# Usage: mogrify -crop [width]x[height]+[x position]+[y position] +repage *.[file type]
$ mogrify -crop 250x250+0+0 +repage *.jpg

# Resize: Batch
# Usage: mogrify -resize [largest dimension] *.[file type]
# Usage: mogrify -resize [max width]x[max height] *.[file type]
$ mogrify -resize 1920x1200 *.jpg

# Conversion: Single
# Usage: mogrify -format [new image type] [filename]
$ mogrify -format png logo.jpg

# Conversion: Batch
# Usage: mogrify -format [new image type] *.[file type]
$ mogrify -format jpg *.png

# Conversion: Change the color of single color images (i.e. icons)
# Usage: convert [filename] -fill "[hex color]" -colorize 100%  [filename]
# Usage: for i in *.[filetype]; do convert $i -fill "[hex color]" -colorize 100%  $i; done
$ for i in *.png; do convert $i -fill "#555555" -colorize 100%  $i; done

# Rotation: Batch rotate images if the width exceeds the height
# Usage: rotate "[degrees]>|<" [filename]
$ mogrify -rotate "-90>" *.jpg