What's new in web images.Are they worth a thousand words?

[00:00:06] Nathan Wrigley: Welcome to the No Script web show about modern web design, where we look at what we can build today with minimal software and skills. Today we’re talking about web images. We’ll cover technological changes such as new optimized formats and CSS properties, and we’ll talk about the challenges of creating a fast and eco-friendly experience whilst also trying to make visually attractive designs for devices that range from wristwatches to eight K TV screens.

David, you’ve been looking at images recently. How’s it been going? Oh, it’s such a wonderful handover. Yeah,

[00:00:40] David Waumsley: so well, our chats before on user preferences and also before that on designing the show’s website has got me into recently looking at, dark and light images, and this is just like a whole new level of complexity onto.

for some time I’ll say that I feel like images, have been something quite difficult to deal with. They, yeah, they are something not designed in the web in the first place and they don’t fit in. And I’ve become more and more aware, but even though there’s some great stuff, which we’ll talk about when we bring up the show notes that help us to make the experience of images on the web much better.

I can’t help but feeling all the time that. We’re always one behind on what the demands are, particularly with the devices, as you mentioned, being so small and so large. And now with our concentration on speed, that we’re always behind on the challenge. But anyway, shall we bring up the

[00:01:37] Nathan Wrigley: show notes so we could just run through?

Yeah. Can I just say a couple of things just prior to that, but also we’re not just behind. it’s an impossible task really, if you think about it. To go from something. Literally the size of your wristwatch and to be optimized for that, to then something which could occupy goodness, like a 12 foot screen and still look good.

That is, that’s a real challenge. Yeah, and, I’m used to just putting the IMG, the image tag in and then sourcing it and picking a JPEG or something like that, but things have moved on. Yeah, there’s a whole load of things coming up, which will make all of this a little bit more likely. So I’m gonna put up the screen.

So if you’re listening to this, or you’re watching it, you can find this at our url, our website, and it’s no script show slash 11 because it’s episode 11. So no script show slash 11 if you want to follow on right over to you, David. We’ve

[00:02:34] David Waumsley: broken it up into little sections so we can just talk about some of the new CSS that’s come in that helps us with stuff.

So I think probably I’m stretching it out on the things that we’ve got on our show notes here, but we’ve got object fit, which is I think wonderful because it’s something that will allow, I. An image to resize to its container. And one of the coolest things I think about that is, with the OB object fit cover, because what that does is it keeps the dimensions of your image the same.

So for example, if you’ve got it in a container. And it’s wide on a desktop and say it’s a picture of you in the middle of a field or something surrounded both sides. So you are in the center of it. As you squeeze in, you can have the photo kind of crop itself. so it’s just you in the middle so you can use that one picture without having to bring in another picture for different kind of devices.

Yeah. So the subject matter will still look good. So I think that’s a pretty cool thing that we’ve got for dealing with responsive web. we’ve also, again. aspect ratio, which you used to have. Yeah, exactly. And we’ve needed it on the site because we’ve got those YouTube thumbnails for the videos, and in fact, the.

The thing that we’re serving them up through has the whole, the old hack on it, I’ve changed it to this new CSS where you needed to use calc or something on a border or margin bottom or something to make it keep its dimensions, which is 16, over, over nine, I think, on YouTube. So that’s great.

So we can keep our aspect ratio as. Things slim down responsibly, and I think that’s good. But there are a few other things that are come in which are quite new, which I don’t think it’s talked about much. there’s border image which allows you to put basically an image in your borders rather than just round off your borders and that, which is pretty good.

But there’s a great Smashing Magazine article which covers all the wonderful things you can do with it. So you can’t do it to, you can. One of the examples there, which I think is very useful is that you could use it to put a gradient over the old. Whole image without having to bring something else in on top of that, which I think’s quite nice.

yeah, so we got filter as well, which we were discussing yesterday, weren’t we? About filters. and this is, it’s something where we’ve got a various functions that we can apply to our. image. We’ve got blur, brightness, contrast drop, shadow hue, rotate, invert, gray scale, saturate sia and opacity. So lots of different ways that we can change our images, which has been quite interesting for the light and dark modes because you could, for example, if.

