Use this guide to understand about the Image Basics and the Best Practices while uploading or downloading images to get desired results.
You are generating an image (QR Code, print media creative, ticket, etc.) and you are not sure:
- What image size you should upload where required, especially if the required unit is in pixels
- What image size you should export in pixels for publishing on web or publishing for print
This guide will help you understand image resolution in pixels.
Here are some basic concepts to get started with:
A. Image Basics
a. Raster Images
A raster image or bitmap is a grid of individual pixels that collectively compose an image. Raster graphics render images as a collection of countless tiny squares. Each square, or pixel, is coded in a specific hue or shade.
(Image Credit: Printcnx)
A raster image is defined by the number of pixels in its width and height. E.g. if an image is 300 x 200 then it has a width of 300 pixels and height of 200 pixels and this is the image's 'resolution'.
The printing and prepress industries know raster graphics as contones (from "continuous tones"). The opposite to contones is "line work", usually implemented as vector graphics in digital systems.
Popular raster image formats include PNG, JPEG.
A vector is made up of points and lines called paths. These points and lines are also placed on a grid of pixels so have a 'resolution' like raster images.
As vectors are not made up of pixels the images are much sharper.
(Image Credit: Printcnx)
Popular vector formats are SVG, EPS, AI, and PDF.
When a raster image is created (say a photograph is clicked with a camera) it has a fixed number of pixels i.e. fixed resolution. However, sometimes, the image we need should be of smaller or larger resolution. The process of down-scaling or up-scaling an image is called resampling.
When an image is down-scaled, it is remapped on a smaller grid of pixels by combining similar colored pixels. This often decreases the quality of the image. The process of smoothening the edges is called anti-aliasing. Quality of the new image depends on the resampling algorithm. Better the algorithm, closer is the resampled image to the original image. Note that decreasing the image to a much lower resolution will result in the loss of minute detailing.
When an image is up-scaled, it is remapped to a larger grid of pixels by adding similar colored pixels. This will in most cases 'blur' the image.
A vector can easily be re-sized as the points and lines are simply placed on the new grid in larger sizes. This means that vectors can be resized without the loss of quality.
d. Rasterization and Vectorization
Rasterization is the process of converting a vector into a raster image. Most professionals first create design vectors (say a brand logo) in the required resolution and then export in the image in the required raster format—PNG, JPG.
Vectorization is the process of converting a raster image into a vector. This requires a sophisticated software algorithm and is difficult to do, especially if an image has many shades.
e. Aspect Ratio
The ratio of an image's width and height is called the aspect ratio. When an image is resized, the aspect ratio should be kept constant to avoid 'stretching' of the image.
An image is defined by its resolution i.e. number of pixels. The size of the image on a computer/TV screen will be determined by its resolution and the screen's resolution.
However, it is different when an image is printed. Printing requires 'physical dimensions' such as inches, millimetres, and centimetres.
DPI or PPI is the setting of a printer that determines the 'dots per inch' or 'pixels per inch' to be printed. Lower the DPI, larger the size of the image.
Popular DPI values are 72, 300, and 600. For print, the ideal setting is 300 DPI.
Some file formats store a DPI value, which is used by printers to determine the DPI at which the image should be printed.
Converting images from pixels to inches/cm or vice-versa
Say you want an image printed on an A4 sheet. And you are designing this image in an image editor tool such as Adobe Illustrator, Sketch 3, MS-Paint, or Canva. Most tools require you to first specify the canvas/artboard size in pixels.
How do you get this size?
We know that an A4 sheet is 8.3 x 11.7 inches. We need these dimensions in pixels for quality printing.
Firstly, we will assume that quality to be 300 DPI i.e. at least 300 pixels should be printed in each inch. With this assumption, we can calculate:
- Width = 8.3 inches x 300 pixels/inch = 2,490 pixels
- Height = 11.7 inches x 300 pixels/inch = 3508 pixels
So you should choose the canvas/artboard size of 2,490 x 3508 pixels for a quality A4 print.
You can use the online tool Pixel Calculator for quick calculation.
g. Lossless image compression
It is possible that you might have a high-quality image that is say 10MB in size. But the online tool that you're using to upload/share the image has a restriction of say maximum 5MB. What do you do?
One way is to resize (downscale) the image if it is unnecessarily large. For example, most screens do not require images of more than 2000pixels in width or height.
Second option is to 'losslessly compress' the image. Lossless compression allows you to maintain the quality of the image but decreases the size of the image significantly.
You can losslessly compress images using the online tool TinyPNG.
B. Image Best Practices
While uploading or downloading images, ensure the following:
1. Always upload images in the required dimensions in pixels
For example, when uploading a Facebook cover photo, Facebook suggests the ideal size (best quality) of the image should be 1,800 x 704 pixels.
Uploading the image in the right dimension will ensure that the image is completely visible (i.e. it is not cropped by the tool) and of high quality (no blurring or loss of minute details).
If you're not sure of the resolution of the image you have, you can always check the image properties: Right-click image > Properties (Right-click image > Get Info in Mac)
If you have an image of a different dimension, you might to crop parts of the image. You can do this using the default image tool on your computer—Photos app in Windows and Preview in Mac systems. It is better to crop the image yourself (and choose the important parts of the image you want) instead of allowing to tool (where you are uploading the image) to do it for you.
If the tool has size restrictions and your image size is large, use lossless compression (explain in the above section).
2. Always export image is the required dimensions for high-quality printing
If you're exporting an image (say QR Code image) and the tool allows you to export it in the required size, then what size do you choose?
This depends on where the image will go—on a screen or on print media.
If it will go on a screen, it depends on the area it will take on the screen. For example:
- a favicon (the icon of a site on the browser tab) is a small image and a resolution of 16x16 pixels will do.
- a desktop background or screensaver on the other hand will need to match the size of the screen resolution i.e. say 2560 x 1600 pixels for the 2019 Macbook Air
In general, it is safer to export in a larger resolution and down-scale (if required) than have a lower resolution image and up-scale (which blurs the image).
If it will go on print, then you probably have the physical dimensions in inches or cm. Convert this size into pixels (method shared in the previous section) and export the image in the right size for best results.
3. How to choose right image format
If you're exporting an image (assuming the tool allows export in various formats), how do you choose the right format?
Again, this depends on where the image will go—on a screen or on print media.
In general, for screens vector (SVG) is better. The SVG image is sharper. But you may not always be able to get images (say photos) in SVG formats. In that case, PNG/JPEG in the right size should work fine.
In case of print:
- If you have an image (such as a QR Code) that needs further designing/publishing (designer needs to add QR Code image to print creative), vector (SVG) is better. SVG can be imported in professional image editing tools such as Adobe Illustrator, Sketch 3, etc. This way designer can re-size the image as per requirements without loss of quality
- If you are importing the image in basic softwares such as MS-Word, then PNG, JPEG is better as such applications cannot open SVG files. Just ensure that you export the image in the right size (or large size if right size is unknown)
Hope this was helpful. If you have any further questions, reach out to our support team at firstname.lastname@example.org.