PB101: L13 – The Fundamentals of Images in Web Design

More about this video

Images might seem like a pretty straightforward topic, but there’s a lot to learn and a lot to know. And it’s one of the areas where I see tons of mistakes that dramatically impact essential things like SEO, accessibility, performance, and more.

In this lesson, you’ll learn the fundamentals of working with images in web design. We’ll cover:

✅ Basic image formats (jpg, png, SVG)
✅ Next-gen image formats (webp, avif)
✅ Real images (HTML) vs background images (CSS)
✅ Figure tags
✅ Alt tags
✅ SRCSET responsive images
✅ Pre-optimizing images
✅ Plugin-based image optimization
✅ Image organization in WordPress
✅ Generating multiple image sizes
✅ Making real images behave like background images
✅ Text overlays on real images
✅ Common mistakes with images

More details on how to configure Shortpixel settings are found in my Plugin Blueprint video here

Video Transcript

1
0:00:00
In this lesson, we’re going to talk about the fundamentals of images, which I think a lot of people feel like, hey, images, not that complicated, easy to add to websites, but there’s actually a lot you have to learn and a lot you have to understand because there’s a ton of people making mistake after mistake after mistake. And these are very, very costly mistakes in terms of performance, SEO, accessibility, the list goes on and on and on. And I do not want you making the same mistakes. So I’m going to go ahead and share my screen and we’re going to do this in a very practical format. I’m just going to start adding images to the page and we’re going to talk about this as I go. It’s going to be a little bit like you’re getting hit with a fire hose again, but it’s okay. You can go back and rewind. You can slow the video down, whatever you need to do to be able to digest this information, I’m going to give it to you straight and it’s up to you to sort it out from there, okay? On a normal website, we have a header and inside of our header, we have a logo typically. And that logo gives us the opportunity to start talking about some very important concepts like image formats. You may be familiar with JPEG, PNG, SVG maybe. And we’re gonna use this logo opportunity to discuss the pros and cons of these different image formats to get started with our lesson. So I need to insert a logo right here. The first thing I’m gonna do is go to logoipsum.com and I’m gonna download a placeholder logo. If you’re familiar with lorem ipsum, placeholder text, you know the text clients always complain about. They’re like, what is my website in Latin? Like calm down Bev, it’s just placeholder content. Okay, this is like placeholder logos and they look quite good. So I’m gonna go ahead and download this one right here. And you’re gonna notice something when I do show in Finder. Let’s just inspect this real quick. This is an SVG file and it is six kilobytes. That’s tiny. That’s very, very, very small. And this is actually the appropriate file format for something like a logo, which is an illustration. SVG stands for Scalable Vector Graphic. And this is, like I said, the appropriate format for this type of image. Now, what I’m gonna do is I’m gonna open Figma because I wanna make a point here, okay? I’m gonna do new design file and I’m actually going to pull this file into Figma and I’m going to export it as both a JPEG and a PNG. So I’m going to grab my logo right here. We’re going to go to export PNG and we’re going to put those in downloads and we’re going to select my image. I need to upload it now. All three of them. Drop them in. And let’s add the JPEG first. I’m going to insert the JPEG and you’re going to notice a big problem. It’s got this white box. What is the deal with the white box? Well, the JPEG format does not support transparency and this logo obviously has a transparent background and it needs a transparent background. So we can see that JPEG is not an appropriate file format to use for a logo like this. Now, a lot of you, I’ve seen this mistake many, many, many times, we’ll say, well, Kevin, that’s no problem. My client gave me a PNG version. Okay, awesome. There’s the PNG. Now, what do we notice? Well, PNG supports transparency. However, it still has some limitations. Notice that the logo is a little bit fuzzy. It’s a little bit fuzzy. So, you know, any optimization plugins that you have installed, or even WordPress itself tries to optimize images a little bit when you upload them, has an effect on the quality of the file. And so right off the bat, we can see that’s not the most appropriate file format to use, even though we still get transparency. Also this is a raster image type and so that’s not a scalable image type right. So if I try to make this bigger let me go to layout let me go to 50 let’s do 50 rim make it real big 500 pixels wide more or less. Look at the amount of pixelization, artifacts, blurriness, blockiness, this is a lot of things going wrong with this image file. Now let me swap it to the most appropriate format which is SVG. And take a look how sharp that is. Take a look how even at this size, the file size is tremendously small, tiny. Now I can even go bigger with this. I can go 100 rem. still scales indefinitely and maintains its quality throughout the entire range. I can go back to being small if I want to. Let’s do five, let’s do 10 rim right there. So that’s like 100 pixels wide, still looks good there. So for responsiveness, looks absolutely fantastic, goes up, goes down, no pixelation, no artifacts, no blurriness, no nothing. And SVGs come with superpowers. So I can insert an SVG as a normal image just like I did the PNG, just like I did the JPEG, or I can insert the SVG as code. Now depending on the builder that you happen to be using this might be easy or it might be a little bit more difficult. In Brics it’s super easy. They have an SVG element and what this will do is allows me to select my SVG and it converts it to code. Okay, so I’m going to show you this. I’m going to save this. I’m going to go to the front end. We’re going to inspect this really quick and we’re going to see that there is an SVG and not an image. It’s not an image element. It’s an SVG element. And look at all this path information. There’s fill information in here. And so what this means is I can actually manipulate this image on the fly. I can change the fill color. Now the default will just change the fill of everything. If you notice the logo itself is actually two different colors, but if I want to using custom CSS I can manipulate that color on the fly separately from this color on the fly. I can manipulate those colors on hover. I can actually animate aspects of this logo independently from other parts of the logo all because it’s an SVG. All because it’s not actually an image, it’s just code. So that is really, really, really powerful. You cannot do that kind of stuff with JPEGs, you cannot do that with PNGs, you cannot do that with next-gen image formats like WebP or AVIF. This is only superpowers related to the SVG file format, which is absolutely fantastic. Okay, so that’s SVG versus PNG versus JPEG. As we can see, anything that involves illustration or scalable vector graphics, you need to use the SVG format when translating those over to the web. Do not convert those to JPEG. Do not convert them to PNG. Use the SVG format. Now let’s talk about real images with contextual value. Think like a photograph, right? So this is gonna give us a lot of opportunity to talk about various concepts. Number one being, don’t just go grab photos from anywhere. I see people grabbing photos from Google Images and they’ll go into, what’s that social media application, wherever you would pin stuff, Pinterest, Pinterest, they’ll go into Pinterest grabbing images from here and there. That’s the best way to get your client or yourself hit with a lawsuit, hit with a mean letter from a lawyer that’s like, why are you using our copyrighted images? You might want to have to pay us a fine for that. You don’t want to be in hot water for copyright violations. You need to make sure that the images you are using are either original proprietary photos, get your client to commission photos for what they need. If that’s not applicable, you can use stock photos or what are called royalty free photos from a reputable stock photo site. So Unsplash is a site you can get royalty free photos from. I’m going to go ahead and download us a photo. So I’m going to look through here and I am just going to grab this one right here. So I’m going to download that and once again we need to inspect this photo and see what’s going on. One thing I’m going to notice right off the bat is this is an 8.7 megabyte photo. I’m also noticing that it’s 8,000 pixels wide. This photo contains a tremendous amount of data and information that we do not need for the web. Now if you want to blow this up to a billboard in Times Square, you need that data. If you just want to put this on a website, you don’t need that data. So what we need to do is pre-optimize this image before we ever think about uploading this to WordPress. We need to pre-optimize the image. A lot of you are going to say, Kevin, I got a plugin that does that, that does it all for me, it’s no problem, it does it on the fly. Here’s the thing, you’re making that plugin and your server do a lot of extra work that it should not be doing. And think about uploading dozens and dozens and dozens of photos like this. You don’t want to be putting that kind of load on the server, you don’t want to be putting that kind of load, like you’re using up a tremendous amount of hard disk space on the server that does not need to be used up. You need to pre-optimize your images. I’m going to show you two ways to go about this. The first one is free. The second one is paid. So I’m going to go to squoosh.app. I believe this is owned by Google. Look how fast I can pre-optimize an image. I’m just going to drag this in, hit resize, put this at 1920. It’s going to drop the quality a little bit. That’s part of the optimization process. I’m going to go ahead and export it. I’m going to view this in the finder. Look at this 380 kilobytes now, and it’s only 1920 pixels wide. That is pre optimization of the image. That is a hundred percent free. I’m going to show you a second method. This is actually the method that I use and it’s an app called photo bulk. It’s part of the set app family of apps for Mac. So I had to have a subscription. I get all these really cool apps as part of the subscription. This is one of the apps, but I can take this full res image right here. I can drop this into photo bulk and it’s, it’s going to analyze the image real quick and then it’s going to bring in it. Remember I can do one photo with photo bulk or I can do, it’s called photo bulk because I can do like hundreds of images with photo bulk all at the exact same time, which is fantastic. I’ve got some presets here. Like it’s going to automatically size it to 1920. It’s going to keep the same exact quality. It’s going to rename it. I’m going to rename this travel or something like that. And I’m going to go ahead and hit start and I’m going to go ahead and hit save. And then it’s going to go ahead and process the images. Of course, right now there’s only one and we’re going to take a look at the image as soon as it’s done. And we’re going to see what has happened. So I’m going to open the folder 517 K 1920 pixels wide. Remember this is not fully optimized this is pre-optimized and I can do that with dozens and dozens and dozens of photos all at the same time with photo bulk. Okay I’m gonna go ahead and close that. Now that I’ve pre-optimized the image I can actually upload it. So I’m gonna go insert an image, and I am going to, ooh, nope, before I hit upload, let me go back into the admin, and we’re gonna take a look at two plugins that I would recommend you install these plugins on every single website. One is called Happy Files Pro, the other one is called Short Pixel. What Happy Files Pro is gonna do is it’s going to allow me to organize the photos that I upload. I will tell you, WordPress leaves a lot to be desired when it comes to media management. There is no way to organize photos and it becomes an absolute junk drawer nightmare. Very, very, very quickly. Happy files pro also gives you some superpowers as well. So let’s first take a look at happy files pro. I’m going to click on the media library and you’re going to notice right off the bat looks a little bit different. There’s this folder system on the left-hand side. I can go ahead and create a folder, what they call a category, and I’m going to call this branding. And then what I can do is I can organize my branding files by dragging them into that folder and now I can keep those separate from all my other media. What I would also tend to do is create something like placeholders. All of my placeholder media can come in here. You know how valuable this is? You use placeholder images everywhere and then the client approves the design, yada, yada, yada. They send you all the real photos, you swap them out. You still have all these placeholders uploaded that you don’t need. You can simply open the placeholders folder, delete everything, and now you’ve cleaned up your media library. There’s no more placeholder data in there. Absolutely fantastic. You can create categories for your services and I can drag these around. I can nest them under other things, whatever I want to do. So I can create services. I can say like a roof repair. If I’m doing a roofing site, there’s my roof repair photos under my services. Very, very, very good for organization. And another superpower, I can actually, these are queryable objects. So I can query every image inside the services folder or every image inside the roof repair folder. Absolutely fantastic. I can actually assign images to multiple categories or multiple folders if I want to. Kind of the same way that Gmail uses like tagging. You can apply multiple tags to a single email. Really really powerful for organization and last but not least it actually allows you to use this type of organization everywhere. Pages can be organized, I don’t have it turned on right now, posts can be organized in categories and folders within Happy Files Pro. Now let’s talk about ShortPixel. ShortPixel is the image optimization plugin that I use and it does two primary things. Number one, it re-optimizes every image that I upload. Number two, it serves images to visitors in next-gen formats like WebP. to be working with JPEGs and PNGs and SVGs. Out of your JPEGs and PNGs, those need to be served to visitors in the WebP format for best optimization and performance. But the thing about WebP is it’s not supported in every browser and every device. So what we need is a system that detects the browser and device and says, oh, your browser supports WebP. So we’re going to serve you a WebP version of all of our images. And that happens on the fly. And if they don’t, then we serve them the JPEG or the PNG version. And ShortPixel does that all for you automatically. Now, there is a little bit of setup involved. I’m not going to go into detail in this particular video because everybody may use a different tool. But I will do a video on, I’ve done a video on setting up ShortPixel. It’s in my blueprint plugin video. Definitely watch that if you haven’t, but I will do a specific video on setting up a short pixel for engine X servers because there is a few extra steps that you have to do. If you’re using Apache, I don’t think you have to do those extra steps. So again, it’s a situation where this doesn’t apply to everybody. So it doesn’t make sense to do it in this video, but the point stands, we need to be serving visitors with WebP whenever possible. And if they don’t support WebP, serve them JPEG or PNG that are fully optimized, which ShortPixel is also going to optimize. ShortPixel, by the way, also generates the WebP files. So I upload a JPEG, it says, okay, cool, JPEG optimized. We’re also going to generate a WebP version of that photo for you. So I don’t have to do that. And last but not least I’m going to hop into WP Codebox. I told you guys, Firehose, okay. I add this snippet to every single website which generates additional image sizes for me and you’re going to see why these come into play in just a second. But I just uploaded, let me go to, oh actually I didn’t upload it yet. Let me delete this right here, delete category. Okay, we’re going to go to placeholders. Let me delete this one right here Placeholders and I’m gonna upload add new we’re gonna upload my little photo here that I got travel zero And this is the pre optimized version. Okay, I’m gonna edit this we can see it’s 500 KB 1920 I actually don’t have short pixels set up on this site. So it’s not going to optimize it any further But if I go back to the media library here, we can take that and put it in placeholders. See, placeholders separate from branding. Ah, very nice, very organized. Okay, now what I’m gonna do, you’re gonna see where these other sizes come into play. But I wanted to show you, I uploaded one size. But on the backend, that little script actually generated a bunch of different sizes. Look at this dropdown. Look at all these sizes that I have to choose from, and ShortPixel would optimize every one of these sizes as well. The reason I need this is if you don’t have these sizes, you’re most likely going to be putting full res images into small spaces like this. This is a grid. So I’m going to go ahead and hit save, view this on the front end. Does this need to be a 1920 pixel image like this pulling that full file at 517 KB? No, no, no, no, no. The rendered size is only 435. So what I can do now, because I generated these other sizes, is I can come in and say, you know what, the 480 version is going to work perfect here. So I’m going to just select the 480 version and not the figure tag the 480 version right there hit save and then refresh and look now it’s actually pulling a completely different version of this photo 480 by 320.jpg so it is pulling only the size that is actually needed for that particular particular space that this photo happens to be in. Also, let’s go back to the DOM. We need to talk about all of this code that you see here. Why are there so many links to so many different images within one image tag? This is called source set. So I want you to imagine for a second, or in fact we don’t have to imagine. Let’s take the grid off of here and let’s make all of these 1920. Okay, and actually I’ll just go down to one image now. So there’s one image and it’s loading at 1920 for this space. It actually only needs to be like 1600, like 1536. Let’s do that. Save. Refresh on the front end. So there it is. 1536 pixels is the image being pulled here. Now here’s the thing about this. On a mobile device, does that need to be 1500 pixels? No, absolutely not. So there’s something called source set and Brics applies source set by default. Any good builder is going to do this by default, even though this is more modern. So if your builder is lagging behind in functionality, it may not do this, okay? But what this is doing is saying, it’s defining all of these image sizes, and then it lets the browser choose the appropriate one. So on a mobile device, when I do this and bring this down, look, the browser is going to say, hey, we don’t need the 1500 pixel version of this photo. The width of this device is only 487 pixels or something like that. So it’s going to choose from the list of available options, the most appropriate image to render for the visitor. This is responsive images on the fly and maximizing performance. You need to be making sure that your builder is outputting source set code for your images. It’s S-R-C-S-E-T, source set, okay? All right, so I’m gonna go back and we talked about images, oh, no, we didn’t. We didn’t even get to the contextual value part yet. We’ve covered everything leading up to this. Now we need to talk about the fact that this is a real image versus what we’re gonna talk about next, which is a not a real image, a CSS background image. Okay, so let’s go back to the DOM. Anytime your image means something, it has value. Think about a product photo, a service photo, a headshot of a team member, something with real contextual value, it must be inserted on the page as a real image. So I’m going to inspect this. This is a real image. It has an image tag. Now I’m going to show you a fake image. I’m going to come down here. I’m going to add a container. And what we’re going to do is make this container 500 pixels high. So I’m gonna say 50 rim, and then I’m going to add a background image. We’re gonna use the exact same image, okay? And then I’m gonna talk, let’s talk about CSS background images real quick. And then we’re gonna compare the two. So I get a bunch of these controls over here. I can say the background image should not repeat. I can choose what part of the image I want to see. I want to see the center, center. I want to cover it. I want to basically cover the entire container with the photo. Now, if I do contain, here’s what’s going to happen. It’s going to contain it in the container, but not take up the entire container because the aspect ratios are different. Now, in this situation, I could choose to repeat it if I wanted to, and it will repeat the image. I’m going to stick with no repeat. I’m going to go back to cover. I could even, by the way, go custom say, Hey, I want this to be a 20 rim sized image. And then I can actually choose how it’s positioned top left, bottom, right, really, really valuable controls, honestly. And this is why people use CSS background images. It’s probably the first way they ever came across manipulating images within a container like this. They don’t really know any other way to do it. So this is what they stick with, but it’s bad, bad, bad practice, felonious behavior if your image contains contextual value because this is not a real image. Let me show you, okay? I’m gonna go no repeat, cover, and back to center, center. Save, let’s go to the front end and get out of mobile mode. Okay, let’s come down, here it is. Looks like an image to me, doesn’t it? Does it look like an image to you? I’m gonna inspect it. And we find out, womp, womp, it is a div with nothing inside of the div. There is no image. So to a visual user like me, a real human being, I can see an image there. Works for me, but I’m not the only person using the website. What about Google? Google, very important, isn’t it? For SEO and stuff like that, you want your website to rank. You want Google to understand what’s on your site. And Google’s got a bot, it doesn’t use humans. They have little bots called spiders that crawl the website and they crawl the HTML code. And they’re looking for data. And that’s why these semantic tags matter. It needs to know, the bot needs to know what is a section, right? What is a figure? What is a paragraph? What is a heading? What level heading is it? What is a list? Is it an ordered list, an unordered list? Our semantic HTML code informs the spiders how our site is laid out, what content is on our site, what content is more important than other kinds of content, and screen readers. Actually blind people using a screen reader also need to know what data is on our website. Otherwise they ain’t gonna buy from you. They’re not gonna convert, they’re not gonna have a good experience. This is not good, right? So we need to make sure that we’re using real data. Well, guess what? The spiders, the screen readers, they don’t read CSS. This image is defined purely with the CSS background image property. It is not a real physical element in the DOM. This is the DOM, D-O-M, document, object, model. We’ve talked about that before. This image does not exist to anybody but a visual user, okay? And that’s a bad thing for images that need to exist, that actually have real data and we need to be able to describe them. Also with background images I can’t use alt tags, I can’t use figure tags, I can’t use source set, we just talked about source set, right? None of these things can be used with background images. So now I’m going to go back up here and we’re going to see a couple differences, okay? First we already saw the image tag within the code. I can also wrap that image tag with what is called a figure tag. And a figure tag has actual semantic value. An image tag is like a div. It has no semantic value. It’s just a reference to a file. But when I put it in a figure, it’s saying, hey, pay attention to this. This has value, okay? It has extra value. It’s extra important, let’s say, if I was explaining it in beginner terms. Also, what comes along with the figure is the ability to have a fig caption. Okay, so I can actually associate a caption of text with a specific figure element. Very, very powerful. Also with images, real images, I can use alt text. This describes the photo to spiders and non-sighted users. So I can say that this is a road winding through desert with mountains and yellow stripes in the middle. Okay. You literally describe the photo. Okay. And you could even say asphalt road. Like the more descriptive you can be the better. Right. So I’m going to go ahead and hit save. Let’s refresh. And now let’s see the differences. So I’m going to inspect this. And we can see there’s my figure tag. There’s my image tag. Here’s my alt text. Well, it auto-scrolled me. Here is my alt text right there. Asphalt road winding through desert with mountains and yellow stripes in the middle. Okay. Here’s all of my source set information. There is a lot going on. Let’s check on that CSS background image. Nothing, nada, zilch, does not exist. Except if you have eyeballs. Okay, that’s the only way that you know that it exists. So when would you use a CSS background image? The only time you’re allowed to use a CSS background image is when the image is purely for decoration. We do not need it to have an alt text. We do not need it to have a figure tag. Nobody needs, if a non-sighted user, a spider from Google, a screen reader comes down the page, they don’t need to know that this image exists because it’s purely for decoration. Think like a background pattern image, like let me get one. Let’s go to backgrounds, pattern, something like this. There you go, right there. So this is a perfect example. Now this photo of this road, some people will be like, well, that’s purely decorational.

