Everand Logo

Welcome to Everand!

  • Discover millions of ebooks, audiobooks, and so much more with a free trial

    Only $11.99/month after trial. Cancel anytime.

    Image Performance
    Image Performance
    Image Performance
    Ebook113 pages59 minutes

    Image Performance

    By Mat Marquis

    ()

    Read preview

    About this ebook

    To solve the most critical performance problems with the biggest impact, start with images. Responsive Issues Community Group (RICG) chair Mat Marquis helps us make smart decisions about images and shows us the swiftest way to improve a website's performance: from understanding compression methods used by common image formats, to responsive imag

    LanguageEnglish
    PublisherA Book Apart
    Release dateNov 1, 2023
    ISBN9781952616938
    Image Performance
    Author

    Mat Marquis

    Mat "Wilto" Marquis is an amateur boxer, aspiring chef, halfway decent carpenter, and passable antique British motorcycle mechanic-when not making fast, accessible, responsive websites. He keeps busy.As chair of the Responsive Issues Community Group, Mat spearheaded the effort to bring native responsive image solutions to the HTML5 specification, later going on to facilitate browser implementations and oversee the addition of native responsive image techniques to major CMSes. He has spoken at An Event Apart, edited for A List Apart, and published books with A Book Apart, completing what he describes as "like an EGOT, but for putting semicolons in the right places."

    Related to Image Performance

    Related ebooks

    Internet & Web For You

    View More
    View More

    Related podcast episodes

    Related articles

    • Article

      Letters

      Feb 10, 2021

      As a dedicated user of Google’s products, I’m afraid Issue 597’s Cover Feature (‘Stop Using Google’) simply proved the old adage that there’s no such thing as a free lunch. My brilliantly simple Chromebook delivers all the services that the average o

      6 min read

    • Article

      From the Editor

      Sep 6, 2021

      From the Editor
      1 min read

    • Article

      Readers’comments

      Sep 10, 2020

      Readers’comments
      3 min read

    • Article

      “Reputations Are Going To Be Staked On How ‘The Computer’ Goes About Making Decisions”

      Jun 10, 2021

      We live lonely lives here sometimes. The type of critic who sees patterns in everything loves to tell me that I’m in the pockets of PC Pro advertisers, and that we all toe the party line – most recently over systems such as the Raspberry Pi 400 or an

      6 min read

    • Article

      Digital Improvements

      Sep 15, 2020

      Digital Improvements
      1 min read

    • Article

      Keep Your Images Safe Online

      Oct 5, 2021

      Keep Your Images Safe Online
      2 min read

    • Article

      Letters

      Aug 18, 2020

      > Data Analysis> Case Construction> Microsoft Edge Hi folks—long-time reader and love the mag. I have a Maingear Shift PC that’s getting long in the tooth (seven-year-old Haswell processor, one panel doesn’t stay in). I’m looking into building a new

      6 min read

    • Article

      Learning to Love What I Don’t Know

      Nov 1, 2017

      LIKE MANY WHO HAVE made the leap into Startupland, I guessed from the outset that I had a lot to learn. I was right. Indeed, I jumped into the wormhole of blind spots and unknown unknowns. This has been especially true on matters technological. At Io

      2 min read

    • Article

      The Best Free PC Software

      Sep 2, 2019

      The Best Free PC Software
      12 min read

    • Article

      Access All Areas

      Feb 1, 2024

      Access All Areas
      6 min read

    • Article

      We’ve Got The Bots For You

      Jun 9, 2023

      The most famous large language model (LLM), ChatGPT can churn out answers to questions, write synopses for pasted text, or just chat when you’re feeling glum. A word of warning, mind: LLMs are effectively fancy autocomplete, and the free version of t

      2 min read

    • Article

      Letters

      Oct 12, 2021

      > Lockdown IOT Devices> Windows 10 Pricing> Focus Assist Hey Zak, I recently bought some smart light bulbs and, reluctantly, I have had to connect them to my router on a guest network. I have a Pi-hole that acts as a DHCP server, so I ran into a few

      7 min read

    • Article

      Stay Safe Online!

      Jan 9, 2024

      Stay Safe Online!
      19 min read

    • Article

      Mini meme WE'VE GOT THE BOTS FOR YOU

      Jul 31, 2023

      The most famous large language model (LLM), ChatGPT can churn out answers to questions, write synopses for pasted text, or just chat when you’re feeling glum. A word of warning, mind: LLMs are effectively fancy autocomplete, and the free version of t

      2 min read

    • Article

      Sync Or Swim Adobe Spark

      Apr 1, 2018

      I realise that I’ve gotten into a bit of a rhythm with these Sync or Swim columns: the introduction of each could easily be prefaced by ‘I don’t want to go off on a rant, but … ’, and they tend to involve me taking a few jabs at various educational t

      8 min read

    • Article

      Mike Griggs

      Jan 29, 2020

      Mike Griggs
      6 min read

    • Article

      Readers’ Tips

      Feb 16, 2022

      Handy hints and tips from your fellow readers Email us your tips: letters@computeractive.co.uk I was interested in your How To on using the Blink Mini security system (Issue 623, page 35) because I use it too – and it’s excellent. To save on the onli

      4 min read

    • Article

      Letters

      Dec 16, 2020

      Letters
      6 min read

    • Article

      Problems Solved

      Aug 31, 2022

      Problems Solved
      11 min read

    Related categories

    Reviews for Image Performance

    0 ratings

    0 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      Image Performance - Mat Marquis

      Foreword

      We work in a digital medium

      , but there’s a weight to our work. Over the years, the screens we design for have gotten considerably sharper. But as the quality of those screens has increased, so too have the images we’ve served to them. And, as you’ll see in the pages ahead, those images are one of the chief reasons our websites have ballooned in size. Our websites may be prettier, but they’re far, far slower.

      our responsive designs have long made fine use of flexible images—by slapping img { max-width: 100%; } into our stylesheets, we have images as flexible as the fluid grids in which they’re placed. But simply resizing an image with CSS won’t help users on high-resolution screens; and delivering a huge, crisp image won’t help users on punishingly constrained data plans. If we want to reach more devices, more people, with our responsive designs, img { max-width: 100%; } is a start—but it isn’t enough.

      Thankfully, the the Responsive Issues Community Group (RICG) was formed to address that dilemma. Lead in part by Mat Marquis, author of the little book you’re about to read, the RICG developed a responsive images standard—a standard that allows us to deliver the most appropriate images to our users, based on any number of criteria. In other words, our images can now be as responsive as our layouts.

      Now, that standard can appear intimidating at first, filled with obtuse-looking markup patterns. But if you’re searching for a guide, you couldn’t have picked a better one than Mat Marquis. Mat was responsible for shepherding this nebulous responsive images idea through the specification process, and he understands it better than most. In the pages ahead, Mat will use his indefatigable humor and wit to break down even the thorniest topic. Thanks to Mat’s words, you’ll be slinging responsive images in no time.

      I’m glad you’re about to read this funny, insightful, powerful little book. And I bet your users will be, too.

      —Ethan Marcotte

      Introduction

      That fact that you’re

      reading this tells me something about you. It tells me that you’re different from the way I once was.

      I’ve been doing this—making websites—for a little more than a decade now. I like to think I’ve grown up some during that time. I don’t mind saying I took some things for granted early on.

      I’ve been incredibly fortunate, that much I’ve always known—and I’d appreciate it if you’d knock on wood for me here, reader. I’ve received way more than my fair share of help from friends, family, and total strangers alike. I’ve had—and have—the benefit of immense privilege. I’ve always tried my damnedest not to take any of that for granted.

      What I took for granted were the mechanics of this work—at least at the start. If I made an element show up in the right place, on the right page, in the right browsers—no small feat, oftentimes—then my work was done. I’d never dig deeper than that surface level. I didn’t know what I didn’t know: that making a div show up in roughly the same place as a square in a .psd was just the tip of the web-development iceberg.

      Below the surface—that’s where the meaning is. To build a page that can be easily parsed by assistive technologies is to contribute to a more inclusive web; to render a page more performantly is to broaden the web’s reach. To think too shallowly about a project means nudging the larger web in the same direction: toward something meant not for all, but for some; toward something meant only for those who experience it the way we do.

      But I don’t think that’s who you are. Not now—not today, as you read this. You’re ready to dive headfirst into a book about a subject that’s easy to take for granted: putting images on the web.

      At the risk of spoilers: any ol’ image format in an img tag styled with max-width: 100% will get the job done. If all you were after was a passing grade, you wouldn’t need to read any further. It might not be fast, it might not be accessible—it might not even work in some browsing contexts, depending on a set of factors you’d never come to know. But the job would, technically, be done. "D is for diploma" was my constant refrain in high school.

      I can tell, though: scraping by isn’t enough for you. Maybe you’ve been at this long enough to gain a healthy respect for your element, long enough that you don’t take a single CSS property or markup pattern as a given. Maybe you’re just starting out, sharp-eyed and voracious, looking to learn all you can about the web’s inner workings. Maybe you’re somewhere in between, starting to wonder what details lie beneath the surface of your workplace and your medium, the web.

      Regardless of where you are in your understanding of the web, you know you want to make it work better. You want to play a part in building something faster, more reliable, and more inclusive.

      If you believe that

      Enjoying the preview?
      Page 1 of 1