Images, Formats, and Digital Demons
The Designer’s [Digital-Output-Inferno] Survival Guide
“… I had become the go-to disciple for exporting assets the right way. The crazy thing is, after ten years, I was still finding soul-crushing ways of compressing images the wrong way.”
2008, Apple opened the iOS App Store. I was a student at the time and an initiate with an app developer startup. As their sole “designer” I was hurdled into the digital image output inferno alone.
I was the startup’s second employee and the fourth body filling the studio, I was the closest thing to a designer there, and it was a dream come true. We were the four horsemen, and we were unstoppable. I was elated to have had a foot in the door to work as an animator in what was to become their in-house video game design team. But then I was making every miserable image, audio, video, and 3D model asset for literally hundreds of awful first-gen iPhone apps without any formal training in exporting digital assets, let alone actual design training.
Due to the unfathomable hours of dealing with file sizes, image sizes, image quality, format limitations, and compatibility issues that cut through my family time like the reaper’s scythe nearly every day, I became disillusioned. Unexpectedly, after surviving the digital-output-inferno several times, I began to love it. A year later, we were a team of twelve, and I had become the go-to disciple for exporting assets the right way.
The crazy thing is, even after ten years, I was still finding soul-crushing ways of compressing images the wrong way. I attribute much of this, in no small part, to the famine of good output doctrine versus the plague of wicked output heresy that inflicts the web. I consider myself a digital output survivor and have hope I can proselytize you to the cause.
And so, I have scribed this survival codex in the hope that this knowledge will serve you well in guiding you, without the need for a miracle, through converting your daily digital-image-output-inferno into a path that leads you to design paradise.
Drafted July 2018
Vector vs. Raster
While a Raster image obediently conforms to the pixel, a Vector image derives its form from dimensions beyond the pixel. In understanding the difference between the two, we come closer to knowing which weapon to choose for any particular job.
Raster Images
Raster images are the most commonly used image compression type due to their ability to capture a high level of visual fidelity, or as smaller, lighter visual elements. The drawback, however, is that those images of higher fidelity can have extraordinarily large file sizes while those of lower quality and dimension might barely leave a footprint.
Raster (Bitmap)
Raster images conform to the pixel with a zeal comparable to that of a true digital-demon hunter. When viewed at its native size, each pixel of a raster image shows through a corresponding physical display screen pixel. The blocky grey “circle” example is a magnified view of a raster image to display its bitmap matrix grid.
Vector Graphics
Their ability to be resized without losing quality, mixed with their small file sizes, vector graphics are an incredibly versatile image type that is becoming the new favorite for the new wave of web designers. A vector image could theoretically scale to infinity without losing detail. However, they are not ideal for portraying realistic texture.
Vector (Cartesian X, Y)
Vector images are made up of one or more polygonal shapes, which are defined by vector lines, which are determined by points containing Cartesian X, Y grid coordinates, and vector curve information. Each polygon includes color information such as solid colors, gradients, and outline thickness and effects such as blur, and opacity.
Lossy vs. Lossless
Lossy images lose data during compression. Lossless images do not.
Compression
Compression is a method of storing data with the use of a CODEC to reduce band-width and hard-drive space.
CODEC
A CODEC (encoder, decoder), like a divine cipher, is both a coder and a decoder which contains the methods of compressing and decompressing an image.
JPG (JPEG) Compression
JPG is the most widely used lossy image format, and yet, generating JPG content is probably one of the most misunderstood processes in the industry. It is far too common for websites to host JPG images that are very large for the sake of nearly unnoticeable improvement in visual quality.
JPG Export Considerations
When exporting to JPG, there are two main options to consider; Quality, and Re-Sampling.
Quality
JPG is a lossy file format with a quality range from 0% to 100%. There is a tendency to crank that slider up to 100%, but this is done with diminished returns in visual quality for an exponential gain in file size.
Compression Quality Results
Quality: 100%
File Size: 133 KB
Quality: 50%
File Size: 39 KB
This example is at 50% quality which shows negligible difference in visual quality but enjoys a file size that is roughly a quarter the file size.
Quality: 0%
File Size: 14 KB
This example is at 0% quality, and the file size is under half that of the previous and less than a tenth that of the first. Artifacts caused by the compression process are clearly visible.
PNG Compression
PNG is a lossless image format, prized for high-quality lossless images, and it’s ability to have transparency. The web development world sang, and the digital-demon hordes quaked at the birth of PNG. GIF (no, not JIF, just no) had become a niche format denigrated to animated memes.
PNG Export Considerations
When exporting to PNG, there are several options to consider; Transparency, 8-bit, 24-bit, or 32-bit, and Re-sampling.
Transparency
This option is on by default, but if your image does not contain any transparency there is no reason to include this option. Having this option on can make files that are ten percent larger
8, 24, or 32-bit
An 8-bit PNG is limited to a 256 color pallet and makes for small file sizes. A 24-bit PNG is limited to 16,777,216 colors but makes for much larger file sizes. A 32-bit PNG is visually identical to 24-bit with transparency.
8-bit Dithering
Dithering is how the CODEC assigns the color pallet swatches to each pixel. The method that is the best choice for your needs is entirely subjective, and none will affect file size or bandwidth. Divine inspiration is essential.
1: The original 24-bit version of the image.
2: The result of compressing to 8-bit without dithering applied.
3: The result of 100% Diffusion applied from a 1 to 100 scale.
4: The result of Pattern dithering applied.
5: The result of Noise dithering applied.
The GIF Wars
It is pronounced GIF with a hard “G,” not JIF with a soft wet noodle sound, and to say otherwise is heresy. The second GIF war is proof that any of us, even the creators of some of the most potent and inspired weapons used against the digital-demonic hordes, are susceptible to unholy corruption.
GIF
GIF is a lossless raster image format and was once the king of the web-UI realm. Dethroned by the upstart PNG, GIF is still very popular because of it’s accessibility, small file size, and most of all, it’s animation qualities.
Animation
The following example only has twenty frames, but the file size is the largest in this guide. Where a non-animated variant of the same GIF is only 118 kb, the twenty frame animated one is 1,866 kb.
The example is a simple animation that is intended to show how an animated GIF can still have acceptable visual and frame rate quality.
Animated GIF Considerations
- Each frame can hold for a minimum of 0.03 seconds and a maximum of 240 seconds.
- Each frame contains a unique color palette allowing for more colors throughout the entire file.
- Each frame is a separate GIF image, and file sizes can become much more massive than single frame GIFs.
SVG Optimization
SVG is a vector based image format and, outside of the need for photo-realistic or textured graphics, is potentially the most potent image format for use against the inferno. It’s tiny file sizes, low bandwidth, adaptive qualities, ability to have animations, and innate transparency and opacity, among a slew of other effects, makes it a potentially disruptive technology. The drawback is that it requires more advanced skills and expensive tools to fully utilize.
Making your SVGs even lighter.
As light as SVGs are, they can still be reduced in size without compromising quality. There is a multitude of tools for automating the process for you but I’ll show you what is being takan away. Lets start by inspecting a simple star SVG.
Default Exported Illustrator Code, 416 bytes
<svg id=”star” xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 256.38 243.83”><title>svg_star</title><path d=”M127.81,5.58l35.07,71.05a19.5,19.5,0,0,0,14.71,10.69L256,98.71,199.26,154a19.52,19.52,0,0,0–5.62,17.29l13.4,78.1L136.9,212.54a19.54,19.54,0,0,0–18.18,0L48.58,249.41,62,171.31A19.57,19.57,0,0,0,56.36,154L-.38,98.71,78,87.32A19.5,19.5,0,0,0,92.74,76.63Z” transform=”translate(0.38 -5.58)”/></svg>
Minimize Option From Illustrator, 409 bytes
<svg id=”star” xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 256.38 243.83”><title>svg_star_mini</title><path d=”M127.81,5.58l35.07,71.05a19.5,19.5,0,0,0,14.71,10.69L256,98.71,199.26,154a19.52,19.52,0,0,0–5.62,17.29l13.4,78.1L136.9,212.54a19.54,19.54,0,0,0–18.18,0L48.58,249.41,62,171.31A19.57,19.57,0,0,0,56.36,154L-.38,98.71,78,87.32A19.5,19.5,0,0,0,92.74,76.63Z” transform=”translate(0.38 -5.58)”/></svg>Manually Removing Unnecessary Data, 338 bytes
<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 256.38 243.83”><path d=”M128.19 0l35.07 71.05a19.5 19.5 0 0 0 14.71 10.69l78.41 11.39–56.74 55.29a19.52 19.52 0 0 0–5.62 17.29l13.4 78.1–70.14–36.85a19.54 19.54 0 0 0–18.18 0l-70.14 36.87 13.42–78.1a19.57 19.57 0 0 0–5.64–17.31L0 93.13l78.38–11.39a19.5 19.5 0 0 0 14.74–10.69z”/></svg>The Result
By removing unnecessary data and line-brakes, I’ve been able to reduce the file size by 18.75%. Doing these kinds of simple changes for assets that are much larger or take up an entire website can potentially make a significant difference.
“After a decade of experience with exporting images, and being digitally burned several times throughout the years, I believe I have gained enough wisdom to limit those digital burns to a minimum.”
[Digital-Output-Inferno] Survival Guide Conclusion
Although more depth is needed to truly master image compression and quality, my hope is that this guide will at least help you survive the inferno if you are not quite there yet.
Mastering image compression means being able to find where visual quality intersects with file size and bandwidth. True image quality is not solely in its visual quality, but rather in how it contributes to the experience as a whole.
After a decade of experience with exporting images, and being digitally burned several times throughout the years, I believe I have gained enough wisdom to limit those digital burns to a minimum. And now I pass it on to you. Go forth unto the [Digital-Output-Inferno].
All images created or captured by Mitch-Solo Tatafu. Digital demon illustration was based on the Lord of Darkness in Legend, a film by Ridley Scott… because why not?