4
0:28:03
Well, is it?

1
0:28:04
Is it? It’s kind of creating a vibe, right? And it may support the information. It depends on how the image is being used. That’s why it’s important to understand the context, right? But we got to argue here, right? If I’m going to do this, and I did not pre-optimize this image, so look how long it’s taking, okay? It’s only 439 or 493K, but watch this. Let’s go squoosh. Let’s just do our process, right? 1920, we don’t need 6,000 pixels of information for this. Now it’s 91 K, okay? Let’s refresh here and let’s delete that permanently. Perfect, all right. And let’s upload, oops, did that wrong. Let’s hit add new. The media library leaves a lot to be desired in WordPress. Okay, so I just did that, let’s go back to the library, let’s put that in placeholders, and there you go right there. And this is, let’s open that up, 89K, after being pre-optimized, okay? So now what we’re gonna do is we are going to select that image, bam, boom, that’s a decorative image, purely, there is no information that anybody needs to glean from this photo. It is purely for decoration. That is a good case for CSS background images. Actually put that in the wrong spot. This is our background image right here. Let’s go to style background and swap that out. Perfect use case for a background image. Okay, so now we understand the difference between HTML images and CSS images. Now, here’s the thing, sometimes you want a real image to behave as if it’s a background image. You want to overlay text on it for example and in this situation this is the thing that gets people in trouble. They use a background image because it’s easy to overlay text and it’s easy to create the darkened overlay effect or a gradient overlay or what have you and they lose all of the contextual meaning because they use CSS background image when they should still be using a real image. So I’m gonna do this both ways so that we can compare and contrast. One way is easy and it’s the wrong way. The other way is a little bit more technical, but it’s the right way and you are learning how to be a professional, which means you are gonna go the extra mile and do things the right way. Here we go. So I’m going to call this BG image like that and I’m going to call this real image just like that. Yes that’ll work. Okay so the BG image is going to be a height of 500 pixels which I’ll just do 50 rim and we’re gonna do the same thing for the real image a height of 50 rim. That’s our container. Okay remember we’re trying to create overlay text effect. This could be a hero situation. It could be a, a fancy card that you’re building. Doesn’t really matter on the background image. I’m going to go ahead and I am going to, I’m going to do this at the ID level. I’m going to add the background image here and we’re going to use the, let’s use something with more value. Let’s go here and let’s say I was doing a snorkeling lessons. Okay. Let’s just say snorkeling. Okay, so there’s a girl snorkeling right there. So we’re going to show our snorkeling lessons in action. So let’s go through our whole process. I’m going to download this. Let’s go ahead and pre-optimize it. So I’m going to drop that into Squoosh. We’re going to resize to 1920 and we’re going to let that run. I’m going to download it. Perfect. Now I’m going to come back, let’s close that. Let’s select the image. Let’s upload the optimized version. Perfect. Let’s insert it. There’s our background image right there. I’m going to say that this needs to be a little bit bigger. We’re going to say the 1,536 pixel version. We’re going to show me the center-center. We’re going to do no repeat. We’re going to do cover. Look at that. We are showing an image of a service. This has contextual value. We’re doing this wrong. This is the, remember, the top is the wrong way. Bottom is the right way. Next thing I need to do is add an overlay to this. I’m going to grab BG image. I’m going to come down to gradient overlay. I’m going to apply an overlay. I’m going to choose a dark color like this, and then I am going to drop the transparency of that color. And now I’ve darkened the image. Now remember this is just a container so if I want to add overlay text all I have to do is add a text element into the container. The image by default since it’s a CSS background image is already in the background. So what I’m going to do here is call this snorkeling lessons and we’re going to apply a class called overlay text just like that. I’m going to make this a paragraph tag and then I’m going to style it. We’re going to make the text white. We can make the text six rim. I’m not going to use clamp and all that. We don’t need to worry about it. It’s just demonstration purposes. Font weight, we’re going to go with 600, make it a little bit bolder. In fact, I want that to be more like four rim, five rim, somewhere in there. And now I just position the text using Flexbox. So we’re going to say, position this to the end, to the right side. And then what I can do is add some padding to offset it. I’m just adding padding to the container, not the actual text itself. Let’s do something like five REM 50 pixels on all sides. Look at that. Perfect overlay text, super easy to do. Now that’s the wrong way to do it. Why? Because we have a card more or less. That’s all about our snorkeling lessons. The image is important to the context of this card. But if I inspect, what do I see? I see text called snorkeling lessons and Google doesn’t know there’s an image here. Screen readers don’t know that there’s an image here. Only sighted users, humans, know that there is an image there. So this is objectively the wrong way to do it. Source set, no. Alt tags, no. Figure tag, no. None of that can be used because this is a background image. Now I’m going to build it the right way. This is the little bit harder way, the more technical way, but it’s the correct way. And now you’re going to know. All right, so here’s what we’re going to do. We’ve got real image, 500 pixels high. We’re going to insert an image, a real image in that container, and we are going to select the exact same image. Perfect. I’m going to also say that we need to render the 1536 pixel version of this. I’m gonna wrap the image in a figure tag. I’m gonna give it some alt text, okay? Girl taking snorkeling lessons in the Bahamas while photographing coral reef.

