From e34e83ae14c1fd56c73a8c524f56d162cf6fed4a Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sat, 25 Apr 2026 20:18:40 -0400 Subject: [PATCH 01/13] Add Use Styles Instead Of Images pattern Closes #5 Co-Authored-By: Claude Opus 4.7 (1M context) --- src/assets/styles_not_images_thumbnail.svg | 43 +++++++++ src/patterns/use_styles_instead_of_images.md | 94 ++++++++++++++++++++ 2 files changed, 137 insertions(+) create mode 100644 src/assets/styles_not_images_thumbnail.svg create mode 100644 src/patterns/use_styles_instead_of_images.md diff --git a/src/assets/styles_not_images_thumbnail.svg b/src/assets/styles_not_images_thumbnail.svg new file mode 100644 index 0000000..9495ede --- /dev/null +++ b/src/assets/styles_not_images_thumbnail.svg @@ -0,0 +1,43 @@ + + + Pixels vs. CSS + + + + + + + + + + + + + + + + + + + + + + + + + image: 142 KB + blurry on retina + slow to render + + + + + + + + + CSS: ~120 B + crisp at any DPI + animatable + + diff --git a/src/patterns/use_styles_instead_of_images.md b/src/patterns/use_styles_instead_of_images.md new file mode 100644 index 0000000..3960061 --- /dev/null +++ b/src/patterns/use_styles_instead_of_images.md @@ -0,0 +1,94 @@ +--- +layout: article.njk +title: Use Styles Instead Of Images +tags: pattern +thumbnail: /assets/styles_not_images_thumbnail.svg +og_image: /assets/speed_patterns_og_image.jpg +order: 8 +--- + +Visual effects that originate in design tools — drop shadows, gradients, rounded corners, decorative borders, even small icons — are often shipped to the browser as raster images. They didn't have to be. CSS can express most of those effects directly in markup, at a tiny fraction of the byte cost and with no loss of fidelity. + + + +## The Problem + +A typical handoff path looks like this: the designer builds a mockup in Figma or Photoshop, exports the visual elements as PNG or JPEG, and the developer drops the exports into the page. The result _looks_ right, but it's expensive: + +- A drop shadow exported as a PNG can be 40–100 KB. The same shadow in CSS is a few bytes. +- A button rendered as an image is one network request, one rasterization step, and one fixed resolution. The same button in CSS scales to any DPI for free. +- A "hero" image with overlaid text saves time at design handoff but binds the text into the pixels — making it un-translatable, un-selectable, and bad for SEO. + +Every image is a network round-trip, a decode step on the user's CPU, and a layout consideration. Avoiding the round-trip entirely is almost always cheaper. + +## Solution + +Make CSS the default for any visual element that isn't fundamentally photographic. Reach for an image only when the content is a real photo or a complex illustration that CSS truly can't express. + +### What CSS handles well + +- **Shadows** — `box-shadow`, `text-shadow`, `filter: drop-shadow()` +- **Rounded corners** — `border-radius` (including elliptical and per-corner values) +- **Gradients** — linear, radial, conic, with stops and color interpolation +- **Borders and dividers** — solid, dashed, dotted, double, with custom widths and colors +- **Backgrounds and overlays** — multiple backgrounds, blend modes, masks +- **Icons** — most simple icons are better as inline SVG (resolution-independent and styleable) than as PNG sprites +- **Animations and transitions** — hover effects, fades, slides, pulses +- **Typography effects** — letterspacing, alternating colors, decorative underlines + +If your designer says "I want this corner rounded with a soft shadow and a thin border" — that's three lines of CSS and zero images. + +### Anti-pattern: the mixed hero + +A common offender is a hero banner that combines a photographic image with overlaid text. Designers often deliver this as a single rendered image — and the result is bad on both axes: + +- **PNG** preserves the text edges crisply but bloats the photographic part. +- **JPEG** compresses the photo well but introduces visible artifacts around the text. + +The right answer is to split the layers: + +```html +
+ +
+

Crisp, real text

+

Selectable, translatable, accessible.