When you go to a dark mode, maybe the contrast of your images against the background is too sharp. So you could use something like a filter to just take that down a little bit. Across the board. and swap those out. But it’s quite an interesting one that there was a little caveat I discovered with that, is that if you’ve got lots of these, you can use ’em, the multiples of these things to create some really wonderful effects.

And there’s some generators that help you pick color in for those, but. I’ve noticed on Firefox that it doesn’t quite render in the same way that it does on Chrome. So

[00:05:49] Nathan Wrigley: yeah, we looked at the MDN resources, didn’t we? Yeah. And we discovered that they stack in the order like a cascade in CSS. They, if you put brightness first, that’s gonna be the one that gets done first.

yes. And if you put drop shadow second, and they, if there’s some sort of collision between those two. Then the one that is lower in the stack is gonna be the one that gets, rendered later. So there’s, you could probably have quite a lot of fun with that actually.

[00:06:17] David Waumsley: the, the, some of the generators are great at picking a color, but it assumes that you start with a black.

So if you say you wanted to use filter on your logos to do dark and light or, some other effect with that, you’d be best trying to emulate the color you wanted it to change to by starting with a black SVG, for example, or didn’t matter. Transparent image would work. And, that’s great. But then there’s becomes a bit of an issue if you are using that because this is just in the CSS.

So if it’s important to you that search engines pick up on the image that you have, it’s not gonna be the same as what your people on the website are gonna see. So I think there are, reasons to treat that with caution. I think you images, if it’s important, what is indexed is a true representation.

yeah, we’ve got clip path, which is replace clip, which just allows us to clip out certain images to shapes, which I think is pretty cool. We’ve got mast image, which, It’s hard to explain, but the best example I saw is actually linked there and it’s on WP Schools where it’s got a wonderful, where you are put in an image over the top of another image so it’s transparent.

So in this case it’s put in texts, which are cut through, and then you’ve got the image underneath that text. Lots of great effects you can do with that. And then we’ve got backdrop filter, which has got limited support at the moment, but I think it’s just mostly useful as you can put a backdrop to text that might be over an image.

So often we want to maybe put something which is with a bit of opacity or something so you can read the text over the image. So you can do that in a kind of much easier way with this when it’s fully supported.

[00:08:02] Nathan Wrigley: There’s a lot in there. If you actually think about it and in our discussions yesterday, I think the, two most intriguing ones or the most utilitarian, yes.

Just for everyday use are the first two object, fit and aspect ratio. Because with those two, you can put whatever you want, wherever you want and be satisfied that it’ll look just how you want it in whatever screen size is being used. So they’re the most useful, but it struck me how much of that work.

Used to be done by, a graphic designer, let’s say. Yeah. That, you’d go back to them and say, okay, I need an image, but it’s gotta have this text on it and it needs to have, a mask on it and whatever it might be. Now, a lot of that can be handled by a developer. With CSS. So it, it really does, not undermine, but it does shift the balance of what the graphic designer is gonna do as opposed to what the developer is gonna do.

And now the developer is armed with all these tools to go to the client and say, yeah, I can just do that in, CSS. Don’t worry, we’ll take care of it. It’ll all be in the right way and we’ll get a blur on it. That’s no problem. We don’t have to get another. Blurred version from Photoshop. Don’t worry about it.

And you know the way to change the shapes of them all. And I imagine you could come up with some really curious little shapes and overlap them and all of that kind of stuff. So it’s brilliant. There’s loads in there. Yeah, you’re right. I

[00:09:25] David Waumsley: think that the top two are the ones that solve a lot of the responsive issues we have to deal with.

And you’re the ones that are a bit of extra fluff on the top, aren’t they? The cherry on the cakes if we want to. Do some special things. So I, put on the notes here is maybe just worth mentioning, we talked about it last time, which was that there is this experimental. PJs, prefers reduced data media query.

So we have that ability to get rid of those people who want less data to only serve them the essential images and remove the non-essential ones. So I suppose it’s related to this.

[00:09:59] Nathan Wrigley: Can you give an example of that? Because when I was trying to imagine that in my head, I couldn’t come up with something where that would fit, but.

I,