3
0:34:41
Woo!

1
0:34:42
Man, I just described that whole image real quick like. That gives Google screen readers a lot of really good information to chew on. I’m going to say no caption for this particular photo, and then I’m going to go ahead and I’m going to hit save. Okay. Now we can actually do the overlay text with the fig caption. Nah, that’s, that’s more fire hoses. Okay. We’re just going to do normal text and keep it simple. Now notice that the image here is actually making this container taller. Because it’s a real image, it’s moving other things around, right? I can make this behave though, as a background image, by changing its position to absolute, all right? So what I’m gonna do here, is I’m going to, and I know we haven’t done absolute positioning, relative positioning, or anything like that. We’re gonna do BG image, double underscore image, just like this, we’re using BIM, okay, for our class structure. And now what I can do is switch this to position absolute. And what you’re probably going to notice is that it breaks out of the container. It gets all out of whack. And if I do like a hundred percent width on here and I do a hundred percent height on here, my gosh, the bad things are happening. Bad things are happening. And now all the beginners are sweating bullets. They’re just, they’re like that, the pilot in airplane. Don’t worry, it’s so, this is, this stuff becomes second nature to you very, very, very quickly, okay? Right now, this is happening because nothing is containing this image. I need my real image container to contain this absolutely positioned element. I do that by setting the position to relative and now look, things are starting to take shape, more or less. But I do have a new problem, the image is being stretched, okay? I can use something called object fit in order to finish making this image behave like a background image. So I’m gonna go to the image itself, BG image, image, object fit, cover fixed, okay? Now this image is a real image, but it behaves like a background image. I can even change its object position. I can say 50%, 100%. That’ll show me the bottom of the image. I can do 50%, 0%. That will show me the top of the image, just like background images works, okay? I’m gonna say 50, 50, because I want it to look exactly like this version up here. And let’s go ahead and save. Now, what are we missing? We’re missing the overlay text and the darkened overlay. Well, the overlay text is no problem whatsoever. I can still, I’m still working within a container. I can still just add text, and I already have a class called overlay text. So I can just go ahead and put that in, but you do see, I’m gonna call this snorkeling lessons, and you’re like, where is it? I put it in, but I don’t see it. Well, our image is actually covering it up. So I need to do a step of telling our image to be in the background. Now, we’ve talked about axes before, the X-axis, the inline axis, the Y-axis, the block axis. We also talked about at one point earlier in this course, a Z-axis, which goes from your eyeballs straight through the computer screen in the form of layers. layers, right? So I need to put this image on a bottom layer using Z index. So I’m going to go ahead and go to style layout, Z index, minus one puts it on the bottom. And now you can see our text. Okay. Now I can grab my real image container. Then I can go up to style. I can go to layout. I can do my same padding on all sides. And Ooh, what is going on? Let’s go back to our image and see that we missed a step. Whenever you absolutely position something, and again, we’re going to cover this in more detail on a future lesson. You have to give it coordinates. I want it to attach to the top of that container and to the left of that container. And now everything is positioned properly. The only thing we’re missing is the darkened overlay, which we can easily create. So now I’m going to come in and I am going to add a div and we’re going to call this overlay This is not the only way to create an overlay by the way But it is a beginner friendly way to create an overlay. All right, and we’re going to call this beach We’re going to call this real image double underscore overlay and we’re going to position this absolute as well So absolute and here’s a trick top right bottom left We’ll make a div the exact size of the container that you’re working on and now we can add a background color to it So we can add that same dark we can drop the opacity down But we see this. Oh, no, it’s covering the text z-index to the rescue Minus one z-index and now guys check this out. We have an exact replica I’m using a different overlay color a little bit but an exact replica. Big difference though, inspect this one. No data, zero data other than the snorkeling lessons paragraph. Inspect this one. We have open the div. Oh, there’s a figure. Open the figure. Oh, there’s a real image with source set with an alt tag. It’s wrapped in a figure tag. It’s like, there’s so much more going on here. This is the proper way. This is the non proper way. This is the chump way. This is the pro professional way down here. Okay. So I wanted to make sure that you understood how to accomplish that again, absolute relative positioning. We’re going to cover again in a future tutorial more in depth, and that’s going to help you out even more. But this is going to be part of your homework today. You’re going to be able to follow along with this video and hopefully make this thing happen right here. Let’s talk about additional mistakes to avoid with your images. Number one, do not use a design tool to add accent items or background colors or gradients to transparent images. Never ever ever ever ever do that in a design tool to manipulate an image’s saturation or opacity or crop aspect ratio blur, border radius, contrast, or anything else in that family of visual controls. Always use CSS instead. Don’t group multiple images within a single image file. People do this all the time. Excuse me, chumps do this all the time because they don’t know how to position individual images. So they drag them into a design tool, position them, and then export it as one image and just upload a single image. Oh my gosh, absolutely felonious behavior, 10-year minimum sentence, over to rehab, do not do that. Same with adding text to images, 10-year felony minimum, off to rehab, never add text to images. It doesn’t scale properly, can’t be read. If you ever change the font, the font in the image is not going to change. Bad, bad, bad, bad, bad, bad, bad. Do not do it. I will wet noodle you all day long. 100 lashings with a wet noodle every time you do that on top of your 10 year felony. In fact, 100 lashings daily with the wet noodle for all 10 years of your prison sentence and then on into rehab as well. Okay, don’t use copyrighted images. We already talked about this. Always use original images or royalty free images. And last but not least, don’t use images for design elements that can be accomplished purely with CSS. Remember back in a previous tutorial, those chumps on that landing page, they used a transparent PNG blurred colored blob. It was like 500 kilobytes just for a background blur type thing. And I was like, what kind of chump behavior is this? And then I made the exact same effect purely with CSS pseudo elements, no 500 kilobyte PNG file, no nonsense, no shenanigans, just professional behavior, right? That’s what I did with pure CSS. If it can be done with pure CSS, my friends do it with pure CSS. Okay. Your homework one, download a full resolution image from unsplash.com. Whatever you want to work with. Doesn’t matter to me. You choose. Number two, pre optimize the image with squoosh.app. Number three, upload the image to WordPress. Number four, organize that image with happy files pro. This is kind of a bonus step. Number five, recreate the overlay image from above. You need to create the real overlay. In fact, I want you to do both versions. Create the wrong version and then create the right version, just like I did here. Okay? You can use the whole same theme if you want to or do whatever you want. Go off the beaten path. It’s up to you. Up to you.

