THE GRID
![](https://381.santiago.bz/wp-content/uploads/2025/02/image-3.jpg)
ANALOG GRIDS
https://www.pinterest.com/pin/462463455458781193/
https://www.pinterest.com/pin/379780181053831233/
Richard Gerhardt
![](https://381.santiago.bz/wp-content/uploads/2025/02/image-4-1024x768.jpg)
![](https://381.santiago.bz/wp-content/uploads/2025/02/richter_2007_kohln-567x1024.jpg)
![](https://381.santiago.bz/wp-content/uploads/2025/02/image-5-1024x572.jpg)
The Grid as a Checkpoint of Modernity, Margarita Tupitsyn
https://www.tate.org.uk/research/tate-papers/12/the-grid-as-a-checkpoint-of-modernity
Yayoi Kusama
https://theconversation.com/from-selfie-to-infinity-yayoi-kusamas-amazing-technicoloured-dreamscape-87076
![](https://381.santiago.bz/wp-content/uploads/2025/02/image-6-1024x682.jpg)
Gavin Rain
https://www.artnet.com/artists/gavin-rain/
![](https://381.santiago.bz/wp-content/uploads/2025/02/gavinrain_monalisa.jpg)
Evelyn Kassikov
https://evelinkasikov.com/The-Portrait-Project
Tatsuo Horiuchi
![](https://381.santiago.bz/wp-content/uploads/2025/02/image-1024x478.jpg)
Jim Campbell
How Are Images REALLY Stored?
Learning about image formats.
By Moncef Abboud
https://cefboud.com/posts/image-formats/
- Lossless Compression
Goal: Reduce file size without losing any image data. The original image can be perfectly reconstructed from the compressed file.
How it works: Identifies and encodes redundancies in the image data. Think of it like finding repeating patterns and representing them more efficiently.
Common formats/algorithms:
PNG (Portable Network Graphics): Widely used for web graphics, especially those with sharp lines, text, or transparency. Uses DEFLATE compression.
BMP (Bitmap): Usually uncompressed or uses simple lossless compression. Less common for web use due to larger file sizes.
- Lossy Compression
Goal: Achieve significantly smaller file sizes by discarding some image data that is deemed less perceptible to the human eye.
How it works: Removes high-frequency details and subtle color variations. This process is irreversible; some information is permanently lost.
Common formats/algorithms:
JPEG (Joint Photographic Experts Group): The most popular lossy format, widely used for photographs and complex images. Uses Discrete Cosine Transform (DCT).
WebP: A modern format developed by Google that offers superior compression compared to JPEG, both in lossy and lossless modes.
HEIC (High Efficiency Image File Format): Used by Apple devices, based on HEVC video compression. Offers good compression efficiency.
Key Concepts in Compression
GIF (Graphics Interchange Format): Maximum 256 colors, therefore lossy compression. Supports simple animations and is good for images with limited color palettes. Uses LZW compression.
Transform Coding: Converts the image into a different representation (e.g., frequency domain) to identify and discard less important information. DCT is a common example.
Quantization: Reduces the precision of data, which is a key source of data loss in lossy compression.
Entropy Encoding: Further compresses the data by using variable-length codes to represent frequently occurring symbols more efficiently (e.g., Huffman coding, arithmetic coding).
Choosing the Right Compression
Lossless: Use when image quality is paramount and no data loss is acceptable (e.g., medical images, archiving, images with text or line art).
Lossy: Use when file size is a major concern and some minor quality loss is acceptable (e.g., web images, photographs, streaming).
Emerging Trends
AI-powered compression: Using machine learning to develop more efficient compression algorithms that better understand image content and human perception.
AVIF (AV1 Image File Format): A new format based on the AV1 video codec, offering very high compression efficiency.
EXAMPLES
PNG 256
![](https://381.santiago.bz/wp-content/uploads/2024/12/santi_mandala-300x300.png)
JPG 70%
![](https://381.santiago.bz/wp-content/uploads/2024/12/santi_mandala-300x300.jpg)
GIF 256
![](https://381.santiago.bz/wp-content/uploads/2024/12/santi_mandala_256-300x300.png)
GIF 32
![](https://381.santiago.bz/wp-content/uploads/2024/12/santi_mandala_32-300x300.png)
GIF 2 with and without dithering
![](https://381.santiago.bz/wp-content/uploads/2024/12/santi_mandala_2A-800x400.png)
![](https://381.santiago.bz/wp-content/uploads/2024/12/santi_mandala_2B-800x400.png)
![](https://381.santiago.bz/wp-content/uploads/2024/12/santi_mandala_2C-800x400.png)
![](https://381.santiago.bz/wp-content/uploads/2024/12/santi_mandala_2D-800x400.png)
ANIMATED GIF
![](https://381.santiago.bz/wp-content/uploads/2024/12/maria_felix_fly.gif)
ADOBE TUTORIAL for Photoshop
https://www.adobe.com/creativecloud/photography/discover/make-a-gif.html
EXAMPLES: Visionaire 48 Magic
![](https://visionaireworld.com/cdn/shop/products/48MAGIC_13-PedroAlmodovar_110x110@2x.gif)
![](https://visionaireworld.com/cdn/shop/products/48MAGIC_14-KarlLagerfeld_110x110@2x.gif)
![](https://visionaireworld.com/cdn/shop/products/48MAGIC_13-MarkRomanek_110x110@2x.gif)
CINEMAGRAPHS
https://cinemagraphs.com/
https://tripwiremagazine.com/cinemagraphs/
Jamie Beck
https://laughingsquid.com/animated-gif-fashion-photography-by-jamie-beck/
![](https://381.santiago.bz/wp-content/uploads/2025/02/image-1.jpg)
Tom Nijhuis
https://dismagazine.com/distaste/25055/growing-up-gabber/
![](https://381.santiago.bz/wp-content/uploads/2025/02/image-7.jpg)
ASSIGNMENTS
02 • GIF
- From your personal collection, choose 3 distinct images. Optimize their size so the largest side is maximum 800px
- Export each one as GIF files with at least 5 different variations in the color palette, dithering, etc. I need to see in total 15 radically different images, using the GIF compression as a method to generate new versions of the original image. I do not want to see the “same” image 3×5 times: you MUST use the color palettes and dithering to transform the images into something very different from the original image.
03 • PNG
Take photos of at least 5 different personal items, clean the background using Photoshop tools, on a transparent background.
Export each individual image as a PNG 24 maximum 300px the largest side. Upload the resulting PNGs to your folder on Dropbox.
Create a collage nin nPhotoshop integrating all of these transparent objects (8.5×11, 72dpi, RGB).
04 • CINEMAGRAPH
Create a CINEMAGRAPH of at least 150 frames using Photoshop,inspired by the examples seen in class. You can tell. a story or it can be totally experimental and visual.
Be mindful of the image size: MAX 800px its largest side. Explore transitions, effects, tweening and palettes. I am aware that these animations may be too heavy, that is why you will upload them to DropBox.