Website owners often ask web designers about image sizing. Here’s a short article that will help you understand the basics really quickly. If you run a website, it will definitely save you time and heartache if you understand a few points well!
Image Type
Most images you use will be bitmap images, meaning they are made up of dots or pixels. JPEG is a common example and is often used for photos because it’s well suited to detailed images with many colours. Vector images are different and are made with coordinates, rather than pixels. The main difference between the two is that a bitmap loses quality if you make it bigger, the vector doesn't.
Pixels
A pixel is a single minute area of illumination on a display screen, one of many, which together make up a picture.
Image Resolution
Resolution refers to the number of pixels in an image, although the size of the image might be variable. Width could be measured in pixels or in millimeters!
Pixelation
Pixelation is caused when a bitmap image has too few pixels, compared to its physical size. Imagine a large image with a small number of pixels in it. The pixels themselves become visible. With a higher quality image, with more pixels, the pixelation disappears.
DPI or Dots Per Inch
This Is how Resolution is measured practically, because it takes into account the relationship between the number of pixels and the physical size of the image. Varying either can affect the resolution, in Dots Per Inch.In other words, if you have only a thumbnail size image and you stretch it to desktop size, it will pixelate.
Screen Resolution
Not all screens are equal! Some are large, others are small. That’s not the same as resolution. Most monitors have 72 or 96 pixels per inch. Apple retina screens are 220 pixels per inch. For example, MacBook Pro (Retina, 15-inch, Early 2013) and later displays have a 2880-by-1800 native resolution at 220 pixels per inch.
Practical Tips
- Your image will display differently across different screen environments. Get used to that.
- Get into the habit of checking how things display on different screen environments.
- You can remove quality/reduce size or resolution. You can never add quality back in.
- Always try to get and keep high resolution original files, you never know when you might need them
- Not All content management systems are equal. Good CMS offers the ability to resize your image automatically, and you can even set the focal point. You website will crop and resize the image automatically.