There are four important factors that affect the size and quality of any image used over the web.
Image Size & Quality Overview
The size of an image occupies over the screen.
The amount of disk space it occupies on a hard-drive or server.
The number of pixels the image has.
The file extension an image uses.
Let’s go over each to practically understand the differences in depth.
Physical size refers to space an image occupies on a web page. For example, take a webpage that has a featured image area of 600px wide. If 800px image width is used for the same image, not only the design would get messed up but the file-size will be heavier too, simply too big for the required size.
File size directly impacts the time it takes to load a web page. In simple terms, an image with a width of 800 pixels will usually be heavier in file-size than a 100 pixels wide image. So such an image would take more time to load. The file size is mostly increased due to high image resolution. As a general rule of thumb, small images must be under 30Kb file size and larger ones under 60K for optimum page loading time.
People regard resolution as the higher the better. But it’s equally important to understand higher resolutions takes more file-size. So depending upon the use case, if you are going after a print job, it’s good to have the best resolution preferably 300 DPI (Dots per Inch). However, for any web-based images, the DPI doesnt usually need to be more than 72.
File types are also known as file extensions. The ending letters of a file after the last dot tells the file type it has. The four most commonly used file types are .jpg, .png, .gif & .ico for favicons.
Also known as JPEG, it is good for use with photographs. While saving a photo with jpg, you can save the file at different compression levels. The higher the compression level, the lower the file-size but also the lower the quality. Therefore, it is known as a lossy compression type for digital images.
This file type should never be used with photographs. It is a good fit for using with flat icons & logos as well as small images with solid color portions. It can also be used for animations.
It is a good choice for using with line art and photographs as well, at the price of slightly higher file-sizes. However, lossless compression is possible with png which means the option of making the file-size smaller without losing image quality at all. Generally, its less recommended to use PNG for images that do not include transparency due to larger file sizes with this extension.
If you’re unsure about which file extension to use. You can always make images in different formats and compare file-size with image quality, side by side, to get a better understanding of your options.
Most graphic design software such as Adobe Photoshop or GIMP can provide you with advanced features for processing images like resizing, reducing, transforming and even enlarging an image.
When using Avoori, you dont need to worry about the physical and file size as the compression is done for you behind the scenes automatically, thus insuring you have the best quality image with the smallest file size.