[00:10:08] David Waumsley: yeah, I think so. we’ll talk about this I think later ’cause we’ve, okay. We’ve given this a subtitle of, our. the image is still worth a thousand words when it comes to the web, but, I think, there’s a lot of times where we’re deeply graphic. Now we like to use lots and lots of images and it’s easy to get those images with AI and all the stock images so we can make our sites beautiful, but often they don’t serve the user.

And if that user is specifically, or will be able to specifically request that they have less data because they pay for it, we can honor that by really only giving them the images where it. Actually they need that image to understand what’s going on here. Oh, okay. Yeah. So you get rid of all of the surface stuff.

obviously it’s up to interpretation, but I think I could see that as a way forward. I mean it’s It’s fair on people globally who do have to pay a lot more proportionally for their data, Okay. Or on the mobile. So I think it’s a good thing. and I also put a little note in here.

It’s just a reminder again. What I alluded to before, I think was the fact that this is still an add-on to the web, isn’t it? It’s still like an embed, like an A video in a way. Images are, yeah. Yeah, and we still have to, because it’s an inline element, which if you put large image in, you get horizontal scrolling.

We still, most of us have to put reset in our CSS before we start to make sure that it’s displaying block and that it’s got a, I use a max inline size of a hundred percent, so it doesn’t. We don’t have it. Scroll enfor, enforce the scroll. Yeah. Yeah. But it’s a, when you do that and think about it, ’cause it’s often there in a reset from the beginning or will be in a theme if you are using A-A-A-C-M-S, it reminds me again, is that, yeah, the web wasn’t designed for images, No, It was, it very much

[00:11:53] Nathan Wrigley: wasn’t. It really wasn’t. Yeah. Okay. All right. Shall we move on to the, the CSS revisited old CSS revisited?

[00:12:02] David Waumsley: I think this is maybe a debate for another time, but I’ll just mention it now. I just think I’ve recently having to think about images again. doing it more manually is the fact that I get back to earlier debates where I thought I probably solved them, such as, when does the image go?

I. As an image tag in your HTML, and then when is it a CSS background image? When is it? we have this distinction generally that if it’s meaningful content, it goes in your HTML. If it’s just decorative, it doesn’t need to be read as HTML and it purely is for decorative the stuff that you might lose if you were reducing data for somebody.

But I just think this, it’s never quite that simple when you start to look at things, particularly like the logo, which is that, is it decorative? Oh, or is it, yeah. Is it actually a h, TM L Should that logo be the image that you have in there that is indexed or is it the type, anyway, I think we’ll leave that as a debate.

We might need to get dive into those appropriate uses of images. So another time, ’cause we could go off on a tangent here, but yeah, there was just that, and I think also a new awareness for me, revisiting CSS is alt tags. Yep. I dunno if it’s the same for you, but. Often when I was aware that I should put AL tags in, there was a lot more influenced by people who were thinking about SEO and they’re saying, you need to put them in there to boost your SEO, which of course is really against what it’s there for.

It’s But to help screen accessibility. Yeah, exactly. and that’s interesting because, you’ve talked to people a lot about this, so I think you are quite knowledgeable about this, but, there’s often, I had to learn that it’s okay to use a blank alt tag if it doesn’t help the.

Screen reader, something I never really knew before. I thought, oh, I must fill ’em all else. I’m in trouble. But yeah, actually no, you decide, don’t you? And you really have to decide what you are explaining to people,

[00:13:58] Nathan Wrigley: if the image is, oh, I don’t know, just like a red dot and it’s a, some sort of background effect or something, does that deserve an alt tag?

[00:14:06] David Waumsley: no. Probably not. If if it’s that, it is interesting. I was putting an alt tag on something, which was the toggle switch for light and dock mode, and you suddenly realize, I, I started, I just wrote out what I thought needed, explaining what that. Toggle was, it was a sun icon or something.

But actually what the screen, if I stopped for a moment and thought about it, what the screen reader needed to know is that this is a representation of a sun. What it does is allows you, clearly to go right. I needed to tell ’em what the thing was, what the action is. what the, yeah.

