Image and video recommendations

General strategy for images and videos in websites

• Dimensions
  • Choose correct aspect ratio for each area: portrait/landscape
  • Ideal width for WordPress 2560px
  • Min 2500px width
  • Max 5000px width
• Dot density, DPI
  • 72 dpi is enough for the web
  • higher only for print purposes
• Prefer JPEG by default
  • Save as JPEG at 82 quality as rule of thumb
  • Or as lower as you can - trust your eye
  • Use Photoshop > File > Save for web, set as progressive JPEG
  • Use TinyPNG service to optimise them
• Prefer PNG24
  • When image has transparency
  • And that is absolutely necessary
  • Use TinyPNG service to optimise them
• Prefer PNG8
  • When image has very few colours with no gradients
  • Choose as few colours as possible by hand
  • Use TinyPNG service to optimise them
  •  
• Prefer GIF
  • When animation with few frames is necessary
• Prefer SVGs
  • For clean, vector graphics
• For videos prefer
  • Self hosted only if they are very small
  • And that is absolutely necessary
  • For easy/small animations (where SVG or GIF are not a good option)
  • Use a tool like Handbrake with web presets to optimise them.  A good preset is Web > Creator 720p60 which is a good choice for most cases. 
  • Prefer well known aspect ratios that do not cause pixel rounding errors
• For the general purpose prefer external video services
  • Youtube
  • Vimeo