In our assignment, the weight restriction requires you to carefully examine each aspect of your website with accuracy, especially when it comes to images, which typically make up the bulk of a web page’s weight. In this discussion, we will explore the concept of image compression and its innovative application in web design.
Since the web’s invention in the early 1990s, the role of images has been a key consideration. Originally, the web centred around hypertextuality, with text documents linked by hyperlinks. As indivisible objects, images had a unique and distinct place within this system.
Tim Berners-Lee uploaded the first image in July 1992, with the latest estimates suggesting several hundred billion have been uploaded since.
Les Horribles Cernettes, considered as the first image uploaded to the web by Tim Berners-Lee in July 1992 depicting the parody band of the same name, employed by CERN to perform at their annual events.
A digital image is a visual representation encoded in binary format that can be stored and decoded by specific softwares. Two types of digital images exist: raster (or bitmap) images consisting of a map of pixels of one colour, and vector images composed of mathematical descriptions of the image data.
Data compression is the process of reducing the amount of data needed to describe the same information (lossless compression) or similar information (lossy compression). When applied to images, compression aims to decrease data redundancy, enabling the storage or transmission of images at a reduced weight. Several algorithms exist to achieve this.
Due to its composition of individual pixels, a raster image creates an optical illusion that depends on the properties of the human eye, even without compression. Image compression involves balancing the necessary quantity of information to convey form with the desired quality of this illusion. In practice, every image has unique qualities and characteristics, leading to compression that must be specifically tailored.
There are numerous image formats and compression algorithms available, but only a limited selection of these can be utilized on the web, each with their own unique properties.
The most commonly implemented format on the web is JPG, which offers superior compression compared to PNG but typically has lower precision.
PNG is another frequently implemented format on the web. Although it has less powerful compression, it provides greater precision and the option to utilize transparency (unlike JPG).
GIF is commonly used for storing short animations and is the first format used on the web. However, it has a significant limitation in that it cannot encode more than 256 colours.
WebP is a format created by Google in the 2010s specifically for web use, offering high-performance compression which is gradually becoming popular on websites.
SVG is the only vector image format suitable for the web. Its syntax closely resembles that of HTML/CSS, meaning that it can be effortlessly integrated into code without the use of the <img> tag. Due to its inherent characteristics, a SVG image does not have a specific size and is thus able to be resized infinitely without losing any visual quality.
Due to the prevalence of iconography in modern media and the need to efficiently transmit and display images on digital interfaces, image compression has become a widely accessible feature. There are a plethora of tools that can be used and/or hijacked to enable it.
Softwares Adobe Photoshop, GIMP, ImageOptim, Caesium
Websites TinyPNG
Libraries Sharp, ImageMagick
As the primary tool for creating and manipulating images, Adobe Photoshop is a highly potent image compression software. It enables you to select the output format, compression quality, and image size, among other things. Additionally, you can generate actions to automate the compression procedure.
Feel free to experiment with different parameter combinations to discover the most suitable one for you and to use functions that are not primarily intended for compression.
Sharp is a Node.js image processing library. It may initially be challenging to set up your project if you’re not used to Node.js, but since the code is written in JavaScript, it is clear and straightforward to utilise.
You can find a complete documentation here.
ImageMagick is a renowned image manipulation library, initially designed for use in the terminal (CLI). However, graphical interfaces are available to simplify its usage, and it has been ported to multiple programming languages like PHP or JavaScript.
The Magick Online Studio offers direct browser-based testing of the library’s capabilities, while the documentation is highly detailed, albeit occasionally undeveloped.
Compression, even in its slightest form, impacts the visual presentation of images. Hence, it can serve beyond a merely technical function, being an instrument of creativity with a powerful visual and/or theoretical impact.
Progressive Transmission of Grey-scale and Binary pictures by Simple, Efficient and Lossless Encoding Schemes, article written by Ken Knowlton in 1980 in which he experiments with image compression techniques.
“A folded grey wedge processed by the technique described in the text and ultimately produced by the characters blank, apostrophe, quote marks, and B.”, from Computer Produced Grey Scales, article written by Ken Knowlton and Leon Harmon in 1967 in which he anticipated the use of ASCII characters to depict images and the concept of dithering.
Non-Extractive Architecture, residency-exhibition held at the V-A-C Zattere Foundation in Venice in 2021. The team of resident architects displayed their sources on the foundation’s walls using printable templates created via an online tool. v-a-c.org
War at a Distance, Harun Farocki, 2003. The video essay explores the use of computer-generated images in military training and the way in which the military industry has influenced the development of computer graphics.
How to win at Photography, website created by Leonardo Angelucci for an exhibition taking place at the Fotomuseum Winterthur. howtowinat.photography
Norma is a Turin-based graphic design studio that explores the nihilistic possibility of removing aesthetic choice from the transmission of information. normadesign.it
Low-tech Magazine is a blog created by Kris De Decker in 2007. The website is powered by a solar panel and a battery, and is only accessible when there is enough sunlight to power the server. The website is also available in a text-only version, which is accessible at all times. solar.lowtechmagazine.com