Okay. Got it. And write it in proper text with a full stop at the end of it. that kind of stuff, So I think this is all. To me, it feels like this is all new stuff. We revisit a lot of the things on images, so

[00:14:50] Nathan Wrigley: yeah, I, guess the, legacy for you and of, the continuing use for me of WordPress, a CMS, it made, doing alt tags trivially easy and you would, have a bunch of fields next to the image, a description, the alt tag, a caption, and various other things.

Depending on what plugin you’d installed, you might get a bunch of other fields as well. And it was just too easy to come up with one and just copy and paste it into all the fields. Not really thinking about what the purpose was, but you’re right, if the image literally is, oh, I don’t know.

Maybe it’s just some sort of wave to define that. This is one section and now we’re moving into another section on the website. No screen reader needs to be interrupted by that. You don’t need to be told, okay, here’s, a, an image of a wave showing that we’re moving onto another part of the website.

That’s just fluff. You, want to just skip over that? I guess I.

[00:15:43] David Waumsley: Yeah, and that’s it. So that it’s, I’d definitely be rethinking that again, and its images and what you need to read out about your images to people. Should we skip on to, new HTML? There’s not much in that, but we do have things for performance, which is, loading equals lazy or.

Eager. Yep. Which is wonderful because you need needed JavaScript if you wanted to delay the loading of your images. obviously we don’t want to do that whether in the view port in the beginning because we’re delaying and we. Creating, load speeds, which are increased because you’re waiting for that main image to come in.

But

[00:16:23] Nathan Wrigley: that’s very useful. It’s interesting that one as well though, because there are certain situations where I would imagine the ego would be quite useful. especially if you are thinking about, core web vitals and things like content layout shift. If you’ve got an image, which, oh, I don’t know.

In some way might push content down because it’s part of the header or something, I don’t know. and that image needs to be there from the get go. Maybe there is a situation where you would put that as eager, but everything else would be lazy because everything else is, not gonna cause a problem with content layout shift.

I don’t know.

[00:17:05] David Waumsley: I, think, yeah, eager iss a tricky one. we can understand lazy and anything that’s not in the viewport, you put as lazy so it doesn’t have to load. eager as I understand it, I think it’s there for that situation where you may have multiple images that are in your viewport and one of them’s more important than the other.

And you might make that eager ’cause you want that one to load. Before the other ones load in there.

[00:17:26] Nathan Wrigley: So a terrible example then would be some sort of slider where you want the, let’s say that the slider is the first thing on the website. Oh goodness, crikey. Don’t do this. but you’d want the, you’d want the first image to be eager, and then you have all the other images in the slider to be lazy because.

Yes, you want the first one to happen immediately so that you’ve got that context when first get eyeballs on the page, but the rest want to be eager. I am not, by the way, advocating the use of sliders, but that’s maybe a, an example where it might work.

[00:17:57] David Waumsley: No, and I think that’s it. And, but then we have coming a little bit later is priority hints, fetch priority, high and low, where we can also help with that initial load, by saying, I, I want you to load these things first.

I think, ’cause I got a bit confused with that one really. I was thinking, ego isn’t not the same as, priority fetch high, but, no, I think it’s load when you’re lazy loading and eagle loading is you are choosing between multiple images and I think with the fetch priority, you’re saying from the beginning in your document when they’re reading it, which things do you want us to get first,

[00:18:36] Nathan Wrigley: But is it just a binary toggle? Is it just high or low? And if that’s the case Yeah, there’s your two options. Yeah. So let’s say that, oh, I don’t know, you had a gallery of images. Maybe you would have them all as lazy because they’re below the fold, they’re not in the view port, if you like, at the beginning.

Yeah. And then you, but you want the first row of that gallery to be fetch priority high so that, that, happens first when that scroll into view and then the other ones would be low. Yeah. I’m struggling to see a scenario where you mix and match those two together. Actually.

[00:19:07] David Waumsley: partly I’ve created the problem because fetch priority isn’t something that’s just related to images where the load is, ah.

and, so you may want to load certain JavaScript, which helps. Got it. Yeah, of course. so it’s included, but you can, basically. Fetch priority for any of your elements or files. so yeah. And, yeah, just quickly we’ll just go over some of the old HTML revisited. this is, I guess it’s me talking out loud as somebody who’s let the CMS do it all for me and I to think about it.

