It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
The internet's own Mat Marquis plucks this choice quote from the HTML Design Principals spec:
In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.
And then he applies the idea to putting images on websites in 2019.… Read article
Scott O'Hara digs into the <figure></figure> and <figcaption></figcaption> elements. Gotta love a good ol' HTML deep dive.
I use these on just about every blog post here on CSS-Tricks, and as I've suspected, I've basically been doing it wrong forever. My original thinking was that a figcaption was just as good as the alt attribute. I generally use it to describe the image.… Read article
Web developers and content editors alike often forget or ignore one of the most important parts of making a website accessible and SEO performant: image alt text. You know, that seemingly small image attribute that describes an image:
<img src="/cute/sloth/image.jpg" alt="A brown baby sloth staring straight into the camera with a tongue sticking out." >If you regularly publish content on the web, then you know it can be tedious trying to come up with descriptive … Read article
Yes, this is a React component, but regardless if you care about that part or not, the "ideal image component" part could be of interest. There is a lot to consider with how we put images on web pages these days. This deals with:
srcset)
I've been watching a lot of nature documentaries lately. I like how you can either pay super close attention to them, or use them as background TV. I was a massive fan of the original Blue Planet, so it's been cool watching the Blue Planet II episodes drop recently, as one example. A typical nature documentary will always have a little look how bad we're screwing up the environment twist, which is the perfect time and place for such … Read article
With CSS filter effects and blend modes, we can now leverage various techniques for styling images directly in the browser. However, creating aesthetic theming isn't all that filter effects are good for. You can use filters to indicate hover state, hide passwords, and now—for web performance.
While playing with profiling performance wins of using blend modes for duotone image effects (I'll write up an article on this soon), I discovered something even more exciting. A major image optimization win! … Read article
Most WordPress themes show user Gravatars in the comment threads. It's a way of showing an image with the user, as associated by the email address used. It's a nice touch, and almost an expected design pattern these days.
Every one of those gravatars is an individual HTTP request though, like any other image. A comment thread with 50 comments means 50 HTTP requests, and they aren't always particularly tiny files. Yeesh.
Let's lazy load them.… Read article
Let's say you want to find an <img /> on the page and find out how wide it is in JavaScript. Maybe you need to make some choices based on that width (or height, or both) You can definitely do that. The DOM will even give you a variety of dimensions to choose from depending on what you need. There is definitely a catch though.… Read article
Working on your website locally means having the files that make your website tick right there on your computer. It's common those files live in a version control repository. You work on them, and push them up to the repo when you are ready. Other people work too, and you pull their changes back down.
What might not be in that repo, are images files from the CMS. WordPress is a classic example of this. When you upload an image … Read article
We've all been there before: You're browsing a website that has a ton of huge images of delicious food, or maybe that new gadget you've been eyeballing. These images tug at your senses, and for content authors, they're essential in moving people to do things.
Except that these images are downright huge. Like really huge. On a doddering mobile connection, you can even see these images unfurl before you like a descending window shade. You're suddenly reminded of the bad … Read article