From our minds to yours

Image Containers are in WAR

Image containers are in WAR

Web publishing pros struggle with image selection, publishing and rendering on modern websites.
There are several project hours wasted in image re-work and design. Moreover, explaining this to non-technical Clients is not easy.

Taking this on a war footing, we came up with a WAR convention. This is a simple solution to communicating and documenting image dimensions. This will be helpful to the web-publishing professionals across functions for a simplified convention of image dimensions. 

The analogy is in Photography where the "Exposure Triangle" determines the "quality" of the photograph. Similarly, image containers can be specified by 2 parameters:

  • W - Minimum Width of the image container
  • AR - Aspect Ratio - calculated as image Width/Height

Referring to the diagram below:

  1. A WAR of 200 and 1 is a "square" type image
  2. A WAR of 100 and 0.5 is a "long rectangle" type image
  3. A WAR of 300 and 2 is a "wide rectangle" type image




By communicating these 2 parameters accurately makes image rendering on pages much simpler to understand. The benefits are as follows:

  1. High quality rendering of images on web-pages
  2. Better choice of images
  3. Efficient graphics work
  4. Better web-design in listing-detail page dependencies

High quality rendering of images on web-pages

If an image container's dimensions are "bigger" than the image's original dimensions, then the rendering is usually "stretched".
So the thumb rule for high quality rendering of image:

image container's dimensions <= image's original dimensions
image's original dimensions => image container's dimensions

Better choice of images

We see many agencies pouring over hundreds of images to find a good creative fit for web content.
But once that is done, and they push it to the web page - they realise that it does not give the best results.
So if point 1 above is also kept in mind while selecting an image for a container, precious time and effort can be saved for the web publisher in choosing the perfect image.

Efficient graphics work

Often times, when point 2 becomes rigid and there is only that "one" image that fits the creative content - and point 1 also is a MUST, then graphics work will have to be done on the image.
Having a good handle on the WAR here can help in resolving the issue seamlessly.

Better design thinking in listing-detail page dependencies

Modern web publications have the common listing-detail page dependencies for images i.e.
The image in the detail page is in "large" dimensions, and the same image has to be rendered as a "smaller thumbnail" in the listing page.
A good handle of the WAR can help the "web-designer" to create consistent Aspect Ratios both on the detail page and the listing page. 
When designers do not keep this in mind, back-end developers are seen creating "extra image fields" just for this....eeps!

Also, it is very helpful that front-end developers have a good handle of the CSS properties like "object-fit" that provides scaling, resizing and cropping images in CSS code.

That being said, I believe that "all" web-professionals should have basic "graphics" skills like scaling, cropping and resizing images. It makes web-graphic work very smooth anywhere in the web-publishing workflow.

Hope this WAR can provide peace!


Fields marked with an * are mandatory.