Nathan Wrigley: [00:00:00] Welcome to the WP Builds podcast, bringing you the latest news from the WordPress community. Welcome your host, David Waumsley, and Nathan Wrigley.
Hello there, and welcome to the WP Builds podcast. This is episode number 226 entitled eyes for images. It was published on Thursday, the 22nd of April, 2021. My name's Nathan Wrigley, and a couple of bits of housekeeping just before we begin. If you are into page builders or WordPress in general. We have an event for you.
It's a summit it's from may the 10th to the 14th. So that's five days. You can find it at page builder, summit.com. And I guess the giveaway is in the name there. It's all about WordPress page builders. So whether you're using the block editor, AKA Gutenberg or Beaver builder element, or Devi oxygen, whatever it may be, we've got 30 speakers lined up over five days, teaching you how to use your page builder in the most efficient manner.
So it really is lining up to be a very good event. I'd love for you to go and subscribe. Get yourself involved. Page builder, sonic.com. There's an awful lot going on that week. Perhaps you might like to set some time aside in your calendar so that you've got plenty of time available. One more time. Page builder Summit.com.
Please go and sign up. Also, I'd like to mention the WP Builds.com deals page, head over to WP Builds.com deals. And over there, you're going to find a whole bunch of coupon codes for WordPress deals. They never expire. They're there 365 days of the year. And if you're in the market for something WordPress you this week, maybe go and check that out.
And the last link I want to mention is WP build stock on forward slash advertise. If the following two companies, you would like to get your product in front of a WordPress specific audience. You can do that at that URL.
The WP Builds podcast was brought to you today by cloud ways. Cloudways is a managed cloud hosting platform that ensures simplicity, performance and security. It offers cloud service from five different cloud providers that you can manage through its intuitive platform. Some of the features include 24 seven support free migrations and dedicated firewalls. Go check it out at cloudways.Com.
And by A B split test. Do you want to set up your AB split tests in record time? Like in a couple of minutes, use your existing pages and tests, anything against anything else? Buttons, images, headers, rows, anything. And the best part is that it works with element or B you're a builder and the WordPress block editor. Go check it out and get a free [email protected].
Okay. So on the show today, I is for images. We're going through the letters of the alphabet, a through to Zed, and we are talking about each letter one week at a time. And today it's all about images. Goodness, blow me. There was absolutely tons to talk about here. When I got to thinking about it, there really was an awful lot that I was doing every time I uploaded an image.
So for example, what kind of quality of images do I use? Do I want to have something that's compressed? So it increases speed and optimization and perhaps increases my S E O capabilities. What kind of images do we upload? Are we into pixels or gifts or the new SVGs or web peas? All of these kinds of things.
What kind of programs do you use to locate your images? Do you go online and look for royalty free images? And if so, where and how do you edit them? Do you fiddle with thumbnails to make things exactly as you want them on your website, do you clear out old stale images that are no longer in use? Like I say, lots to talk about.
I hope you enjoy the podcast. Hello.
David Waumsley: [00:03:57] It's another eight to Zed of WordPress, where we attempt to cover all the major aspects of building and maintaining sites with WordPress today. It's I for images, but we could also include icons as well, too. Clever. So one
Nathan Wrigley: [00:04:11] Nathan, that's very clever. You snuck that one in that's good.
David Waumsley: [00:04:15] Yeah. So Nathan. Really your business is called picture words. So really this is half of the web we're talking about in this one.
Nathan Wrigley: [00:04:23] Do you know? It really wasn't it, back in the day, it literally was half of the web. If it wasn't words, it was pictures, but the internet since I started my company picture and word has become so much more, notably video, and a whole bunch of other things but it still represents a huge bit of what we do, putting images online.
They could be images from photographs, but they could also be, graphics that we've created in applications like Photoshop and so on. And they make the web look nice, without all of the images that we've got online, it would be a terribly boring text-based experience with the occasional, probably video of a cat thrown in for good measure.
David Waumsley: [00:05:00] Yeah. It's partly because we're so rubbish that topography, I think. Yeah. Yeah. I really admire those sites. Don't you? Where they are all type and they look beautiful. I just don't know how
Nathan Wrigley: [00:05:12] people do that. Yeah. I think it's a real skill to be able to craft words that people want to do without spoiling it with images spoiling in inverted commerce, because if you're drawn in by the text itself, you must be a prodigious writer, which is why I use images all the time.
David Waumsley: [00:05:29] Me too. Okay. Should we start? We talked to awhile before this and really we just pitched didn't we about the WordPress media library.
Nathan Wrigley: [00:05:37] Yes. There's an awful lot to say about that. Maybe that should just be our starting point is obviously we're a WordPress podcast and the way that we interact with any images is the media library.
When I came to WordPress, I came from Drupal as I'm sure many of you have heard before and the media library we'll get onto other aspects of how it handles media later, but the media library at that time was. Really great. It was so superior to what we had over on Drupal the way it looked, the way it behaved the options available, that the sort of minimal set of options, if you like that were available were really great.
I guess the problem that I feel now is that I don't, I haven't really noticed any major updates to the major library in the time that I've been using WordPress, perhaps it's perhaps the underlying basis of it has changed massively, but on the surface, it's still the same, the default, a little square icons, which you can toggle over to be more of a list view and so on, but you've got these two options.
And just to know, it just doesn't really demonstrate what I'm actually going to see on the front end. Just see a little square representation of things, which I guess is good enough, but the internet has moved on and images are a massive part of it. And I feel there's work to be done. Yeah,
David Waumsley: [00:06:50] exactly. I think most people who interact now can with lots of different services that are out there free, like CAMBA, which allows you to manipulate your images.
It does seem poor against them, but I think there was an update that wasn't that long ago, but it washed over me. I'm pretty sure all that kind of T to be able to rotate left. Flip horizontally and vertically, ethically. I thought that was fairly new stuff, but I just thought, why is it there?
Nathan Wrigley: [00:07:15] It's an interesting, you should say that because I am actually quite a heavy user of those editing options. I try to on the most part, if I'm creating images, they will be created in third party services, either apps on the Mac or some kind of online thing, like you say, stencil or canvasser, or I know that we're both users of one called Pix teller, I'll create the images that I'm going to upload, but there's quite a few scenarios where clients might need images, uploading.
And also on WP Builds. I have people uploading images for things like the deals page, and just because of the nature of the way I've got it set up, they're all constrained to the same dimensions and the mechanism that I have to upload them. Doesn't disallow. The uploading of images, should they not meet those constraints?
The constraint is it less than two megabytes or something like that? Not does it obey these ratio, aspect, ratio, settings, and so on. So the images got uploaded and I could, if I wanted go into functions dot PHP and write a little bin in there too, to crop it in the way that I want it, but it's such an infrequent little thing, but occasionally somebody will upload something it's just a tiny bit wrong, so I'll go and crop it.
And so I use those tools a bit and I quite like them. They're little bit counter-intuitive in that you have to. I was talking to you about this earlier. Do you want to crop something? You have to actually go to the image, click edit, then you have to drag the crop that you want to make and then press the crop button.
Whereas for the so long, I would press the crop button first because it felt like I was going to invoke the crop tool. So as an example, in Photoshop or something like that, you couldn't crop anything unless you'd selected the tool first. Whereas in WordPress, it's different. You do the thing that you want to do, then click the tool.
Rotating flip slightly different because it's not, you're not really doing anything that you need to interact with, but I do make use of it. It's fairly minor. But it works. And I think for most people, it's probably enough. I guess if you're a client coming to WordPress, you might have an expectation that it could do more.
So for example I would imagine as a client coming to WordPress, you think why can't I write on the image? Why can't I make a mean yeah. Inside the editor, where's the option to add text? It doesn't exist. Sorry.
David Waumsley: [00:09:29] And maybe it shouldn't. It's just some of the, like the cropping that you do. I wouldn't want to use that.
Cause I've got, it took me a long time to get there, but I found a nice little script that will. Automatically add in a description, it will automate my title based on the file name that I'm loading and, particularly old text. I want that to be put in something to be put in because clients are doing stuff.
If I go in use your crop tool, there, it renames my attachment. My image gets a new name and it gets a whole run, a random bunch of numbers and letters at the end of it. So suddenly my SEO has been thrown out by cropping in
Nathan Wrigley: [00:10:09] WordPress. We experimented that just with that just a moment ago, where you went in, changed an image that had a sensible title and so on, and all of your own tags and everything was set, and then you amended it, cropped it or something.
And then all of a sudden it's changed, which I guess there's a good reason for that because it needs its own kind of URL, but equally you would expect it to well, especially where things like alt tags are concerned. Did it change the alt tag or was it just the file name?
David Waumsley: [00:10:35] The one I did it on, didn't have my little script running on it, so I don't know.
I should do. Yeah, I think it should do in theory because it updates it. And I actually think that's an odd thing. It's an easy script just to put in to your theme and have that automatically generate. And it's good for clients as long as they get the correct file name, tied these things up because they're not likely to put old tags in.
And so this helps in some to some degree, but I wonder why there isn't an option like that at all. Yeah.
Nathan Wrigley: [00:11:08] So you've got a little bit, I think our link to it in the show notes, but you've got a little script, which essentially, if you've got an image and it's called, I don't know, image of a captain on a cushion, then when you upload it, the title of that image will obviously be that, but then it will override what the alt as well as the description as well.
David Waumsley: [00:11:28] Yeah, exactly. All the same things in, so it'll work out as well as, so what I would tell a client to do, it's not my script, but what I tell clients to do is that they could just separate the words in that file name for their image, with a dash, and it will strip out the dash and put a space in the title and then put the same in the alt tag description as well.
Or you could even put it into the caption it's up to you, which you can fill all of them. Up if you want with the same thing, which, might be useful. If you want, if you're using a lot of captions as well, it's just puts your title in
Nathan Wrigley: [00:12:01] there as well. That's really sensible. And I agree.
Why wouldn't that be a toggle in the media library, upon upload, shall we give your. Image some of these bits of metadata based upon the title, I guess the description one is supposed to be done manually, isn't it? Because you are literally supposed to be done. So the example I used a picture of a cat on a cushion is actually a great description, but if it was done for, I don't know, SEO purposes or something like that, where you trying to cram it with keywords or something, then less, so it's got a particular use, but yeah, that's great.
I will, I link to that quite a nice little script. I confess I, I do all of the editing. If I do edit anything in WordPress, which as I mentioned is not that often, then I will, I'll do it in the opposite order. So I'll upload the image editor and then I'll write the alt tags and the description. So it, I will override any override that WordPress has done by doing the crop.
So it doesn't really affect me in that way, but I guess it's just a question of learning that process and going through it. But I do still feel that it's got a long way to go. You look at the rivals out there. There's a lot that could be better in WordPress, but it's not, how many people would need the option to add text on an image?
I don't know. Maybe hardly anybody. So it's maybe not WordPress is in WordPress's wheelhouse to put that stuff in. Yeah.
David Waumsley: [00:13:25] There is something that we talked about that I've just updated myself a few minutes ago on it took me years, probably 10 years of using WordPress before I realized that there was actually built in compression.
It reduces the quality of an image previously by 10%. And I didn't know about this, that this was happening, but since version 4.5 and I've only discovered this minutes ago, that's now actually 18%. The quality is reduced on your images in WordPress. And I just think nobody knows these changes are happening or that it's doing that.
Nathan Wrigley: [00:13:58] So this is akin to the services like smash and What's the other one called the one with the little robot icon, short pitch. So it's akin to that. It's not reducing the dimensions of the image, which we'll get onto in a minute. It's literally reducing the file size, but keeping the dimensions of the same by 18%,
David Waumsley: [00:14:18] correct?
Yes, that's it. And I suspect this is why we've talked about this before, why it is to have something like, I want to go see this right in magic. Is that the name for it?
Nathan Wrigley: [00:14:29] Yeah, that sounds right. Yeah.
David Waumsley: [00:14:30] Yeah. The kind of service on your server. So it can, I think it needs that to be able to do this con this type of compression, but yeah, it's an interesting thing that these things would change and you just wouldn't know about, obviously I missed it for long time of using WordPress and then I missed it again.
It's been
Nathan Wrigley: [00:14:48] changed. I wonder why then if it can do 18%, why can't it do more. Why is it not possible to say actually I'd rather that you did 40%? Yeah. I wonder why we don't have these options. And obviously there are paid for services. Like we mentioned, WPS motioned, a short pixel in Imagify and then there's a whole bunch of others, which we won't go into.
But but they're a paid for service. And if WordPress is doing this already to the tune of 18%, why not have a toggle where actually go Nazi, gimme 40%. I'm happy with that. Yeah.
David Waumsley: [00:15:24] Yeah. But I think it's, it's not intelligent, like other, these other services that do this and I don't know how it works.
Most of the services we talk about do it on their own servers, don't they? I really don't know, but I just find it interesting that things like this change and that WordPress makes those decisions on our behalf. You would think it would not do any of that at all. And leave it up to the user. Yeah.
So it's quite a surprise one. It certainly was when I first heard about it, it made a lot
Nathan Wrigley: [00:15:54] of sense. Yeah. More recently, I can't remember what the version was, but it was a recent version within the last six to eight months or so. WordPress has now taken upon itself the ability to crop the dimensions of a very large image down to a set of defaults.
And I can't remember what they are, but it's, I think it's something like 1920 by 10 80 or something. In other words, if you upload an image larger than that, it's going to automatically. Constrain its dimensions and make it smaller, shrink it to those dimensions. And I'm, I can't remember whether or not it gets rid of the original or keeps the original.
I'm not entirely sure, but I know that is now handled by WordPress. And realistically, those seems like fairly sensible defaults. I'm sure if you go into settings or on a default install of WordPress, there's something in there. I can't really remember, but we don't really need images much larger than that.
The display of something like that is very unlikely to be required. I could see that if you're a, let's say a photographer or something like that you would absolutely want that to be switched off because there may be instances where you really want to show them the full detail of the great image that you've taken.
But for most people you just need it to show on the screen inside the width of your, that your theme allows and so on. So that seems like a sensible default. Yeah,
David Waumsley: [00:17:13] it does to me, I did set that using short pixel and another tools before that. So I, I picked the 1920 as the widest that I go for my clients.
Like I think actually WordPress goes one higher than that. A bigger size than that, but I think that's sensible. If you can't really need an image, that's going to be bigger than the size of the maximum screen you can.
Nathan Wrigley: [00:17:37] And in most cases, the images are going to have, the theme that you're using might well, Constraint a little bit to the left and the right and put the texts that you're reading into a narrow channel in the middle.
So yeah, it just seems like a sensible default. However the thing that still me that I genuinely don't get is his thumbnails. And what I mean by that is, I'm sure this, that is to say if you're listening to this, I'm sure you know this, but when you upload an image to WordPress, you're not just uploading that image and that's it, you're uploading an image and then WordPress will create some some other sizes, which is very helpful.
Or at least I think it used to be more helpful perhaps than it is now. I could be wrong about this, but it will create three thumbnails. And they're actually listed. If you go into your WordPress website and go to settings and media, you can see the sizes there. But the problem is there's really no way of discovering where these are.
How many of these are clogging up your system that you never use? So for example, the default is to create a square image of one 50 by one 50. Great. Maybe that's what you're using, but if that's never used that doesn't appear on not easily. Anyway, there's no way of saying I don't want that one.
Can we just only have this one or this one, or in fact, non can I just have the original image with no variations created? So that's very puzzling. Yeah, it
David Waumsley: [00:19:02] is. For me, even the one 50 by one 50, that's the only what the smaller thumb size is cropped where the medium size and large size aren't there.
That doesn't to the dimensions, aren't they? So it's the maximum height. And you need to put in your own filters to be able to create your own w and also again, I was, I don't know how many years, probably 15 years now into WordPress before I realized I could just put zero in there and stop those crops happening.
I wanted, yeah. I didn't know this.
Nathan Wrigley: [00:19:34] Yeah. It's not exactly a sensible way of doing it. Is it you think the beer, a toggle or a button to put a zero? It's not entirely obvious. Yeah. There's
David Waumsley: [00:19:43] nothing that says, and you'd like something, which I don't like, which is a it's defaults to organize the uploads into the months and the years.
Yes. Folders. And I hate
Nathan Wrigley: [00:19:55] that. Why. Because
David Waumsley: [00:19:58] I just, there's been times when I wanted to search the one folder. Particularly if I'm FTP and then get rid of things or just see them. And if I, particularly, when I was running pricey forum, we put them, I, I go, when did we publish this product?
We've only been in, but the month of the year, it just doesn't seem natural to me. I'm sure there's probably better ways of finding stuff, but yeah, for me, I just thought yeah. That's one folder.
Nathan Wrigley: [00:20:20] That's a really good point. I guess my reasoning behind it is that often there'll be attached to, let's say a post and the posts will obviously have a date, the date, and the image was posted, sorry.
The date that the blog post was posted or whatever was post that custom post type post was created. We'll match up broadly with the month's folder. So it's not that difficult to go through, but yeah, I can get it. I tell you if you change
David Waumsley: [00:20:46] your public.
Nathan Wrigley: [00:20:47] Yes. Of course. Then you have to go through version history and all of that kind of stuff.
Yeah. It just, I just quite like it. I don't know. It doesn't really cause me too much of an issue. It's interesting though, because there are, there's a whole bunch of rival plugins and the only one that comes to mind is one called happy files and happy files is a third-party plugin. Again, like I say, I'm sure there's alternatives, but it allows you to create like a finder or a windows Explorer type interface within the media library.
So you can arbitrarily create folders with sensible names like categories. I don't know. You might have cat pictures go in the cat folder and dog pictures go in the dog folder and so on. And that seems like a real improvement actually. And so much of an improvement in fact that I can't see why that wouldn't be a default.
The idea that 80% of the people need this thing for it to be going into WordPress core. I can't see too many people saying no, I would never make use of that. I think they would.
David Waumsley: [00:21:48] Yeah, it seems pretty good. I didn't actually, there was, the free version is pretty generous. I think on that if I remember correctly and they are the pro version, which came out and I was looking at the time, there is another alternative to tagging images, which I've been using.
So that's why I didn't get go down that path, which is assistant made by the Beaver builder team where you can actually tag. So I started using that, but happy files is designed for that purpose. And you think, why isn't that? Something in WordPress? It would be wonderful if it was,
Nathan Wrigley: [00:22:17] yeah, I have to say if you've got a website with, a boatload of images already, I don't know how it copes with the legacy of a particular website.
I'm imagining that it tries to cleverly help you put things into sensible folders, but I don't know. It's the kind of thing that would be best. Putin right at the very start. And then you used during the entire duration of the website's life, but you are relying on a third-party vendor to be in charge of your media library.
So I don't know, 10 years down the road, if you've got a website that's using that and that plugin goes out of existence. I don't know what kind of friction that could cause.
David Waumsley: [00:22:57] Yeah. It's something that's always, it's always wanted by me. And I've really had not used what I think is the only alternative.
How there a way of clearing up your images, the ones that left over, or if you do want to get rid of some of those thumbnails that you've changed your mind about the sizes that you're going with. That happens quite a lot with me. I'll start off with some that I've set up for clients, and then there's a design decision.
They've already uploaded a later photos. So that means I've got a pile of thumbnails that are the wrong size. There is something called media cleaner, which is free on the repository that is supposed to be able to clean up all of your stuff.
Nathan Wrigley: [00:23:33] How does so version, what does it do? Does it detect whether some things attached?
Because I know that in the media library, there is a, there's an option to filter by unattached, right? I'm guessing it's looking at that filter. And so if you go into the list, view what I'm saying, the list view, it may be in both of you. Yeah. I'm not, I can't see it at the minute, but there's an option to filter by whether something is on attached or not.
And so maybe it's just expunging the images, which aren't attached to anything, which actually, if you're on a cheap hosting and you've been uploading images for decades, then you may well be reaching limits that for images that have no purpose being on there, that seems like quite a lot, quite a nice thing to do once in a while, just go in and clean things out that are on attached to anything.
David Waumsley: [00:24:17] Yeah I've really seen some of the sites, that I've been looking after for maybe 10 years. Some of them that are blogging a lot that really does grow the size of that folder. In my case,
Nathan Wrigley: [00:24:30] I would imagine aside from video, which I think most people will be using services like YouTube or Vimeo to keep the video just because it's the best way to actually distribute it.
Not necessarily store it, but the images use tons of data compared to just text in a post. You probably write 500 blog posts and it would be equivalent to the size of a small picture of a cat in terms of data on the server.
David Waumsley: [00:24:55] Yeah. Yeah. Just going back to media cleaner, the pro version, what it brings is one of the biggest problems I think for people, but I don't know how, what it works is it's got support for the major page builders, nearly all of them, it supports out there.
So that's one of the difficulties when the images are not only with the media library, but they're also cashed in some way through the page builders.
Nathan Wrigley: [00:25:20] Yeah. Yeah. It mystifies me that we don't have an option in WordPress to click. Let's say we're in the media library and we click on the image of a cat.
I would like to see a representation of everything that is on my server associated with that picture. So I'd like to see the thumbnail. That's 150 by 150. And then under that, I want to see the large and under that, I want to see the medium and under that, I want to see any other ones that I've got and perhaps the option to.
Delete them, perhaps the option to just modify that one, but certainly to be able to see them all would be quite useful because they're just hidden from view.
David Waumsley: [00:26:04] Yeah. You have to load them usually in the page builder. And when I'm looking for the square crop that I've got, and I, I don't know if it's done a good job.
I don't know if it's cropped around the subject matter correctly.
Nathan Wrigley: [00:26:16] It never crops around the subject matter correctly. Does it just going back to Drupal again? So this is at least a decade ago, Drupal and I will not remember its name, but Drupal had a module where you could drop it into your website.
Oh no. It was in core. It was in core. It was in Drupal seven core and it allowed you to arbitrarily come up with your own. Resizes, thumbnails and so on. So you would tell it through a wizzy wig interface, what you wanted it to be. So you would say, okay, anytime an image is uploaded.
I want you to create one that is one 20 by one 20, actually, no, make it one 20 by one 50, and then I want it to crop from the top down or from the center or from the bottom. And then it would show you they had this great default image. It was an image of a hot air balloon in the sky.
And you could see if you uploaded that image of a hot air balloon. That's what it looked like when it's finished. You can see that it's cropped off the top because you've told it to go center. And then if you change the dimensions, you could say, okay, great. I'm going to get most of what I want in.
It's just brilliant. That was 10 years ago. And it's superior to anything that we've currently got in the default media library.
David Waumsley: [00:27:35] I was feeling bad. I wrote a blog post on this th the same that it's used in those scripts as well to put in my old tags, I was so smug with myself. I was quite happy.
And then I guess this is a plug for stencil, really, because I use their WordPress plugin and I know there's others out there that will access the free images that are available. And there's millions of them now on there, it's the collection of those. And I just thought, I'd really nailed this now. Cause I had a script that would crop to what I wanted, that I could put into my theme.
I had this old tags, I could get my images directly through the, what did I just say? I was going to say short pixel Sensel, that's the one that stands out. Yeah. And the, so in some ways it's been really good for that because I've been able to do it. But I realized that none of this is really, I, it means that I don't really touch anything.
That's default WordPress.
Nathan Wrigley: [00:28:26] Yeah. Yeah. That mostly you're trying to create, you've invented a system where you've bypassed it all. You're just using it for display, but all of the things that it's doing you're letting a third party take over that. Cause you it's super. Yeah.
David Waumsley: [00:28:40] Do you know what is one thing though?
Moving on to some of the nicer things about what WordPress does with images we're talking about creating all those extra thumbnails and you might think, why might we need them, but it does also support image source set, which in theory means that it's going to deliver the size of image that's relevant to the browser resolution.
That's viewing it.
Nathan Wrigley: [00:29:04] Yeah. Yeah, this is a bright future. Isn't it? And I wonder if companies like short pixel are going to suffer at the hands of all this, because once this has all been configured and set up correctly, I confess, I don't really know a lot about this and certainly haven't spent any time thinking about it, but in a future where the correct image is selected based upon what device or viewport is available then I think, that's going to just make things immeasurably better.
David Waumsley: [00:29:33] Yeah. I think it was short pixels still be taken all your well, it's up to you to decide when you've got a third party like that, but it will optimize all those images. So what WordPress is doing with source set support in that should still apply, shouldn't it?
Nathan Wrigley: [00:29:47] Yeah. You're
David Waumsley: [00:29:48] right. It's still, it's.
It's interesting. But in all honesty all this time, I've known about it. I still not sure if it's actually working. And of course, if you set. Different crops and that you don't want it to decide for you what it's going to show depending on the browser resolution.
Nathan Wrigley: [00:30:05] The, another discussion, which we haven't necessarily written down in the notes, but we did start to talk about before we recorded was whether or not all of this is a bit of a moot point anyway, because connection speeds to the internet are becoming fast enough that a lot of this feels like in the future, it won't be relevant.
Anyway. We know that images only get greater over time. The camera that I had 10 years ago was outputting things, a fifth of the size that it's possible to shoot on a camera now on all of that will still matter. But I wonder if we're setting a default in WordPress of let's say 1920 or whatever it might be.
If at some point the internet connections everywhere are just going to be so good, that is. Not relevant. We don't need to worry too much about squashing it because every device will be able to cope. And then of course, we get into the whole debate about, Oh, I dunno, speed testing and all of that.
And whether or not SEO shaving a few milliseconds over here makes your site more desirable to search engines. It's hard.
David Waumsley: [00:31:06] I definitely think when it comes to parts of Google's core web vitals images are playing a large part in that because what you've got to have that I think it's called first Contentful
Nathan Wrigley: [00:31:21] first content for the paint,
David Waumsley: [00:31:22] that's it where you see, and the images are going to be a big part of that.
So I think always reducing that. I know, of course, Google, I have got their own standard, which is the web P we were talking about earlier, which isn't. Fully supported across the web. I think they're still keen for us to reduce our images and the demand for faster loading page pages as increased as well.
Nathan Wrigley: [00:31:44] Yeah, that's a good point. And also just from an environmental point of view, the less data that's going across the wires, the less electricity that we're consuming and CPU's that we're consuming. So it is sensible to try and squash this down. Can we get onto that? Thing that you just mentioned, the format that the web P because you uncovered something quite interesting a little bit before we recorded about the, whether or not it's supported now the usual, and I'm going to get it right.
I say JPEG and I say GIF, and I see PNG, and I know that there's a whole variety of different things, but that's what I say. I'm really familiar with JPEG, for photos, basically gifts for animated things. That's the only example I would select that PNGs. I would usually select if I know there's some kind of transparency SVGs is not F is not an image at all.
It's a file format and we'll come onto that. But do you know. W Webb P is a Google thing. They created this new image, compression algorithm. So web web P images is compressed quite a lot more. I think onto like 20, I think it was a third, the size of PNGs and 25% reduced off JPEGs money. It's not fully supported yet, but is it supported enough?
So use
David Waumsley: [00:33:03] according to, can I use which I go to for everything good website? It is, I use it a lot. It says 73.33 as I'm, as we're recording this and it's really rapidly going up. So they stick in. Points are really, as I expected, I E 11 doesn't send earlier ones, but that's really just below 1% now for that.
And then we've got a problem with Safari. Safari 14, it's got limited support, but it's limited to, those are Mac iOS 11 and big Sur. So anything before that it's not supported. So we got really, almost 7% of people who are not going to see those
Nathan Wrigley: [00:33:43] images. So Mac O S 11 is reasonably new, big servers, the current one.
So obviously if you're on the more recent versions of Macko S it sounds like Safari's got support for this. I don't know why they can't support that going back in the iOS, but clearly they've decided not to. I wonder if that's a Google Apple thing. I don't know, but that if it's just that little portion of the Mac market and our ye 11, are you ready to flip the switch on this?
Would you do this, or are you going to use the short pixel option where you can serve that if it's available? And if not, I don't know how it works that out, but it knows whether the browser can cope with it. And if not, it serves up the original one.
David Waumsley: [00:34:26] I think that's how it's supposed to work, but I've not been brave enough to really test it apart now from testing sites and they haven't got round to it.
And I still are confused about, like you say, I understand the formats, but even so even what you said, there's something to add to that, that I know a lot of people just don't know and it's due to, I think Adobe, I'm going to blame for this. So gifs, you say animated, that's all you would use it for, but actually transparent gifts, a really small compared to pings if you want transparency effect and it's not even there in Photoshop.
So a lot of designers are completely forgot about that. Optimization
Nathan Wrigley: [00:35:02] transparency on gifts though. Isn't it? There's no capacity.
David Waumsley: [00:35:08] Yeah, you're not going to be able to have that kind of, yes, it's
Nathan Wrigley: [00:35:11] a, so you can't. So for example, if something faded into transparency with a gift, you can't do it. It's binary.
It's either that pixel is transparent or not. So you get rough edges. But if it's bold, straight lines, it probably would work nicely. Whereas PNG, I think, you've got the option to be pixel by pixel capacity. Yeah,
David Waumsley: [00:35:33] but they're very heavy on this. There are those cases where, you just want to isolate something and it's yeah.
Like you say, very straight lines and it's, it does a really good job and a lot less but it's softer one that I'm surprised that a lot of people who've been in this game for a long time because of Photoshop, because it didn't have it by default as an option
Nathan Wrigley: [00:35:51] for saving. Yeah. I remember trying to, I'm trying to get transparency for PNGs back in our ye five and six.
Do you remember the day where PNGs were available, but not in IAE and you had to apply all these JavaScript shims to make it work? Oh my goodness. We've come a long way. The SVG thing is quite interesting. So these scalable vector graphics, that sync to be. Almost ubiquitous for logos and things because you upload the one logo and it can be made into any size.
And that's any, we'll just look perfect at any size because it's a vector. It's not an image. The problem with it is that it's not an image. It is a vector. And because of that, it's a file and the file can be tampered with in such a way as to make it malicious. And so WordPress has made the decision that this is not an image.
It shouldn't be uploaded, but I use, and I'm sure many people do. I use a plugin. I think it's called safe SVG. And to my knowledge, it strips out well, it attempts to strip out. Shall we say the things which could be abused by others and on that basis, I'm happy to use it, but I really only use it for the logo.
David Waumsley: [00:37:03] Yeah, I have started to use it a little bit more where CAMBA, I'm just not skilled in making my own vectors, so that limits me. But yeah, it just feels like it should be time that maybe WordPress allows that I've never quite, I get, the caution because of the security issues, but is that not possible as well to put nasty stuff in images you make available as well?
It's, it seems like it's a part of the web now isn't this where we're going to be moving more and more, I think to SVGs because we want speed.
Nathan Wrigley: [00:37:33] Yeah. Maybe there'll come a point where somebody will invent a technology just to cope with, I don't know, logos with SVGs and it only contains data, which is sanitize, should we say?
But at the moment it is a problem and it's circumvented in my case, by the safe SVG plugin, which I try to use quite a lot.
David Waumsley: [00:37:53] Yeah, should we mention, Oh, we haven't mentioned I cottons. We said we would talk about my concert a little bit there. Not really. Generally I concert type aren't they not in images, but they can be
Nathan Wrigley: [00:38:05] SVGs.
So we've got, there's a whole suite of that. It was all the rage. It wasn't that these icons that were basically font sets. Is that what you mean? Yeah.
David Waumsley: [00:38:14] From awesome offices. The well-known
Nathan Wrigley: [00:38:17] I really don't make much use of those. I know they are widely used. They're all over the place.
Aren't they? And and now of course we've got emojis which have become ubiquitous to the point where, most Wiziwig text editors will figure out what the what the emoji that you intended is with your keyboard shortcuts. And but I don't really make too much use of them. In most cases I'm going to upload an image of the icon itself.
That just seems to be the way I've settled on doing it, but they are hugely popular. Yeah.
David Waumsley: [00:38:50] Because it's very convenient, isn't it? And it was a quick way of delivering sort of image content in a way through using type, but also with font. Awesome. They can be converted into SVGs as well. Yeah. Which is probably the way forward for all of
Nathan Wrigley: [00:39:05] these things.
The only situation where I use them, so things like, I don't know, in the footer of a website, I might have the phone icon next to the phone number. It's just a little way of reinforcing it, but I don't use them anywhere else, particularly. Social
David Waumsley: [00:39:19] icons, I guess is,
Nathan Wrigley: [00:39:22] yeah, that's a good point.
Yeah. I'd forgotten about that. And then we've got these kind of new, this new wave of animated. Colton's where, you hover over an image of a phone and it wobbles slightly or pretends to ring, or I don't know, you hover over an image of a computer and the screen opens. And then I must say that I find them quite beguiling, they're quite engaging.
When I see them, I, I do double take a little bit and go, Ooh, I was not expecting that. And if the animation is done in a fun way, and it looks quite jolly, I am quite drawn to it. I've got to
David Waumsley: [00:39:54] say. Yeah. I'm really surprised by how things have quickly moved on that because, it was always a joke, wasn't it?
We used to have the animated GIF when the web first came out, and it was dead for a decade or more. And then suddenly they came back in the animated gifs for this. Yeah. But then it's moved to the kind of animated SVG, which I've been playing around with trying to animate SVGs with a little bit of CSS with using key frames.
I've started to play around with that. But now we'd go. Another step, we start to get into things like Lottie as well, which could be things with JavaScript doing the same kind of animation. So much has moved. I think within just the last couple of years on that. That's
Nathan Wrigley: [00:40:40] the thing about it, is it just right now, because it's all a bit new.
It stands out doesn't it just creates that. Oh, what is that thing moving you were describing earlier? Yeah. How you've got these row separators and in the case of one of them it's Oh, it looks like a wave and you've animated two or three layered wave icons to move in some kind of way that makes it look like there are waves moving and yeah.
Something like that. If I saw that on the page, it's not going to clinch a sale for you, but it is something which is going to make me stay for a few extra seconds. Just what's going on there is that even me? Yeah. That's moving. That's weird. I don't know. It's quite shocking and interesting, but I wonder how long it's got.
I wonder if it's the sort of thing that we'll become annoyed with over time.
David Waumsley: [00:41:27] I think so. I think it, that is it's the novelty effect on it. And also there's, I don't think we've, we liked the fact that there may be a new way of doing it, which appears to be lightweight. But I often think of CSS as always something that's very lightweight, but actually using something like key frames really ramps up the CPU yes.
For the visitor and, w with, particularly with animations at the moment, again, with the core web vitals thing, we've got that cumulative layout shift issue all the time with image stability and those kinds of things may have an impact on that.
Nathan Wrigley: [00:42:01] Yeah. And do you want that stuff available on a mobile phone?
It's more things to think about, more settings to configure. I don't want that moving on a mobile phone. Cause it'll just look weird. There's not enough space for it to move in that way on a mobile phone, it's going to start to drain that person's battery more quickly. Yeah, it's just, there's this way more to think about them.
They look great. I've got to say, whilst I understand from a usability point of view, it doesn't really add anything. The internet isn't always about being like, static sometimes a little bit and movement is just, yeah,
David Waumsley: [00:42:37] we can, yes, we can dare to have fun, but I wonder really, because we are people who are looking for this kind of stuff.
When we see something novel that someone's done, that we've not done, it really stands out. We think I want to do that, but I wonder if the average user is just so task focused that they just don't even never consider it.
Nathan Wrigley: [00:42:57] Look at sites like Amazon. This is not a lot of movement. There is there.
It's just, that they're very successful, but there's just no flashiness going on whatsoever. It's just very, very buttons. Haven't changed gears. And the there's certainly no movement because they don't want you getting distracted with that stuff. Do they? But if you're, if I don't know if you're selling a course, a lifestyle course or something like that, having something light and moving and breezy and just a bit of fun might be exactly what you want.
David Waumsley: [00:43:27] Yeah. Yeah. Hey, have we done this?
Nathan Wrigley: [00:43:30] No, I'll tell you one thing we haven't talked about where we keep the images. Do we keep them on our own servers or do we take them over to a CDN? Should we quickly delve into that? I used to use, I used it for a while. WP smush and they had a. Nice little handy facility where you could toggle a button and it would not only smush the image that is to say, reduce it in size, but it would also suck it up to their CDN and then rewrite all of the image links on your website to their CDN.
And I don't really know what the, I didn't measure what the benefit for that was, but in my head, I'm the message that I'm getting is this'll be better. It's a CDN it's globally distributed images are going to represent a significant proportion of the page load. Let's let something closer, an edge server let's let that deal with the images that just sounded good to me.
I've stopped using it because my website, the WP Builds website. It doesn't really have many images, got background image, a featured image, and that's about it. It's not, there's not a lot of that sort of stuff going on, but I get the point of putting it on a CDN.
David Waumsley: [00:44:41] Yeah, I do. I've played around with this when I think when it felt to me in the web, this is many years back CDNs was the way forward.
I set up max CDN. Interestingly, I'll go back on that one. Short pixel has something similar and I think Imagify as well, which is the WP rocket company have I think CDNs for their images, but I did hear an argument whether it's true or not, or at least cause most people think it would be good, but they did say that it can sometimes cause you problems that your images are coming in from one direction, but maybe your style sheets are coming in from your local server and things.
It's not actually speeding things up because of the delivery. And I've heard this as well about CDNs, even when you are pretty much shoving everything in with the functionality. And there was certainly when I was into it, I was running an e-commerce site. And I, to be honest, I couldn't tell it was speeding things up.
I felt things had got slower, but, and then I read an article which I still to this day, don't understand that. Try to technically explain why sometimes you'll find it particularly on e-commerce sites that it can actually start to work against you because of the kind of delivery of the images against the other thing, that's need to happen on the site to load the page.
So you can get this mismatch and slow down the actual load. So I, I think they're good things, but they don't necessarily always work for you. It would, it always work
Nathan Wrigley: [00:46:07] well. If you were lazy loading images, let's say you've got a nice long blog article punctuated throughout that blog article are a dozen images, quite large in size you needed, you need them to display the fine quality.
And obviously at the very beginning, when you've, when you're loading up the page, all the waterfall stuff is basically done. You start to scroll and those images come and they're coming from a CDN. That seems like a sort of no brainer instance using a CDN.
David Waumsley: [00:46:36] Yeah. I'm sure it is. It's just interesting. I just don't think that there isn't, it's not a quick fix.
Always. I think there's a lot of considerations on your side that just make sense. And we didn't actually mention the fact that WordPress has now got its native lazy load in fruits images.
Nathan Wrigley: [00:46:52] Yes. Good. Yes. Why are we good? Yeah.
David Waumsley: [00:46:55] Yeah. I always wonder again how that is going to work as well with measuring speed and Google, this kind of delay on your images, because it only, it really measures that.
That
Nathan Wrigley: [00:47:07] first Contentful
David Waumsley: [00:47:09] paint. Yeah. Yeah, exactly.
Nathan Wrigley: [00:47:11] Yeah. Yeah. I don't know. Another thing that we didn't talk about just very briefly before we draw this to a close, is where do you source your images from? You can obviously pay for them and go to a whole bunch of painful services and get really amazing images.
And honestly, the images that they have on those paid-for services, they are great. You can usually find exactly what you need. However in most situations I don't require anything. That's that great. And I'm a heavy user of things like Peck cells, PEX, ELs, and on splash. But more recently I've developed this habit where these online services like stensilan pics teller and all of those things, which is done in the browser.
They have connections to a lot of these services and I'm not entirely sure which connections they've got, but, you can type in a cat on a cushion and a whole bunch of images will come up and I will then just drag it in. And at that point I can resize it and download it and it's all done in my browser.
And it's great. I really like those kinds of things. And stencil goes a step even further. Cause they've got a WordPress plugin, which just does it all inside of the inside of the WordPress dashboard, which is even better.
David Waumsley: [00:48:26] I cons it's stunning. I don't know where it gets them from, but there are a bunch of services.
You mentioned one. And I remember Pixabay as well that used to supposedly collect them from everywhere.
Nathan Wrigley: [00:48:39] Yeah. The one I've used is called Libra stock and I haven't used it for a long time, so I don't know if it's any good, but yeah. It's like an aggregator of all the other, Oh, many of the other sites. Yeah.
There's
David Waumsley: [00:48:49] a lot of politics about that. Isn't it at the moment about whether people can use that, even though it's free to use them in other services and yeah. Yeah. There's also a bit of politics as well with Unsplash, which has got an amazing number of, I haven't till just recently needed to go to that directly, but I went there just for my searches recently and I thought, wow, there is just so much stuff there.
Nathan Wrigley: [00:49:13] Yeah. And you can often download the size that's most appropriate to you. It's not a one size fits all. You can go and select the, I don't know the super small one or the really big one and it's equally free, but obviously if you only need something tiny, you might as well have the tiny one. And then things like short pixel and smushed don't need to do anything like as much work.
David Waumsley: [00:49:34] Yeah. Do you ever worry about the legal aspects? Because anyone can submit their photos. They're only really given their reassurance that this is their image.
Nathan Wrigley: [00:49:43] This is one of the reasons why I I use Pix teller because if I use it in picks teller, I never delete anything I create there. I just.
Create it and stick it in a folder. And so then I've got a, this is probably sublimely ignorant, but then I've got a record that I got it from there. And my understanding from the document that I read about pics teller is they promise that these are, was it COO that they're creative commons and I've got the license to use it in whichever way I like, so that's the way I approach that.
And I do that also with with me, yeah. Music that I download. I've got various websites that I download music from and I saved them with the exact title that it gave it to me. Cause it's usually got this random string of numbers at the end. And I presume that's some kind of receipt or something like that.
I don't know it could be wrong, but I just saved them as they're originally intended. But I know you've got to be careful of this stuff, but I'm hopeful that's enough.
David Waumsley: [00:50:44] Yeah. I've not heard anyone. I know of having any issues with using those at all. I do. I don't actually need them that much.
You, you do for putting out content, you use a lot of images there. I've never really needed it. Either. The client has something, Oh, I ended up going to as the some great deals often on deposit photos, which has got pretty good images. I end up using a lot of those rather than needing to rely on the free one.
Nathan Wrigley: [00:51:11] So that's a paid for service that you've acquired a license for a bulk amount by a thousand images or something. And you just slowly go through that. And then when you've used that all up you intend to buy another pack. Yeah. Okay.
David Waumsley: [00:51:22] Yeah. These, the AppSumo deals, I'm sure you
Nathan Wrigley: [00:51:24] must have got them for deposit photos, but then the workflow of using something like stencil or pick stellar is just so much easier.
I'd just go for that because I'm creating it as a thumbnail with all the other stuff in the title for the post and all that in it already. So it just makes it easier. Yeah. Yeah. I think we have done it now. That was interesting. I honestly when we said we're going to do images, I was quite excited, quite I quite like the idea of talking about images.
It's just such an important part of the web. And you forget about how important it is, but imagine if you could click your fingers and take images out of the web, how doll it would be.
David Waumsley: [00:51:59] Yeah. Images are good.
Nathan Wrigley: [00:52:01] Images are good. That's it? We'll end it there. Thanks David.
David Waumsley: [00:52:05] Thank you.
Nathan Wrigley: [00:52:06] Bye. I hope that you enjoyed that episode.
It was very nice chatting to David Wamsley. Once more, all about images. There really is a lot to say isn't there. When you think about it, you just think, Oh, I upload images to WordPress and that's about it. Turns out no, there's absolutely tons that you could say. And we did say just about all of it. I hope it was of interest and I hope that you enjoyed the podcast.
The WP Builds podcast was brought to you today by Cloudways. Cloudways is managed cloud hosting platform that ensures simplicity, performance and security. It offers cloud service from five different cloud providers that you can manage through its intuitive platform. Some of the features include 24 seven support free migrations and dedicated firewalls. You can check it out at cloudways.com .
And by AB split test. You want to set up your AB split test in record time, then you AB split test plugin for WordPress. We'll have you up and running in a couple of minutes. Use your existing pages and test anything against anything else. Buttons, images, headers, rows, anything. And the best part is it works with element or Beaver builder and the WordPress block editor. You can check it out and get a free demo at absplittest.com.
Okay, just before we go, one final plug for the page builder summit, head over to page builder, summit.com. Where you'll find a whole bunch of speakers, 30 plus speakers, all talking about different page builders and ways that you can increase your proficiency with those page builders.
It's all happening from the 10th of May to the 14th of May. So in a couple of weeks, time, head over to page builder, summit.com now and get your registration. Okay. I hope you enjoyed that as this week was a discussion with my good friend, David Wamsley next week will be an interview. That of course will be episode number 227, but you'll have to come back next week to find that what it's all about and who it's with.
We'll be going live. As we do Monday 2:00 PM. UK time. WP Builds.com forward slash live. It's the, this week in WordPress show with my good friend, Paul Lacey, which we then put out on a Tuesday. So you could join us for that as well, if you like, but if we don't see you for any of that, hopefully we'll see you back here next week.
Take care, cheesy music, fading in stay safe. Bye bye for now. . . . .
