Zach’s ugly mug (his face)

Zach Leatherman

Vector? Raster? Why Not Both!

August 25, 2021 #3 Popular

This week I ran into an interesting class of problem that—in hindsight—could use a much better workflow. Does it exist?

Screenshot of jamstackconf.com

It has to do with the hero image on the right side of the home page on jamstackconf.com. We work using Figma on the marketing team at Netlify and my first attempt at exporting this image was fraught with peril.

Attempt 1: SVG

  • 10.1 MB Original Export from Figma as SVG
  • 9.9 MB SVG optimized with SVGOMG

Now I know that these sizes are the uncompressed file sizes (before GZIP/Brotli) but I think we can both agree that even an optimized 9.9 MB is a bridge too far for even the starchiest of compression algorithms (Update: 9.9 MB gzipped to 7.36 MB). There are just too many embedded raster images inside of this SVG to yield good results from SVGOMG alone. Let’s swap to raster and see how far we can go.

Attempt 2: PNG

1.2 MB Original Export from Figma as PNGFull PNG version

So y’all know me well enough that I won’t be putting a 1.2 MB hero image in that prime area of viewport real estate. Let’s try some basic optimizations. The important thing to note here is that we need to preserve the image’s transparency. If the background color changes, I don’t want to have to reoptimize this image. That rules out a conversion to JPEG.

ImageOptim

831 KB PNG optimized with ImageOptimImageOptim PNG version

I was impressed with the ~400 KB savings here from a single drag-and-drop onto ImageOptim but 831 is still too high.

Squoosh

376 KB PNG optimized with Squoosh (Reduced palette to 256 colors)Squoosh PNG version

Now we’re cooking with gas. That Reduced Palette option offered a huge savings! I did play around with the AVIF format settings on Squoosh a bit but wasn’t able to beat the PNG file size. (Update August 27: take note of the new Attempt 4: AVIF section below)

Attempt 3: WebP

152 KB WebP optimized with Squoosh (Lossless, Reduced palette to 256 colors, demo offers PNG fallback)Squoosh WebP version

Wow, this is a really nice file size savings! And we’ll use <picture> here to progressively enhance our PNG to WebP. Many might consider this to be “good enough” but the entire point of this blog post is the last trick (*waves jazz hands*).

Attempt 4: AVIF

Update August 27: Jake Archibald offered some good advice to try the AVIF format again (in Lossy mode) without reducing the color palette. I think it was a good prompt! The reduced palette options (while offering large file size improvement) did take a toll on the image. My informal goal here was to get as much quality out of the AVIF format with a similar file size to the WebP reduced palette version.

Read Jake’s excellent blog post: AVIF has landed.

Squoosh settings: Lossless (off), Quality: 45, Subsample Chroma (off), Effort: 6

168 KB AVIF optimized with Squoosh (Full palette, demo offers WebP and PNG fallback)Squoosh WebP version

The Winner: Two Separate Layers: SVG + AVIF/WebP/PNG

If we separate the stuff that vectors are good at (gradients, lines, etc.) and put that into an SVG and put the rest into the raster format, we can achieve even more savings! Now I did take a bit of the easy way out here—I didn’t put as much into the vector layer as I could have. And you may want to preserve more of the image in the foreground for things like “printing” (as if anyone still did that).

2 Layers, SVG version optimized with SVGOMG
Squoosh WebP version

Using the raster layer as the foreground image and the supplementary vector image as a CSS background-image, we can combine the two! You may even be able to dump the optimized raster back into the SVG as a Data URI embedded in an <image> if you want to get real fancy—I didn’t go down that road.

74 KB + 4.2 KB Optimized SVG plus AVIF/WebP/PNGTwo layers

Final Results

From 10.06 MB to 78 KB—a savings of 9.9 MB. Not too bad.

