In this help guide you will be introduced to basic requirements needed for web based images, more specifically, the uploading of images through Magento. There are three simple terms you need to know for image formatting: Resolution, pixel density and aspect ratio.
Resolution is the most important part of any digital image. It measures the amount of pixels within a frame. Higher resolutions create higher quality images. Like any other measurement of space, resolution is made up of dimensions, as shown in the example below.
If an image has a width of 800 pixels and a height of 600, then the resolution of that image would be 800 x 600. Width always comes before height.
When formatting images for web design, it is always best to start off with the highest resolution possible. You can easily reduce an image resolution, but it is impossible to increase it. Once an image is reduced in size, you permanently lose part of its original quality. This is why images appear pixelated when stretched.
Magento will automatically scale down any image which is too large. Therefore, the bigger, the better.
In addition to this, retina displays, commonly found in apple products, have twice the resolution of a typical monitor. Therefore an image of twice the size would be needed, emphasising the importance of high resolutions.
Pixel density is different from resolution in that it measures the amount of pixels shown on screen within a certain distance. Unlike resolution, a higher pixel density does not necessarily make an image any better. The typical setting for pixel density changes depending on what form of media the image is used for.
The standard pixel density in web design is 72 ppi (pixels per inch). This should always be the standard setting used for uploading images onto the web. Although Magento automatically scales down images, anything higher than 72 ppi would add unnecessary size to the file, causing slower loading times within the site.
Aspect ratio is also a very important part of image formatting, especially for use within web spaces. Frames within a website will require a certain aspect ratio in order to display the image correctly. If the aspect ratio of the image does not match its destination then severe cropping or squashing may occur.
Aspect ratio refers specifically to the dimensions of an image and how one side relates to the other. They act essentially like fractions. The easiest example of this is a square (fig.1). The ratio of a square is 1:1 because all sides are in perfect proportion with one another. Whereas a rectangle with one side twice the size would be 2:1 (fig.2).
You can also see how the size of an image can change but still retain it’s original aspect ratio (figs. 3 & 4). If you do ever reduce the size of an image, make sure that the aspect ratio doesn’t change, otherwise it’ll appear squashed. The easiest way of doing this, in any editing software, is to hold down shift whilst dragging the transform tool. This will lock the aspect ratio whilst re-sizing the image.
It is also important to choose an image which will fit easily within the frame when formatting. A portrait image will not fit easily into a landscape banner due to the radically different aspect ratio (fig.5). Editing such content into a banner, which worked visually, would prove incredibly difficult.