Background

As you know, people browse the web from a variety of locations, internet speeds and devices. Images are often the most used asset on a website and they account for most of the downloaded bytes on a web page. For that reason, it is important to reduce image size as much as possible (reducing the size of a file that a browser needs to download in order to display a page can drastically improve performance for a website).

File size refers to how much space a file, in this case an image, takes up on a hard drive. Smaller file sizes are better for web graphics since they load and display faster.

Technically speaking, an image, is simply a 2-dimensional grid (width and height) of individual pixels and each pixel in an image contains 4 bytes of information. As a result, if we know the dimensions of an image we can easily calculate its file size with the following formula:

width x height x 4 = image file size

Here are some hypothetical examples:

As you can see in the example, the bigger the image, the heavier it is. Now imagine having to download several images at the same time - obviously the page would become heavier and it would take longer for your browser to download everything.

At this point, I think we all agree downloading very big image files is not an option, but only showing very small images isn't an option either. So, what's the solution? - you may ask. Well, the solution is called "image compression algorithms".

Image compression algorithms allow us to generate lighter versions of an image by eliminating some pixel data. This all sounds great, but here's the catch - as the image size decreases, so does its quality.

These are the main and most common rules compressing algorithms follow and are the main reasons why images may lose some detail along the process.

Reduce the amount of colors available. Since the human eye has different level of sensitivity to different colors, the color palette is reduced.

Similar pixels are encoded together. Photos have many nearby pixels with similar colors - for example, the sky, repeating textures, etc. This information is used by the compressor and only stores the difference between nearby pixels.

Image optimization is both an art and science: An art because there is no one definitive answer for how best to compress an individual image, and a science because there are many well-developed techniques and algorithms that can significantly reduce the size of an image. Finding the optimal settings for your image requires careful analysis along many dimensions: Format capabilities, content of encoded data, quality, pixel dimensions, and more. (Google Developers)

The Process

When an image is uploaded to our system, we store the original image and then generate smaller copies of the same image. Those smaller images are used in different situations or places in a FASO website, either for design or for performance purposes as mentioned above.

The source image then represents 100% of the quality, dimensions (px) and size (MB or KB).

When a smaller image is generated, the information of the source image is used by an image scaling algorithm to generate a new file with smaller dimensions but with the same proportions of the source image. Since a smaller image is going to be generated, then not all the information of the original image is needed, hence, the resulting image is not only smaller (px) but is also lighter (MB or KB) at the expense of having less quality than the source image (since it does not contain the same information as the original one).

This means the larger the image dimensions, or the closer they are to the original image, the more quality it has.

Here is a list of the default sizes an uploaded image is processed to, although they are not the only sizes. Some other sizes are controlled directly by the template's source code or can be overridden using site elements.

Should I be concerned my images are going to lose quality?

You shouldn't. Overall, most of your images are going to look just fine when presented on your website. If you're not happy with how they look, you can always contact us.