In this artcile, I will cover some of our own agency Best Practices for professional image prep on an everyday website project.

Of course, our methods may not apply to every situation or to your personal style, however, we hope you find this helpful.

Here is what this article will cover:

• First The Basics
  • Common Image File Types
  • What is Pixel Art (aka Raster art)?
  • What is Vector Art (aka line art)?
  • Basics of Color Modes (RGB, CMYK, etc)
• Next Up: Image Prep 101
  • The importance of image resolution for Pixel Art
  • Why resolution is not a thing for Vector Art
  • The importance of file size, or weight (i.e. KB, MB, GB, etc)
  • The importance of file size, or physical dimensions
  • The importance of file size, or aspect ratio
  • Common confusion and mis-use involved the term “file size”
• Third, Intermediate Image Prep
  • Understanding the layout composition
  • Knowing which file type(s) to use for different purposes
  • Using Transparent Backgrounds
  • Using SVGs or Scalable Vector Graphics
  • Creating Favicons and Fav.ico thumbs
• Final Chapter – Advance Image Prep Concepts
  • Using “Save As: or “Export” from Adobe Software
  • Should I compress pixel art a second time? (post prep compression)
  • Getting to smaller file sizes with pixel art
  • Other ways to improve page load speed without compromising image quality