PNG for any image requiring transparency.
JPG for any non-transparent image with a full color range.
GIF selectively used for any solid color or limited (less than 256) color range image.
Prefix sets of images with their common identifier.
Example: masthead-fridays.jpg and masthead-evol.jpg.
Postfix retina images with "-2x".
Example: masthead-fridays.jpg and masthead-fridays-2x.jpg.
Use dashes instead of underscores.
This allows for easier selection of pieces of the file name.
This assumes that Photoshop's "Save for Web" is being used for initial image saving.
PNG
- Select PNG-24.
- check "transparency".
- uncheck "interlaced" for most images". DO check "interlaced" for large dimension (full screen or similar) images.
- uncheck "embed color profile".
- uncheck "convert to sRGB".
- settings preview
- further optimize with imagealpha: available for free here. This is important and can easily halve the file size.
JPG
- Select JPEG
- Select "High" or "Medium" and tune quality setting from there. Use your judgement here - weigh the file size (bottom left) vs any visible quality loss. 50% quality tends to be the sweet spot. Lean towards smaller file size over higher quality.
- check "optimized" for most images". Check "progressive" for large dimension (full screen or similar) images.
- uncheck "embed color profile".
- no blur
- no matte
- uncheck "Convert to sRGB"
- settings preview
GIF
- This will be the least common file type. Most images suited to .gif saving can be better created with .svg or .css
- Select "GIF"
- Adjust the "Colors" value down to the lowest value that doesn't eliminate any colors from your graphic