+
+
+``` + +```css +.hero { position: relative; } +.hero__photo { width: 100%; height: 100%; object-fit: cover; } +.hero__copy { + position: absolute; inset: 0; + display: grid; place-content: center; + color: white; + text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); +} +``` + +The photo can be aggressively compressed (it's only being judged as a photo). The text stays crisp, accessible, responsive, and editable without shipping a new image. + +## Why This Works + +CSS rules are part of the stylesheet — already cached, already parsed, already applied to many elements. Replacing an image with CSS: + +- Eliminates a network request (or several, if multiple sizes were being served). +- Eliminates the decode and rasterization cost. +- Lets the browser scale the visual to any device pixel ratio without blurriness. +- Allows hover, focus and animation states without preloading additional image variants. +- Keeps text editable and indexable. + +## Guidelines + +- **Default to CSS.** Make "could this be done in CSS?" a routine question during design review, not an afterthought during optimization. +- **Use SVG for icons and simple illustrations.** Inline SVG can be styled with CSS and animated, and stays sharp at every resolution. +- **Reserve raster images for actual photographs** — and use modern formats (`AVIF`, `WebP`) with proper `srcset` and `sizes` for responsiveness. +- **Don't ship text as pixels.** Text is content; it belongs in HTML. +- **Tooling helps.** Modern CSS supports complex effects that were once only achievable with images — re-investigate the boundary periodically. + +## Related Patterns + +- [Fast Start](/patterns/fast_start/) — fewer bytes and fewer requests directly improve First Contentful Paint. +- [Immutable Layout](/patterns/immutable_layout/) — CSS-rendered visuals know their dimensions immediately, so they don't shift. From 5b6e0b368eab63e7d8079d9db051ca32c1f69308 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 12:24:57 -0400 Subject: [PATCH 02/13] Move technical implementation details to the end of the article --- src/patterns/use_styles_instead_of_images.md | 56 ++++++++++++-------- 1 file changed, 33 insertions(+), 23 deletions(-) diff --git a/src/patterns/use_styles_instead_of_images.md b/src/patterns/use_styles_instead_of_images.md index 3960061..d13e604 100644 --- a/src/patterns/use_styles_instead_of_images.md +++ b/src/patterns/use_styles_instead_of_images.md @@ -45,7 +45,36 @@ A common offender is a hero banner that combines a photographic image with overl - **PNG** preserves the text edges crisply but bloats the photographic part. - **JPEG** compresses the photo well but introduces visible artifacts around the text. -The right answer is to split the layers: +The right answer is to split the layers: keep the photo as a compressed image and render the text as real HTML positioned over it. The photo can be aggressively compressed (it's only being judged as a photo). The text stays crisp, accessible, responsive, and editable without shipping a new image. + +## Why This Works + +CSS rules are part of the stylesheet — already cached, already parsed, already applied to many elements. Replacing an image with CSS: + +- Eliminates a network request (or several, if multiple sizes were being served). +- Eliminates the decode and rasterization cost. +- Lets the browser scale the visual to any device pixel ratio without blurriness. +- Allows hover, focus and animation states without preloading additional image variants. +- Keeps text editable and indexable. + +## Guidelines + +- **Default to CSS.** Make "could this be done in CSS?" a routine question during design review, not an afterthought during optimization. +- **Use SVG for icons and simple illustrations.** Inline SVG can be styled with CSS and animated, and stays sharp at every resolution. +- **Reserve raster images for actual photographs** — and use modern formats (`AVIF`, `WebP`) with proper `srcset` and `sizes` for responsiveness. +- **Don't ship text as pixels.** Text is content; it belongs in HTML. +- **Tooling helps.** Modern CSS supports complex effects that were once only achievable with images — re-investigate the boundary periodically. + +## Related Patterns + +- [Fast Start](/patterns/fast_start/) — fewer bytes and fewer requests directly improve First Contentful Paint. +- [Immutable Layout](/patterns/immutable_layout/) — CSS-rendered visuals know their dimensions immediately, so they don't shift. + +## Technical Implementation + +### Splitting the mixed hero + +The mixed-hero anti-pattern is fixed by separating the photographic layer from the typographic one: ```html
@@ -68,27 +97,8 @@ The right answer is to split the layers: } ``` -The photo can be aggressively compressed (it's only being judged as a photo). The text stays crisp, accessible, responsive, and editable without shipping a new image. - -## Why This Works - -CSS rules are part of the stylesheet — already cached, already parsed, already applied to many elements. Replacing an image with CSS: +Each layer is now optimized for its own job: the JPEG can compress freely, and the text remains crisp, indexable and translatable. -- Eliminates a network request (or several, if multiple sizes were being served). -- Eliminates the decode and rasterization cost. -- Lets the browser scale the visual to any device pixel ratio without blurriness. -- Allows hover, focus and animation states without preloading additional image variants. -- Keeps text editable and indexable. +### CSS instead of decorative images -## Guidelines - -- **Default to CSS.** Make "could this be done in CSS?" a routine question during design review, not an afterthought during optimization. -- **Use SVG for icons and simple illustrations.** Inline SVG can be styled with CSS and animated, and stays sharp at every resolution. -- **Reserve raster images for actual photographs** — and use modern formats (`AVIF`, `WebP`) with proper `srcset` and `sizes` for responsiveness. -- **Don't ship text as pixels.** Text is content; it belongs in HTML. -- **Tooling helps.** Modern CSS supports complex effects that were once only achievable with images — re-investigate the boundary periodically. - -## Related Patterns - -- [Fast Start](/patterns/fast_start/) — fewer bytes and fewer requests directly improve First Contentful Paint. -- [Immutable Layout](/patterns/immutable_layout/) — CSS-rendered visuals know their dimensions immediately, so they don't shift. +Most decorative effects that once required images are direct CSS now: `box-shadow`, `border-radius`, `linear-gradient()`, `radial-gradient()`, `conic-gradient()`, `backdrop-filter`, `mask-image` and the `filter` family cover almost all of what design tools export. When in doubt, prototype the effect in CSS first; only fall back to a raster export if the browser truly can't reproduce it. From 8c7ae7b4eef60beed0e4ccb1fb42918f237c7fb3 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 12:36:50 -0400 Subject: [PATCH 03/13] Drop trailing periods from list items --- src/patterns/use_styles_instead_of_images.md | 34 ++++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/patterns/use_styles_instead_of_images.md b/src/patterns/use_styles_instead_of_images.md index d13e604..c6d0551 100644 --- a/src/patterns/use_styles_instead_of_images.md +++ b/src/patterns/use_styles_instead_of_images.md @@ -15,9 +15,9 @@ Visual effects that originate in design tools — drop shadows, gradients, round A typical handoff path looks like this: the designer builds a mockup in Figma or Photoshop, exports the visual elements as PNG or JPEG, and the developer drops the exports into the page. The result _looks_ right, but it's expensive: -- A drop shadow exported as a PNG can be 40–100 KB. The same shadow in CSS is a few bytes. -- A button rendered as an image is one network request, one rasterization step, and one fixed resolution. The same button in CSS scales to any DPI for free. -- A "hero" image with overlaid text saves time at design handoff but binds the text into the pixels — making it un-translatable, un-selectable, and bad for SEO. +- A drop shadow exported as a PNG can be 40–100 KB. The same shadow in CSS is a few bytes +- A button rendered as an image is one network request, one rasterization step, and one fixed resolution. The same button in CSS scales to any DPI for free +- A "hero" image with overlaid text saves time at design handoff but binds the text into the pixels — making it un-translatable, un-selectable, and bad for SEO Every image is a network round-trip, a decode step on the user's CPU, and a layout consideration. Avoiding the round-trip entirely is almost always cheaper. @@ -42,8 +42,8 @@ If your designer says "I want this corner rounded with a soft shadow and a thin A common offender is a hero banner that combines a photographic image with overlaid text. Designers often deliver this as a single rendered image — and the result is bad on both axes: -- **PNG** preserves the text edges crisply but bloats the photographic part. -- **JPEG** compresses the photo well but introduces visible artifacts around the text. +- **PNG** preserves the text edges crisply but bloats the photographic part +- **JPEG** compresses the photo well but introduces visible artifacts around the text The right answer is to split the layers: keep the photo as a compressed image and render the text as real HTML positioned over it. The photo can be aggressively compressed (it's only being judged as a photo). The text stays crisp, accessible, responsive, and editable without shipping a new image. @@ -51,24 +51,24 @@ The right answer is to split the layers: keep the photo as a compressed image an CSS rules are part of the stylesheet — already cached, already parsed, already applied to many elements. Replacing an image with CSS: -- Eliminates a network request (or several, if multiple sizes were being served). -- Eliminates the decode and rasterization cost. -- Lets the browser scale the visual to any device pixel ratio without blurriness. -- Allows hover, focus and animation states without preloading additional image variants. -- Keeps text editable and indexable. +- Eliminates a network request (or several, if multiple sizes were being served) +- Eliminates the decode and rasterization cost +- Lets the browser scale the visual to any device pixel ratio without blurriness +- Allows hover, focus and animation states without preloading additional image variants +- Keeps text editable and indexable ## Guidelines -- **Default to CSS.** Make "could this be done in CSS?" a routine question during design review, not an afterthought during optimization. -- **Use SVG for icons and simple illustrations.** Inline SVG can be styled with CSS and animated, and stays sharp at every resolution. -- **Reserve raster images for actual photographs** — and use modern formats (`AVIF`, `WebP`) with proper `srcset` and `sizes` for responsiveness. -- **Don't ship text as pixels.** Text is content; it belongs in HTML. -- **Tooling helps.** Modern CSS supports complex effects that were once only achievable with images — re-investigate the boundary periodically. +- **Default to CSS.** Make "could this be done in CSS?" a routine question during design review, not an afterthought during optimization +- **Use SVG for icons and simple illustrations.** Inline SVG can be styled with CSS and animated, and stays sharp at every resolution +- **Reserve raster images for actual photographs** — and use modern formats (`AVIF`, `WebP`) with proper `srcset` and `sizes` for responsiveness +- **Don't ship text as pixels.** Text is content; it belongs in HTML +- **Tooling helps.** Modern CSS supports complex effects that were once only achievable with images — re-investigate the boundary periodically ## Related Patterns -- [Fast Start](/patterns/fast_start/) — fewer bytes and fewer requests directly improve First Contentful Paint. -- [Immutable Layout](/patterns/immutable_layout/) — CSS-rendered visuals know their dimensions immediately, so they don't shift. +- [Fast Start](/patterns/fast_start/) — fewer bytes and fewer requests directly improve First Contentful Paint +- [Immutable Layout](/patterns/immutable_layout/) — CSS-rendered visuals know their dimensions immediately, so they don't shift ## Technical Implementation From ad9979b7cf2d712af3df81175dd531101c2ca536 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 13:09:24 -0400 Subject: [PATCH 04/13] Apply Prettier formatting --- src/patterns/use_styles_instead_of_images.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/patterns/use_styles_instead_of_images.md b/src/patterns/use_styles_instead_of_images.md index c6d0551..b3780d2 100644 --- a/src/patterns/use_styles_instead_of_images.md +++ b/src/patterns/use_styles_instead_of_images.md @@ -87,11 +87,19 @@ The mixed-hero anti-pattern is fixed by separating the photographic layer from t ``` ```css -.hero { position: relative; } -.hero__photo { width: 100%; height: 100%; object-fit: cover; } +.hero { + position: relative; +} +.hero__photo { + width: 100%; + height: 100%; + object-fit: cover; +} .hero__copy { - position: absolute; inset: 0; - display: grid; place-content: center; + position: absolute; + inset: 0; + display: grid; + place-content: center; color: white; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); } From 41d41a58fd47d499676473fb98693ae4f976162d Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 13:12:29 -0400 Subject: [PATCH 05/13] Redraw thumbnail to follow canonical diagram theme --- src/assets/styles_not_images_thumbnail.svg | 72 +++++++++++----------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/src/assets/styles_not_images_thumbnail.svg b/src/assets/styles_not_images_thumbnail.svg index 9495ede..8ede674 100644 --- a/src/assets/styles_not_images_thumbnail.svg +++ b/src/assets/styles_not_images_thumbnail.svg @@ -1,43 +1,43 @@ - - Pixels vs. CSS - - - - - - - - - - - - - - - - - - - - - - + + Pixels vs. CSS + + + + + + + + + + + + + + + + + + + + + + - image: 142 KB - blurry on retina - slow to render + image: 142 KB + blurry on retina + slow to render - - - + + - - - - CSS: ~120 B - crisp at any DPI - animatable + + + + + CSS: ~120 B + crisp at any DPI + animatable From 86d777d5d2e977481ba7e063b98bd8778e442c85 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 13:15:25 -0400 Subject: [PATCH 06/13] Embed thumbnail illustration after the Problem section --- src/patterns/use_styles_instead_of_images.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/patterns/use_styles_instead_of_images.md b/src/patterns/use_styles_instead_of_images.md index b3780d2..d726deb 100644 --- a/src/patterns/use_styles_instead_of_images.md +++ b/src/patterns/use_styles_instead_of_images.md @@ -21,6 +21,11 @@ A typical handoff path looks like this: the designer builds a mockup in Figma or Every image is a network round-trip, a decode step on the user's CPU, and a layout consideration. Avoiding the round-trip entirely is almost always cheaper. +
+
The same visual element shipped two ways: as a 142KB raster image, or as ~120 bytes of CSS. The CSS version is also crisp at any DPI and animatable.
+Side-by-side comparison: a pixelated raster image labeled '142 KB, blurry on retina, slow to render' next to a smooth rounded rectangle labeled 'CSS: ~120 B, crisp at any DPI, animatable' +
+ ## Solution Make CSS the default for any visual element that isn't fundamentally photographic. Reach for an image only when the content is a real photo or a complex illustration that CSS truly can't express. From b0f02a3f014d1a3216bf1255ea8c32b962774ebb Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 13:26:09 -0400 Subject: [PATCH 07/13] Move SVG title text to figcaption; description becomes paragraph --- src/assets/styles_not_images_thumbnail.svg | 3 +-- src/patterns/use_styles_instead_of_images.md | 4 +++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/assets/styles_not_images_thumbnail.svg b/src/assets/styles_not_images_thumbnail.svg index 8ede674..e647a7e 100644 --- a/src/assets/styles_not_images_thumbnail.svg +++ b/src/assets/styles_not_images_thumbnail.svg @@ -1,6 +1,5 @@ - + - Pixels vs. CSS diff --git a/src/patterns/use_styles_instead_of_images.md b/src/patterns/use_styles_instead_of_images.md index d726deb..a8a4fa8 100644 --- a/src/patterns/use_styles_instead_of_images.md +++ b/src/patterns/use_styles_instead_of_images.md @@ -21,8 +21,10 @@ A typical handoff path looks like this: the designer builds a mockup in Figma or Every image is a network round-trip, a decode step on the user's CPU, and a layout consideration. Avoiding the round-trip entirely is almost always cheaper. +The same visual element shipped two ways: as a 142KB raster image, or as ~120 bytes of CSS. The CSS version is also crisp at any DPI and animatable. +
-
The same visual element shipped two ways: as a 142KB raster image, or as ~120 bytes of CSS. The CSS version is also crisp at any DPI and animatable.
+
Pixels vs. CSS
Side-by-side comparison: a pixelated raster image labeled '142 KB, blurry on retina, slow to render' next to a smooth rounded rectangle labeled 'CSS: ~120 B, crisp at any DPI, animatable' From 713e47a8edf3aa16e62c5debe17dd28124b02ca3 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 13:36:23 -0400 Subject: [PATCH 08/13] Move figcaption below the image --- src/patterns/use_styles_instead_of_images.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/patterns/use_styles_instead_of_images.md b/src/patterns/use_styles_instead_of_images.md index a8a4fa8..9184794 100644 --- a/src/patterns/use_styles_instead_of_images.md +++ b/src/patterns/use_styles_instead_of_images.md @@ -24,8 +24,8 @@ Every image is a network round-trip, a decode step on the user's CPU, and a layo The same visual element shipped two ways: as a 142KB raster image, or as ~120 bytes of CSS. The CSS version is also crisp at any DPI and animatable.
-
Pixels vs. CSS
Side-by-side comparison: a pixelated raster image labeled '142 KB, blurry on retina, slow to render' next to a smooth rounded rectangle labeled 'CSS: ~120 B, crisp at any DPI, animatable' +
Pixels vs. CSS
## Solution From 6a1b7232088eaacf187687693bd7748edfc80c47 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 13:51:12 -0400 Subject: [PATCH 09/13] Shorten arrow so its tip clears the right panel --- src/assets/styles_not_images_thumbnail.svg | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/styles_not_images_thumbnail.svg b/src/assets/styles_not_images_thumbnail.svg index e647a7e..8f10f6f 100644 --- a/src/assets/styles_not_images_thumbnail.svg +++ b/src/assets/styles_not_images_thumbnail.svg @@ -29,9 +29,9 @@ slow to render - + - + From 687b4403238a389dcde8b5b4f518bd0c310ccad5 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 14:02:08 -0400 Subject: [PATCH 10/13] Use white-with-border content boxes (drop yellow/orange fills) --- src/assets/styles_not_images_thumbnail.svg | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/styles_not_images_thumbnail.svg b/src/assets/styles_not_images_thumbnail.svg index 8f10f6f..451c119 100644 --- a/src/assets/styles_not_images_thumbnail.svg +++ b/src/assets/styles_not_images_thumbnail.svg @@ -1,7 +1,7 @@ - + @@ -33,7 +33,7 @@ - + CSS: ~120 B crisp at any DPI From 827f8c424d169c1d4703e0cfa21fcf68e33e3cb1 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 14:09:37 -0400 Subject: [PATCH 11/13] Increase illustration size by 15% (400 -> 460) --- src/patterns/use_styles_instead_of_images.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/patterns/use_styles_instead_of_images.md b/src/patterns/use_styles_instead_of_images.md index 9184794..e324e78 100644 --- a/src/patterns/use_styles_instead_of_images.md +++ b/src/patterns/use_styles_instead_of_images.md @@ -24,7 +24,7 @@ Every image is a network round-trip, a decode step on the user's CPU, and a layo The same visual element shipped two ways: as a 142KB raster image, or as ~120 bytes of CSS. The CSS version is also crisp at any DPI and animatable.
-
Side-by-side comparison: a pixelated raster image labeled '142 KB, blurry on retina, slow to render' next to a smooth rounded rectangle labeled 'CSS: ~120 B, crisp at any DPI, animatable' +Side-by-side comparison: a pixelated raster image labeled '142 KB, blurry on retina, slow to render' next to a smooth rounded rectangle labeled 'CSS: ~120 B, crisp at any DPI, animatable'
Pixels vs. CSS
From bc59fb9963130f9670afc9691df4aac4b52dccc0 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 20:29:30 -0400 Subject: [PATCH 12/13] Add author and creation date to Use Styles Instead Of Images Author taken from the original issue (#5) creator; date is the issue creation date. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/patterns/use_styles_instead_of_images.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/patterns/use_styles_instead_of_images.md b/src/patterns/use_styles_instead_of_images.md index e324e78..51fa4c0 100644 --- a/src/patterns/use_styles_instead_of_images.md +++ b/src/patterns/use_styles_instead_of_images.md @@ -5,6 +5,10 @@ tags: pattern thumbnail: /assets/styles_not_images_thumbnail.svg og_image: /assets/speed_patterns_og_image.jpg order: 8 +date: 2017-12-05 +authors: + - name: Sergey Chernyshev + url: https://www.sergeychernyshev.com/ --- Visual effects that originate in design tools — drop shadows, gradients, rounded corners, decorative borders, even small icons — are often shipped to the browser as raster images. They didn't have to be. CSS can express most of those effects directly in markup, at a tiny fraction of the byte cost and with no loss of fidelity. From 7aa1eace881031502a2f509b7452a15c2f0d6340 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 20:40:36 -0400 Subject: [PATCH 13/13] Mark Use Styles Instead Of Images as AI-assisted Co-Authored-By: Claude Opus 4.7 (1M context) --- src/patterns/use_styles_instead_of_images.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/patterns/use_styles_instead_of_images.md b/src/patterns/use_styles_instead_of_images.md index 51fa4c0..d6a9a1f 100644 --- a/src/patterns/use_styles_instead_of_images.md +++ b/src/patterns/use_styles_instead_of_images.md @@ -5,6 +5,7 @@ tags: pattern thumbnail: /assets/styles_not_images_thumbnail.svg og_image: /assets/speed_patterns_og_image.jpg order: 8 +ai_assisted: true date: 2017-12-05 authors: - name: Sergey Chernyshev