So one of the things that I think I’ve forgot about. existed, which is the picture tag. Yeah. and it’s really cool ’cause I, I’m the first project I did where I wasn’t relying on the CMS and did it by hand, I used the art direction that comes with that. Basically the idea that depending on the media queries you associate with the picture tag, you can.

Alter the image. for example, what it does, it allows you to have multiple image sources and choose depending on maybe dark light preference or on the size of your device, which image it’s gonna serve. And that’s, that image can be an entirely different image. Yeah. So you could have a horizontal one and you can have a sort of vertical image if you want.

For, depending on your different devices. So I put that to really good use. ’cause something that would’ve been a whole complex layout with lots of different images I put into one image and just showed a different version once you reached that. Oh,

[00:20:32] Nathan Wrigley: I see. Oh, I see. So on a, let’s say for example, on a desktop, you had a bunch of images and they made up some sort of, I don’t know, masonry layout or something like that, and then you just got rid of that altogether.

And just put the one image which was static and fixed and I know exactly where everything is. Oh, that is clever. I like that. It was a,

[00:20:51] David Waumsley: it was a wonderful cheat when I didn’t have much time on a project that I needed to do right. Where suddenly the last moment we got in was this series of rooms, and one was a big room and had a couple of other rooms.

So there was a big image on desktop to the left, and then two small images of the other rooms to the right. And then of course, all I needed to do was create a, a. An image of it in a slightly different of the three things together. Yeah. Down there and just swap them over with this picture for sort of art direction.

And it saved me a ’cause that’s a big job to do with css. Very lazy of me. it just allows you to do. Those quick jobs as well, so I like that. Nice. Yeah. yeah, so it’s often forgotten that and source set. of course that’s, something, which in a way was a joy with CMSs that you can get them to crop up a whole bunch of images and serve them appropriate to the view port size.

That’s wonderful until I really got into the speed stuff later and thought, it’s always a compromise. It can’t be perfect. It has to crop a certain set of numbers based on what it thinks that image is gonna take up in your view port, and it has to apply that to all images. You lose the control.

So when you do think, oh, that’s great, I can control it myself. You suddenly realize that cropping all these images and. coding up all these different source sets where you end up with another dilemma over. Are you just doing it on the size of the images, but also are you doing it on the density of the resolution as well?

Are you doing times two for retina screens as well? you can really end up with a big page full of code when you start to get into this. So I do think this is why I feel we’re always catching up. And then the latest thing is we’ve moved to. container queries where well, suddenly responsive images don’t work for that.

if we’re setting our size based on the container and not the view port, suddenly our responsive images have gone, if that’s the route we go down. So it does feel to me like there’s. It’s never been perfect has it? Responsive images? No. And difficult

[00:22:52] Nathan Wrigley: to get right. I think, images, just what we’re learning from this episode is images are just really frustrating in every respect.

they’re not easy and yeah. May maybe this’ll all help. Anyway. Sorry I interrupt you. You’re on figure,

[00:23:08] David Waumsley: Oh yeah. I just wanted to mention figure, ’cause this again is something that I’ve. Almost forgotten. it’s not something that I’d generally be, using, but there are some kind of older school people and they may be right, it’s the same.

if this, you have a figure and you allowed them to put a figure caption, and this is some way of explaining to everybody what this image is about. shouldn’t that be an all. All HDML images. If you say that they need to be explained and you want to explain them to everybody, shouldn’t they all be in a figure?

It’s just a quest, a random question to put out there, but it’s, I think it’s just one of many. There was a great article by Stephanie Eckles who was brave enough ’cause she’s such a good technician on kind of new stuff to, to list all of the things where we’ve never come to an agreement on HT ML about how we do it.

if we read them in the isolation, you should use this for that and figures one of those examples. you question it enough and you go, shouldn’t they all be in a figure? Or they’re not important and they should be a background image. Yeah, that’s, yeah,

[00:24:10] Nathan Wrigley: that is interesting. Okay.

Yeah, I confess I didn’t get a chance to read Stephanie’s article, so that’s my, no, that’s my constant study for the weekend, David. Oh.

