Skip to content

Instantly share code, notes, and snippets.

@alexbaldwin

alexbaldwin/images.md

Created February 23, 2018 23:47
Show Gist options
  • Save alexbaldwin/3480ae2d5ed0d15c044c6402c4bfc4ee to your computer and use it in GitHub Desktop.
Save alexbaldwin/3480ae2d5ed0d15c044c6402c4bfc4ee to your computer and use it in GitHub Desktop.
Download ZIP
Optimizing your images
Raw
images.md

Photos

Anything that comes out of a camera is going to be best suited as a JPG, which allows for the largest color palette size and has great compression.

  1. Export as a JPG.
  2. Make the width 2X the resolution you plan to use it at.
  3. Optimize using ImageOptim to get rid of meta data you don't need.

Logos

With a limited color palette and typically needing transparency, PNG is going to be your method of choice here.

  1. Export as a PNG.
  2. Optimze using ImageAlpha to knock out the background.
  3. Optimize using ImageOptim to get rid of meta data you don't need.

Icons

The most flexible of assets, vector icons can change size and color at any moment. SVG is a format with mathmatical notation to recreate the vector at any size or color.

  1. Export as an SVG.
  2. Optimize with SVGO.

Screencast

The GIF format is very limited with color palette and should typically be avoided due to it's enormous file size. However it is universal, follow this if you don't have another choice.

  1. Use Screenflow to capture.
  2. Trim the video down as much as possible.
  3. Crop the screen to just the area you need.
  4. Export as an MP4 with "For web" settings.
  5. Optimze with Gifski to make a GIF.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment