Media

  1. Home
  2. Support
  3. Media
  4. Learning About Image Sizes and Quality for Avoori & WordPress Editors

Learning About Image Sizes and Quality for Avoori & WordPress Editors

There are four important factors that affect the size and quality of any image used over the web.

Image Size & Quality Overview

Physical Size

The size of an image occupies over the screen.

File Size

The amount of disk space it occupies on a hard-drive or server.

Resolution

The number of pixels the image has.

File Type

The file extension an image uses.

Let’s go over each to practically understand the differences in depth.

Physical Size

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

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.

Resolution

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

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.

jpg   

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.

gif

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.

png

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.

Resizing Images

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.

 

 

 

Was this article helpful to you? Yes No

How can we help?