[00:24:19] David Waumsley: It’s just a list of all these little things. it goes against what we’re trying to do on this. Podcast ’cause we’re celebrating the idea that CSS makes it so much easier and we’re digging into all of the gripes and the niggles that haven’t been sorted.

But she, she comes up with a whole bunch of them and only somebody of her standing I think could do that. Who’s such a strong technical writer just to say, yeah, we still haven’t decided, we still get, we’re still not even sure when we should use a button and things like that, So anyway, is quite a good read.

Yeah, so that’s it. Should we just quickly talk about the new formats? ’cause we can’t mention images without talking about things like WebP and a can we, I

[00:24:56] Nathan Wrigley: think these are really exciting just from a technological point of view. It fascinates me that you can compress the same image and get more or less the same quality out, but it’s with a different.

Algorithm for want of a better word, that’s crunching that image. and web PA are the two that seem to be coming down the pike according to this web. P is now at 98%, so no reason. Yeah, not to use it, except in my case I have a reason not to use it and that is that I use a third party service to consume my, my RSS feed, which is a podcast, and then it turns that into a YouTube video, and that platform won’t support.

Web peel only support, PNG or jpeg. So I’m being stifled, stymied by a third party solution, which I rely on to save me hours and hours of work each week. But that’s no excuse really. When the formats are saving so much time and time to load in the browser, they’re better for the environment.

They look exactly the same and the support 98% for Web P you are saying, and AV 93%. Yes. So I guess at the moment you’re gonna plump for web P.

[00:26:13] David Waumsley: I am, and I mean it was interesting ’cause again, when I had this choice and it, started hand building the stuff, I started to do some things with the images.

Again, this is where confusion. So I thought, oh, Avis would be smaller now. So if I browser supports that, I’ll use the picture tag to support. For those browsers who understand it. If not, there’s a fallback to a jpeg. If not, there’s Web P and I’ve got three formats in the one image and I, and suddenly I think now, and this is experimental, I dunno if anybody else has got anything to say about this.

’cause I’d love it may not work. But what I’ve decided now is I’ll do is that I think Web P is pretty much good for all the images I want, so I’ll do it with those because I’m pretty happy with the. Support that they’ve got. And what then I can do is if I want to move to a VI, ’cause that’s better and the, and, it works out reasonably the same, I can bulk shift them, can’t I?

And do a find and replace where it would’ve been such a job if I’d had to try and find and replace all these combination of, a VI JPEG and and web

[00:27:19] Nathan Wrigley: P as well. So there, that’s my. It does feel like you’re make making work for yourself, aren’t you? With all the fallbacks and everything and at 98%, that 2% that’s missing that.

Yeah. I’m guessing that’s some really curious. Browser that almost nobody, 2% are actually using it. I guess at some point you’ve gotta jump ship. Maybe it’ll get to a hundred percent. Or maybe those browsers are, things that are stuck in non-development mode that we can’t do anything about.

But the web has to move forward and, yeah, I’ve talked to a few people from, Google. And various other places, and they’re very bullish about this. They’re absolutely certain that, web, PAVI, whatever it may be, is the future. So I think at some point, unless you’re bound to a SaaS solution like I’m to consume your R rs s feed, I think the time to jump was months and months ago, not,

[00:28:12] David Waumsley: not in the future.

Yeah, exactly. And I think it’s interesting because Web P is Google’s format, but they’ve been very keen to promote iv, haven’t they? And yeah, put funding into that. So yeah. and the other thing on it doesn’t belong on the new formats, ’cause it goes back to 1999, is the SSVG. But I do think, the version two of that is.

Since, 2018, and you know what I mean because of the difficulty of having to serve the quality to this range of devices and all of the tricks you have to go through, I’m really come to a view that I’ll only use an image if an image is really needed and if I can. If I can use an SVGI will because it’s part of the standard code.

You can control it, you can animate it, you can do some really wonderful effects with its own filters that it has on it now. So I just think it’s the most future proof, isn’t it? It’s it’s always gonna be there. It’s certainly going to give you the quality. There’s not something that’s going to usurp it in terms of vector, I don’t think for that.