2
0:43:36
Just do your homework.

1
0:43:37
Okay? Make sure the image is using source set. Make sure the image, the real image has an alt tag. Okay. Make sure it’s wrapped in a figure tag. Absolutely fantastic behavior. Number seven, make sure the image is being served to the visitor dynamically as web P you can use short pixel to do that. If you need help with that, because I know we didn’t dive deep on that in this particular tutorial. My, my inner circle is happy to help you. Either myself will jump in or any of the numerous amazing people in there. There’s over 1,200 people in there now. Experienced developers and beginners alike. It’s a fantastic mix all over the world. You post something, people will jump in and absolutely help you pretty fast, pretty fast. But you gotta be a member of the inner circle. Links to all this stuff is down below or you can just, you know, I don’t know, maybe ask chat GPT. Like it’s up to you. But find a way to serve the images dynamically as WebP. You can’t just upload a WebP version and serve that because that’s not how this is done. It’s got to be dynamic based on their browser or device. That’s why I recommend ShortPixel. All right, that’s it for this. This was the fundamentals of images. I hope that you guys learned a lot. If you have any questions, drop them down below in the comments, make sure you hit like on this and I will be back very soon with the next make sure you hit like on this and I will be back very soon with the next lesson in the page building one-on-one series. Peace.

 

My Cart
0
Add Coupon Code
Subtotal