MethodSizeSavings
Original SVG10.06 MB
SVG optimized with SVGOMG9.92 MB-0.14 MB
PNG1.16 MB-8.76 MB
PNG optimized with ImageOptim831 KB-329 KB
PNG optimized with Squoosh (Reduced palette)376 KB-455 KB
WebP optimized with Squoosh (Reduced palette)152 KB-224 KB
AVIF optimized with Squoosh (Full palette)168 KB+16 KB
Two Layers: SVG (SVGOMG), AVIF/WebP/PNG (Squoosh)78 KB-90KB

Savings are in comparison to the previous attempt.

Disclaimer: If you check the above sizes to the currently implemented version on jamstackconf.com the raster image layer may be larger than expected! I still need to merge a PR to ship some final optimizations! The PR has shipped!

Zach’s ugly mug (his face)

Zach is a builder for the web with Netlify. He created the Eleventy static site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

Previous
Every Fire Needs a Sparkline
Next
Fire SVG animations (SMIL) when the SVG is visible

29 Retweets

ShawOllie BoermansEric Guo 过纯中Duncan MackenzieRyan MulliganMinimalist Wall ClocksKamen NaydenovNoble DesktopDan RodneyMike AparicioJono AldersonBasix Sara SoueidanFrançois REMYYoav WeissPaul Ayo4rontenderSami KeijonenFynn BeckerThomas SteinerHenri Helvetica v2.2 👩🏾‍🚀 🇭🇹Tyler Sticka, ☁️4Eric PortisGabriel LuethjeJean Pierre KolbBotónamberleyMartin SchneiderJamstack
122 Likes
Ahmad SaleemEric Guo 过纯中Alexei AccioRoberto ModicaMarkus CadonauMichele InvernizziBrian MilnepudymodyKiran SonleyPierre FarShawTRST_Blogkev eStephen LindbergPaul Shryock (he/him)Matthew PhillipsRyan MulliganSubramanya Chakravarthyᴊᴏɴᴀs sᴄʜᴍɪᴅᴛGoerpMisbah ansoriMahdiMike AparicioLeoaeePhil KeysAndrew ChouKevin MacKenzieSubaru Tempest 🐉Dave MethvinSue PoohGolmoteM Haidar Hanif 🧊Danuel, the Cruella🤍Gregor AlbrechtSteinErik SkotkjerraSebiNicolas GiethlenShireen TajJeremy JayMaëligCorentinSérgio JardimMyCool KingStephen CunliffeAndrea Pernici丁一Johannes SchröderFrançois REMYBob MassarczykMatthias OttRobert McCrearyDan Shappir 💉💉💉AdrianNiiAyi AnkrahHazim Sami / حازم ساميnemzes 🇪🇺dies das 🦂 contentPeppouptonkingLeo BernarddovydenflakiMaxime RichardFynn BeckerBradley TaylorPaul AyoPhil HawksworthJamund FergusonJacob 'KurtXTRM' GroßMark Tomlinson𝒟𝑜𝑔𝓊𝓀𝒶𝓃Sami KeijonenMilo VermeulenAhmad ShadeedSven WolfermannHélio Correia4rontenderKaiFynn BeckerTimon ForrerChrisArchitectRafael Calvo 🔰Scott McCrackenMatt KaneKyle Mitofsky #BLMAlfredo LopezDion AlmaerflakiDaniel Ehnissdodiameer 🧡Aodhan HamiltonEric PortisSøren Birkemeyer 🦊ced 404Tyler Sticka, ☁️4Gaël PoupardBernard Nijenhuisdodiameer 🧡Ben DelarreCallieAs soon as I spot one 👾bkardellJoe Lamyman𝕕𝔾𝕣𝕒𝕞𝕞𝕒𝕥𝕚𝕜𝕠amberleyGuus HoeveJózsef Polgárashur.cab/reraSanti CrosColin FahrionBotónAlexis DeveriaChris Price 🏳️‍🌈Jaqueline Bica⚡Stephanie EcklesOwen Buckley 💡Lars Knudsen in 🇩🇰Robin RendleLee FisherPunky! Laboratorio DigitalNikita Voloboev
22 Replies
  1. Chriztian Steinmeier

    Chriztian Steinmeier @greystate #

    Nice - and layering offers the neat possibility of adding a subtle parallax effect... 🤔

  2. Mark Tomlinson

    Mark Tomlinson @NeuesAltes #

    So, so satisfying. Thanks a lot for sharing

  3. Jake Archibald

    Jake Archibald @jaffathecake #

    Nice! The raster layer would be around 50-55kb as an AVIF. It isn't a huge saving, but it means you wouldn't need to drop to 256 colours.

  4. Henri Helvetica v2.2 👩🏾‍🚀 🇭🇹

    Henri Helvetica v2.2 👩🏾‍🚀 🇭🇹 @HenriHelvetica #

    for sure the approach is wild. Ppl might not realize that putting a face on a plain background sends the file size in the clouds, and possibly forces a new format choice

  5. Zach Leatherman

    Zach Leatherman @zachleat #

    SV-BMP

  6. Zach Leatherman

    Zach Leatherman @zachleat #

    For me the weak point is that blue oval in the SVG, I don’t think it’s raster but it ain’t looking good on iOS when I zoom in. Worth another look, that part might need to go into the raster version. Approach is still sound tho

  7. Henri Helvetica v2.2 👩🏾‍🚀 🇭🇹

    Henri Helvetica v2.2 👩🏾‍🚀 🇭🇹 @HenriHelvetica #

    what do you call this? Vitmap? Rastor?

  8. Henri Helvetica v2.2 👩🏾‍🚀 🇭🇹

    Henri Helvetica v2.2 👩🏾‍🚀 🇭🇹 @HenriHelvetica #

    nice. PNG-8s are awesome. w/o naming names, I can hear them screaming that was too much work, and send that to a service, but w/o source files, this won’t be done. Added, some will say that 8 bit webp isn’t sharp enough. It was made for this though. 👏🏾

  9. Zach Leatherman

    Zach Leatherman @zachleat #

    ooooh yes—this is good 🏆

  10. Adam Stoddard

    Adam Stoddard @AdamStddrd #

    yes yes yes along similar lines, love to use filter drop shadows instead of baking them into semi-transparent images so you can get nice soft shadows *and* those sweet gainz (reductionz?) from reducing the palette

  11. Zach Leatherman

    Zach Leatherman @zachleat #

    yeah, I think Twitter lets you opt-out of a preview on a tweet if it pops one up and you delete it—which I normally like! But this time I did the wrong thing

  12. Berkay🥤

    Berkay🥤 @raufsamestone #

    I think you can update/re-index OG image for previous Tweet with Card Validator. cards-dev.twitter.com/validator

  13. Roel Nieskens

    Roel Nieskens @PixelAmbacht #

    Ah see, it's there!! Apologies for the noise. Sincerely, Roel " " Nieskens

  14. Alexis Deveria

    Alexis Deveria @Fyrd #

    Haha, yeah absolutely agree.

  15. Zach Leatherman

    Zach Leatherman @zachleat #

    Yeah—I think so! I did mention that in the middle somewhere

  16. Zach Leatherman

    Zach Leatherman @zachleat #

    is the real MVP

  17. Roel Nieskens

    Roel Nieskens @PixelAmbacht #

    Sweet, yo! Would you be able to do the same layering but inside the SVG image instead of layered backgrounds of a DIV? It can do bitmap and vector after all. Or am I missing something? (DISCLAIMER: "am I missing something" is my middle name)

  18. Dave Rupert

    Dave Rupert @davatron5000 #

    Here to say excellent use of

  19. Zach Leatherman

    Zach Leatherman @zachleat #

    You’re welcome!

  20. Zach Leatherman

    Zach Leatherman @zachleat #

    bOrED?? NEvEr 😅 AlThoUgH I wILL say tHaT BEcAuse tHE SVG is ABOUT 4 kB gZIpPed it MiGHT noT QUite FiT tHe baCK-OF-ThE-NApkin COST/Benefit MaTH I wOULd want 🥸

  21. Punky! Laboratorio Digital

    Punky! Laboratorio Digital @punkyio #

    Great solution! Thanks for sharing 🙌

  22. Alexis Deveria

    Alexis Deveria @Fyrd #

    Very cool! Love the vector + raster solution. If you were bored, one further optimization would be to hand-craft the SVG to use a for that grid instead of that big path...or possibly have a repeating background in CSS. 🤔

    43 Mentions
    1. news.priviw.com #

    2. Visyu Solution

      Visyu Solution @VisyuSolution #

      Vector? Raster? Why Not Both!—zachleat.com zachleat.com/web/vector-ras…

    3. mailsgun.ru #

    4. programmer.chimpymail.com #

      Show original post InsPirAtional websiTe oF thE WeeK: iNFrAreD mASTeR NEw skIlLs aCCEss mODern GpU FEaTuRES WItH weBgPu a dEEP diVE iNTo thE wOnDeRfUL WoRLD oF SVg diSPLACEmENt fIlTERING wHY aRe HypERliNKs bLUe? aN InterACTiVe gUIdE tO CSs keYFRAme aNIMATiONs wiTH @kEyFrAmES CrAFtinG oRGaNic PAttEr… Truncated

    5. programmer.chimpymail.com #

      Show original post (This is a sponsored post.) What? Jamstack Conf! It’s the best! Learn what’s happening and what’s next for this hot ecosystem. When? October 6–7, 2021 Where? Virtual / online. How much? It’s free! There are workshops as well though, at $100 a seat. Who? You! Oh you mean speakers?… Truncated

    6. graphics-unleashed.com #

    7. tankred

      tankred @tnkrd #

      the art of image optimization zachleat.com/web/vector-ras…

    8. the art of image optimization zachleat.com/web/vector-ras…

    9. Josué Acevedo

      Josué Acevedo @neomatrixcode #

      Vector? Raster? Why Not Both!—zachleat.com zachleat.com/web/vector-ras…

    10. Andy Jackson 🌍

      Andy Jackson 🌍 @anjacks0n #

      I liked this file format story - sometimes two formats are better than one. zachleat.com/web/vector-ras…

    11. Welcome to ISSUE #91 of The Overflow! This newsletter is by developers, for developers, written and curated by the Stack Overflow team and Cassidy Williams at Netlify. This week: scaling front-end design with a system, helping fighter jets score hits with radar, and ignoring the … Truncated

    12. RSSFeeds Cloud

      RSSFeeds Cloud https://rssfeeds.cloudsite.builders/author/rssfeeds/ #

      Welcome to ISSUE #91 of The Overflow! This newsletter is by developers, for developers, written and curated by the Stack Overflow team and Cassidy Williams at Netlify. This week: scaling front-end design with a system, helping fighter jets score hits with radar, and ignoring the … Truncated

    13. FullStack Bulletin

      FullStack Bulletin @fstackbulletin #

      Vector? Raster? Why Not Both zachleat.com/web/vector-ras…

    14. WP Expert | WordPress,Web Design & Marketing

      WP Expert | WordPress,Web Design & Marketing @wpexpert3 #

      Insights into chosing between vector or raster images. zachleat.com/web/vector-ras…

    15. www.67nj.org #

    16. marketingsolution.com.au #

      Show original post jAmstaCK cOnF 2021 sePTemBER 15, 2021 WEb DEveLOpMEnt No coMmeNTS (tHIs Is a spoNsOrED pOSt.) what? JaMStAck Conf! it’s tHE BEst! lEarn WHAt’s hAPpEning and what’S NExT FOR ThiS Hot EcoSystEM. wHEn? OCtoBER 6–7, 2021 WHerE? ViRTual / onliNe. HoW MUch? it’S FRE… Truncated

    17. Awesome approach by @zachleat to minimise images for the web! Just separate parts of images that are nicely handled by vectors in SVGs and place the other stuff as an optimised rastered image on it.

    18. Frontend Daily 🚀

      Frontend Daily 🚀 @FrontendDaily #

      Vector? Raster? Why Not Both!: zachleat.com/web/vector-ras…

    19. Fatih Hayrioğlu

      Fatih Hayrioğlu @fatihhayri #

      Bu kadar resim formatı olması kafa karıştırsa da sonuçta iyi birşey. Vector? Raster? Why Not Both!—zachleat.com zachleat.com/web/vector-ras…

    20. Front-End Front

      Front-End Front @frontendfront #

      Vector? Raster? Why Not Both! zachleat.com/web/vector-ras…

    21. Pablo Lara H

      Pablo Lara H @pablolarah #

      Vector? Raster? Why Not Both! by Zach Leatherman @zachleat #vector #raster #webdev #image #imageoptimization #webperf zachleat.com/web/vector-ras…

    22. Friday Front-End

      Friday Front-End @fridayfrontend #

      Vector? Raster? Why Not Both! by @zachleat zachleat.com/web/vector-ras…

    23. wpguynews.com #

    24. www.67nj.org #

    25. hnikoloski.com #

    26. pixallus.com #

    27. tympanus.net #

    28. marketingsolution.com.au #

      Show original post Links on Performance IV September 3, 2021 Web Development No Comments HTTP Caching is a Superpower — Hugh Haworth covers how the Cache-Control header is an awfully potent ingredient in web performance. I mis-read the title at first and was waiting to read abou… Truncated

    29. Inspirational Website of the Week: Infrared Soft animations and a perfect color scheme make this website’s design glow. Our pick this week. Get inspired This content is sponsored via Syndicate Ads Master new skills Do you love building things? Then this event is for … Truncated

    30. Martin Underhill

      Martin Underhill @tempertemper #

      I’ve encountered this vector + raster, two images approach to a single illustration a few times over the years zachleat.com/web/vector-ras…

    31. studioxrio.org #

    32. Thiery Michel

      Thiery Michel @Hyriel_Mecrith #

      zachleat.com/web/vector-ras…

    33. dailydevlinks.

      dailydevlinks. @dailydevlinks #

      📝 Vector? Raster? Why not both! 🔗 zachleat.com/web/vector-ras… #html #css #javascript #webdev

    34. mailsgun.ru #

    35. Jyrki Alakuijala

      Jyrki Alakuijala @jyzg #

      zachleat.com/web/vector-ras… WebP palettized 152 KB AVIF palettized 168 KB ?! We need JPEG XL for making progress here :-]

    36. Fresh Frontend Links

      Fresh Frontend Links @frontender_ua #

      Vector? Raster? Why Not Both! zachleat.com/web/vector-ras…

    37. Dan Denney

      Dan Denney @dandenney #

      Vector? Raster? Why Not Both!—zachleat.com zachleat.com/web/vector-ras…

    38. Веб-стандарты

      Веб-стандарты @webstandards_ru #

      Вектор? Растр? Оба? Зак Лезерман подбирает наиболее экономный по трафику способ вставки большой картинки на страницу. zachleat.com/web/vector-ras…

    39. Bramus! https://www.bram.us/author/bramus/ #

      Starting off with a 10.06MB SVG, Zach Leatherman tried several routes to reduce the weight of the hero image on the right side of the home page on JamStackConf.com. Eventually he settled on an approach where he layered a transparent WebP image on top of an SVG. Both layers were o… Truncated

    40. Joan León 🏞⚡️

      Joan León 🏞⚡️ @nucliweb #

      Vector? Raster? Why Not Both! zachleat.com/web/vector-ras… by @zachleat #WebPerf #Image #ImagePerf #ImageCrafters #PerfCrafters

    41. Jacky

      Jacky @jackysee #

      Vector? Raster? Why Not Both!—zachleat.com zachleat.com/web/vector-ras…

    42. Ahmad Shadeed

      Ahmad Shadeed @shadeed9 #

      I enjoy reading articles like this one 😍

    43. Punky! Laboratorio Digital

      Punky! Laboratorio Digital @punkyio #

      Image optimization: a masterclass. ⚡️ #svg #png #imageoptimization

    Social Card Image Preview

    This is what will show up when you share this post on Social Media:

    How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)