And, no, I’ve heard, I’ve

[00:29:19] Nathan Wrigley: heard of no development to trying to supersede. That SVG format, I, maybe there is, maybe there’s somebody who’s trying to, increase the, I don’t know, or sorry, decrease the amount of data that travels over the wire when you have to use an SVG. But

[00:29:34] David Waumsley: yeah, it’s amazingly cool.

Yeah, and it comes under the remit of the W three C. It’s one of their languages, isn’t it, to support. So I do I’m not very knowledgeable on this and I, I need to increase that. There are lots of cool stuff, which,

[00:29:49] Nathan Wrigley: but I guess, SVG has its place, if it’s an, if it’s an image of a.

Of a field full of flowers with sheep roaming around in it. Exactly. That’s not an SVG really is it? Imagine the, imagine what that would look like, the actual SVG file. If you were to open it up, it’d be fairly insane. Whereas a web p, is gonna be much more suitable. But the, so it’s more like logos.

It’s more where there’s, lines within the image, things that it can follow. So letters and circles and shapes. Exactly. Bold colors and things like that, but yeah.

[00:30:22] David Waumsley: Okay. Yeah. So if we could do it with a vector, then I’m very keen to do that, I think. Yeah. and it, in fact, you’ve deployed

[00:30:28] Nathan Wrigley: that on our site, I think, haven’t you

[00:30:30] David Waumsley: turned at the bottom?

I turned in,

[00:30:31] Nathan Wrigley: yeah. Oh. Turned us into very Very intriguing, shall we say.

[00:30:38] David Waumsley: but Nice.

[00:30:39] Nathan Wrigley: Yeah. Really nice.

[00:30:40] David Waumsley: it doesn’t mean we could change the color at any point and the sizes, but yeah, it could be done better. But yeah, there was one thing on that, there was just last night, I got an email through which linked to something, which I thought was fascinating ’cause we, we hear often and there was a concern in WordPress about, the difficulty of SVGs and how they might contain.

script, like malicious data really. Exactly. It’s a file format, isn’t it? Yeah. I heard something. There’s, but there was a bug in, web P, which had gone un spotted for ages, where effectively you could hack a site by just putting a one pixel. Web p it’s something that needed to be sorted out in all the kind of optimizers for Web P, but yes, it did allow people to hack through a web P format.

[00:31:29] Nathan Wrigley: Gosh, I’ve heard nothing of that. That actually really surprises me. the hackers are ingenious. Yeah,

[00:31:37] David Waumsley: yeah,

No, there’s, there was just a bug in that it’s been fixed in most places, but there are optimizers where that won’t have been fixed. And there was a little, yeah, there was a little YouTube video.

I wish I could remember it if I’ll add the link in if I do remember to this. Okay. yeah, I think we put down here that we’ll just ask that question again really, because it’s about, I’ve phrased it as is a bitmap picture worth a thousand words, and we, you had an agency called Picture and Word, because these are the two key things.

Yeah. pictures and I’m, now getting to question how much we use pictures. Are we, overusing them? Are we, because the. The browser processing time is costly. The amount of time it takes to make them work for all browsers is great. The environmental cost is high on pictures. I just wonder.

Whether, and because everybody can get free and cheap images that look beautiful, are we getting to the point where they’re not really serving us too well? They’re becoming, we want less images.

[00:32:45] Nathan Wrigley: I guess it really depends on the kind of site, if it’s a news based site Oh yeah.

And you are trying to illustrate what’s going on in a certain part of the world, then that image really, it drives that message home. if there’s some sort of, Public crisis somewhere and you trying to encapsulate it in words, then it does work. And, I think it, if you are able to see that is very, it’s very powerful.

You can draw somebody into the content, but, if it’s just a blog post about something that you, were doing, so this, for example, yeah, this page that we’re looking at now, it, doesn’t deserve an image. There’s just no. Scenario in which an image is worthy there because all that you are doing is creating an image to evoke, in this case, what’s an image?

Yeah. And you’d be scrambling around to find an image. So I think you’re right. I think there’s definitely a place where they don’t belong. But equally, I think given human proclivities to be engaged by things that we see. I think there are scenarios where it’s worth using, but you’ve gotta, you’ve gotta choose.

Funnily enough, before we hit record, we were looking at a blog. It’s not really a blog, it’s a news site, and they had totally overused images. Like they’d put this massive image on their news article to the point where the bit that you actually want to get to was way down. You had to scroll before any texts came into the viewport.

that’s a complete. Ridiculous use of an image. They could have had that a 10th of the size and still got the same, information visually across, but maybe that’s just poor theme development. I dunno. So I think they have a place, but certainly not everywhere.

[00:34:24] David Waumsley: Yeah. And I think that’s right. obviously photos are great.

I struggle to get a good image Yeah. Of a client where probably the visitor, particularly a lot of the psychotherapists, the only thing that a visitor might want as an image from their site is the picture of the person who might help them with their problems. And and I think in those case, sometimes you struggle to get the one key image that you need where.

As designers, we like to make things look pretty and we’ve got all these wonderful rays of. Invoking images, but there is a sense where I feel over the time that’s become a mental overload. Like we almost don’t trust things if they’re too beautiful. I,

[00:35:07] Nathan Wrigley: I, I also have this intuition that stock photography sometimes is just jarringly unrelated to what you’re looking at.

So using a stock photograph, oh, I don’t know. You’re talking about some sort of. Way of improving efficiency and you’ve got the stock photo of people leaning over a monitor, all like scratching their chins, yes, we’re gonna solve this problem with our computer. that kind of stuff. It doesn’t lend anything, does it?

no. And in that case, you’d be better off not having anything at all. It’s better for the environment, it’s better for your, speed, you improve your search rankings and so on. Yeah. But, but there’s definitely, so photography. That’s related to the article, feels like a good, nice, sweet spot for when it’s essential.

if your article is a news source and you’ve got a photograph of that thing, then yes, that seems like a good place to use it. But just stock photography that is tangentially related to what you’re talking about. Maybe not. Yes. Listen to me giving my opinions like

[00:36:04] David Waumsley: No, But I think you’re right on that.

I just thought it was an interesting thing. I was coming at it from the fact that I’m thinking, Less than needed images need to perhaps go for the load and for the environment and for the fact that I think there’s less trust. In fact, obviously if I see something where I see there’s a lot of IA generated images going with it, my trust has gone down straight away on the site.

Oh,

[00:36:25] Nathan Wrigley: that’s interesting. Yeah. Yeah. We’ve already got

[00:36:27] David Waumsley: dissatisfied enough with AI images that yeah,

[00:36:30] Nathan Wrigley: yeah. Okay.

[00:36:31] David Waumsley: in some ways, in the same way that we would about cheesy stock images that we’ve seen, Yeah. Yeah. With health professionals particularly, If it’s so stock, you just, the trust has gone for them to be genuine trust, trustworthy people in the medical profession.

yeah, no, I think, I just think it’s but I am questioning it now and it, would you say there’s no need for an image on that? But when we have used an image, it’s quite interesting that it’s pretty much been, I, even though I’ve used a, web P ’cause it’s somebody else’s diagram. It’s a diagram that should have been a vector.

yes. So far on, on this site, there’s been no reason to use a, an image yet as such where a vector would tell the story a much better. An SVG would work. Yeah.

[00:37:19] Nathan Wrigley: Yeah. Okay. So that I think, wraps it up. Does it, are we done for episode 11?

[00:37:24] David Waumsley: I think we are, I think there’s a lot of subtopics that come into this, which I’m sure we’ll be back to.

Images again, such a big thing, isn’t it, that we have to get right and so difficult that

[00:37:33] Nathan Wrigley: Yeah, certainly. Certainly a big part of the web, but they’re not going away, David, that’s for sure. no, but lots and lots of food for thought there. Loads and loads of different things that are coming in c CSS that you can use to make your websites interesting, different from the, from your rivals.

no script show slash 11. If you want to find the show notes and all of the links, I guess that’s it. It is. Alright, I like that. Yeah. We’ll see you on episode 12. Take it easy. Okay.

[00:38:02] David Waumsley: Yeah.

[00:38:03] Nathan Wrigley: Bye bye.