 How's everybody doing this morning? Excellent. For those who don't know me, by now, my name's Steve Mordechoy. I work for Semper Plugins. We're developers of all-in-one SEO pack and some other plugins out there. One of the co-organizers of WordCamp Rally for the last nine years. And today we're going to talk about images. So what we're going to cover is what you need to understand when embedding an image into a post to a page or any other content on WordPress. And really why we're going to do this is because it's so easy to add an image to content that we sometimes forget that there's some things we need to think about. We need to think about performance. We need to think about SEO. So in this session, we're going to cover those topics. So we're going to look at image optimization, image SEO, images in social media. And then performance. So I'm making sure that when you add an image, it's not going to slow down your site. So we're all familiar by now with the image embedding dialogue. So when you click Add Media on a post to a page or any other content within WordPress, like a product or whatever, then we get that add media dialogue. We can drag and drop an image or multiple images into the dialogue or select images that are already in our media library. But again, we're doing this possibly without thinking about SEO, image file size, image file names, dimensions, all these sort of things. So you sometimes forget that embedding an image might slow down that page load and cause you problems. It might extend beyond the content area and it's too large in dimensions, extend beyond the content area into a sidebar or something. So it's important that when we do this, we understand what we're doing. So the first thing to consider is file type. Familiar with JPEG, PNG, GIFs, all these different types of files that we can use, image files that we can use. But how many people know the difference and what type we should use for what image? So let's cover these. So JPEG, for images in content, photographs that you want to put in, this is the best file format for you. It's great for color images. It's great for photography. It's high def, small file size. PNG, great for graphics. Things like logos, theme backgrounds, things like this, especially for something like an image where you want a transparent background. So a good example would be a logo where you want your logo with a transparent background so that the background of the page shows through. And then GIFs, or GIFs, whatever you want to call them. GIFs are great for animated images. So if you're trying to demonstrate something to a visitor to your page or post, you can create a little animated GIF for that. File size. So this is where we run into the biggest problems. We've all got devices like these nowadays where we can take really, really high quality images. But the problem is it's taking an image from a device like this that file size, the size of the actual file itself, the JPEG or PNG file, is huge. I mean it can be 10 meg in size if it's like a high-def image. So what we want to do is obviously make sure that before we upload that into WordPress, we resize that image so we get that file size down as low as we possibly can. And really what we're looking for is kilobytes instead of megabytes. If you're seeing an image that's 1 meg, 2 meg, 10 meg, you need to resize that. You need to be down in the KBs. And you also need to think about how many images you're putting on that page. Because if you're uploading multiple images and they're all large, you're increasing the size of the page load and therefore the speed. Dimensions. So again, we want to think about the width and the height of the file size, so the pixel width and pixel height. If we've got a 600-pixel-wide content area, we don't want to be uploading 1,000-pixel-wide images. There's no reason for that. It's going to potentially extend past that content area. In WordPress, we can control the size of the default images and set different sizes within the settings media screen and the settings media. And you'll see that there's some default image sizes in there. So you'll see a thumbnail. You'll see a medium and a large. But your images may not end up converting to those sizes. So just because you upload an image, let's say that image is 800 by 600 pixels, WordPress can't create a large image which is 1024 by 1024. It can't size up an image because what would happen is it's going to distort and stretch that image and lower the quality of the image. So all it can do is create smaller images than the pixel size you've uploaded. So again, from 800 by 600, it can create a medium-size image which is 300 pixels wide, and it can create a cropped thumbnail which is 150 by 150. When I say cropped, it's important to understand that. When you choose a thumbnail, WordPress has automatically cropped that image for you. But WordPress doesn't know the content of the image. So it's just cropping the image based on what the code says within WordPress. It's not looking at the image and going, that's a picture of three people's faces and intelligently cropping it so that all you see is the faces. It just doesn't know that information. So it's just cropping it. And what you might end up with is an image that's been cropped incorrectly. When you edit an image on the page or post, you'll see that you can actually set a custom size. So you can choose from the sizes of images from WordPress that you can embed. So you can choose a large image if that's available. You can choose a medium image or you can choose to embed a thumbnail image in your page. But you can also set a custom size as a width and a height in there. So you can then control that and set, OK, I don't want a 300 pixel wide image. So I want a 400 pixel wide or my content space is 600 pixel wide. So I want a 600 pixel wide image in my content. Again, just remember WordPress is, you don't want to size up the image because you're going to stretch the image. It's going to distort it and lower the quality. So you want to only deal with images that you're sizing down. So that way, you can upload large pixel size images, 1,000 pixels, 1,200 pixel wide, 2,000 pixel wide images, and then you can size down and only embed the size that you want and control that through custom size. Resolution. So this is the one thing that gets a lot of people confused. There's DPI, PPI that we see for Resolution. So Resolution, DPI, PPI only applies to printing images. When you print an image on a piece of paper or a poster or whatever it is, that's where those are used. It has nothing to do with the display and the quality of an image when it's embedded on the web. This means that what we can do, and typically what a lot of compression software does, is it lowers that DPI. So you might have an image that's 72 DPI or greater, and you can reduce that DPI, the number of dots, pixels per inch. And it won't affect the quality of the image being displayed on the web. It would only affect the quality of the image if it was being printed onto a piece of paper. And if you want to read more about the myth of 72 DPI, there's a couple of links there where you can just Google the myth of 72 DPI. But it's something to bear in mind because, again, there's a lot of confusion over, well, I need to set the DPI of my images really high to get good quality, high resolution images. And we don't need to do that. So I said earlier that one of the things we forget is the number of images that we upload to our page. We might be embedding a gallery, and we want a slideshow or a gallery on that page with lots of images. Or I deal with a lot of photographers where they have a blog post, and they'll have 30 images of a wedding or an event on that post. And each of those images has been uploaded and potentially is a very large image, especially an idea with, like I say, photographers who are using Nikon or Canon high quality cameras where the images are like 10, 20 meg in file size. And if we were to upload 30, 10 meg images, that's 300 meg. That's a lot of files to download. And especially if we're on a mobile network where the speeds are slower, I mean, it's going to take ages to load that post. So, again, when we are thinking about creating a content and embedding images, what we want to do is remember how many images am I uploading? What's the total file size? If they're all 100k and I've got 100 images, then we're still back into that 10 meg range. So we can also look at using tools where it only loads the image when you get to that slider, when you get to that image in the gallery. Good example of those are the image galleries that you can get in Jetpack, the tiled gallery in the Jetpack carousel and Jetpack slider. The image is only, it's not loaded at page load time, so it's not slowing down the page at the initial page load. It's loading the image when the image is viewed. So that makes a huge difference. There are other plugins that do the same things. And again, you want to check with the plugin developer or if it's functionality or the theme, is it doing lazy loading where it's loading the image when you get to the image, when the image is actually being viewed and not at page load time, potentially slowing down that initial page load. Image linking. So we've embedded our images into our post to our page. And one of the options when we edit the image and when we embed the image is where we can link that image to so that when the page or post is being viewed, you can click on that image and load either the media file, that's the PNG or the JPEG image itself. It'll load an attachment page. It'll go to a custom URL or nothing at all. It doesn't do anything when you try and click on the image. So let's look at the difference between these. So selecting the media file tends to be a lot of people choose this option. And I want to caution against this because what happens is that all it's doing is loading the JPEG file in the browser and so you get to mydomain.com slash page name slash image file name or slash uploads, wprecontent slash upload slash year month and then my file name dot JPEG. And that's just an image. So when Google looks at that, when it follows that link from that image, it just sees a file. It just sees a PNG file, JPEG file. It doesn't see any more information. It also means that for the user, for the visitor to the site, they have to use the back button to get back to your postal page, which is never a good thing. So there's really no more intelligent information that we can do when we link to a media file. An attachment page, on the other hand, is an actual post type in WordPress. You're familiar with post types in WordPress. Really, they've been badly named. We go back to the original days of WordPress. They called them post types. What they should really be called these days are content types. So you have posts. You have pages. You have custom content types, products, FAQs, testimonials, whatever you might have. These are different types of content. Well, an attachment page is a content type. So what happens is that you could have a theme PHP template file in your theme that you could style and you can put information into there. It's a page. It loads as a page with your image in there. So you could have navigation. You can have a back button. You can have links onto other pages. You can have EXIF information. You're familiar with EXIF data. So when you take an image on a camera or a photo on a phone, you're going to get information about that image. So information is stored such as the resolution of the image, the size of the image, where the image was taken, what location. So we're in Raleigh, North Carolina now. If I was to take a picture of you with my phone, that location information is stored. And you can see that some websites, they can use that information to display those images as dots on a map. Another piece of information that it stores is the device that the image was taken on, Canon, whatever camera, or Nikon D51 camera. So we can use that information to provide rich content to our customers. So we can display things like, as I say, the location of the information. What we can also do with an attachment page is we can add SEO. So we can add information such as an SEO title, an SEO description, and we can add other meta tags. No follow, no index, things like this. So we can do a lot more with an attachment page. And by default, an attachment page is fairly unstyled. But within our theme, we could also style that attachment page. I've seen some great photography websites where they've done some really nice-styled attachment pages, and you wouldn't know that you're on an attachment page. You would think that you're just on another page on the website that's providing this beautiful, large image, high-definition image, with lots of nice, rich information. And Google will see that and index that attachment page and call that information. Custom URL. A good example of using custom URL would be we've got an image of a button. So there are a number of different button generators out there on the web, just Google Button Generator, and you'll find a whole bunch of them where you can go in and you can create a button. You can put in the text that you want on the button. You can choose what you want, radius, curved borders to the button. You can choose what color the button is. And once you've created that, it downloads as an image. Well, this is a perfect image where we can upload it into a page or a post, use custom URL to link it to our contact page. So we can create a button as an image, JPEG, or PNG image, put the text on that button when we create it as contact us and make it a nice green color to encourage somebody to click on that, upload it, link it to our contact us page. So that's a good use of custom URL. If there's no reason for somebody to click on the image, then just choose none. If it's a large image, again, you've got a 1,200 pixel-wide site and you've got a nice big, wide image in there that's perfectly formatted and sized for your content, there's no reason to click on that. The only reason might be if you've got a small thumbnail image and you want somebody to click on it to see a bigger image. So if you've got no reason to have somebody click on that image, just select none. Image ownership. So this has become a big problem over the last few years as big companies have started going after small websites that misuse copyrighted images. So when I take a photograph with my camera, that image belongs to me. It's my copyrighted property. I can put it on my website. It can show up in Google Search and Google Images. And you can easily find that image and download it and put it on your website. But it's my property. It's my licensed copyrighted property. And I could go after you and say, listen, you're using my copyrighted property. So ownership is a big thing. Understanding whether you can freely use that image, whether you have to pay for that image, or whether you have to attribute to that image. What is the license that covers that image? Just because it's out there on the web doesn't mean you can download it and use it. And I get this question a lot again from photographers where they upload beautiful images which they might want to sell or copyright. And what I want to know is there weren't some way to stop people downloading and stealing my images. And a lot of people will go, well, can I stop right-click so I can do right-click on the image and save as? The answer is no, you cannot. If you put it on a website, you cannot stop somebody from downloading and taking that image. Yeah, yeah, exactly. There are some free ones. Yes. Yeah, so Google Images now, when you search for an image in Google Images, you can find the license information. It can be a little bit tricky. Sometimes it'll say it when you click on the image. It'll tell you whether that image is copyrighted under what license it's copyrighted under, whether you need to attribute that image or what. But sometimes it can make it a little tricky to find that information. One of the best tools out there, so one of the most common free open source licenses to use for copywriting images is Creative Commons. So there's a search.creativecommons.org, which is a tool where you can search for an image across multiple platforms, including Google Images, Flickr, and various others. And you can put in, you know, I only want free images for non-commercial use. So I want to find free images for commercial use that I can use on a commercial website. Now, there's two big distinctions. Just because it's free, if they mark it as for non-commercial use, and you're trying to use it on a commercial website, you know, then you have no rights to that. It also might say whether you need to attribute the image. So what that means when you see attribution is I can use that image, either for non-commercial or commercial use, as long as I say underneath the image, this image belongs to and is the copyrighted property of, you know, Steve Mortiboy or whatever it says in there. So you can see that information when you use that search.creativecommons tool. The other thing you can do is you can look at stock photo sites. So there's some free stock photo sites out there. There are obviously the big ones like iStockPhoto and Photolia where it's paid. Yeah, so let's look at that. So let me pull up the browser here and hopefully I've still got an internet connection. I can't find my... Okay, so let's look for... So what we're talking about here is under tools labeled for reuse. Labeled for reuse, but I can modify the image so I can take that image. I don't have to take it as is. I can modify that image. Non-commercial use and yeah, non-commercial with modification and non-commercial with known modification. So we can therefore search for let's do reuse. So this is commercial use with modification. Again, I mean that information should be correct and you'll see the little image may be subject to copyright and occasionally it might say in here what the license is. It doesn't in this particular instance, presumably because the source doesn't say, doesn't have that information, haven't provided it to Google, but we can also go here and see if there's any information about what license they're using and no attributation required, free for personal and commercial use. So that information is all there. We had to find it, but it's really important to do that. I usually put it in the caption or just underneath. So again, if I have a question about that, if I'm concerned that I would contact the image owner and no, it has to be visible on the page. It can't be hidden in the source code. So if you put it in the alt text, it's only going to show up in the source code or to screen readers. It has to be visible on the page that you've done that. So this is important again, but if you have a question about something like that, contact the image owner. This again is one of those sites where there's plenty of images on there. You can search for images on pixels and find free images to use. A word about stock images though. Stock images have been done to death. If you can avoid it, please don't use stock images. You'll find any reputable SEO consultant now will say or anybody in the SEO industry that writes about Google and Bing and SEO says, just please for God's sake, don't use stock images on your site. Get custom images done. If you can do the photos yourself, great. We've all got phones that take high quality images now. If it's product photos, hire a product photographer if you're running a restaurant and you want your food photos beyond your website, get somebody that specializes in taking good quality photos of food. It makes a huge difference. I mean, if you go to a food website and you see some generic picture of a hamburger, a lot of times you might realize, okay, that is a generic picture of a hamburger. It probably doesn't look like that when I order that hamburger. And we all hate that. We all hate that. Never looks like it does in the image. But if you are, we did a site for a barbecue company and they got a really good product photographer to take high quality photos. It made the world of difference on their website. I mean, you go to their website and like, I want to eat that. So I always say about the stock photos, deal with a lot of business websites where it'll be the guys looking at a whiteboard and pointing or people sitting around at a boardroom table. It's like, oh, God. It means nothing to the visitor when you see something like that. A good quality image that you've taken that is relevant to your site and your content makes a world of a difference. Any more questions about image ownership? Something you need to think about every time you see those images online. So next time you're searching for image, just be aware of that and always check. All right, so we've got our images. The next thing we want to do is optimize that image. So there's tons of different tools out there that'll help us to do this. There are some tools within WordPress for this, plugins. There are some external tools that we can use. So a common one would be Photoshop, Adobe Photoshop. It's paid software. You may or may not have it, but you'll notice that when you save an image in Photoshop, one of the options is save for web. What that is doing is it's compressing the image down to a size that is suitable for a website. So this is, again, file size. This is that megabytes versus kilobytes. And there's a couple of ways that the software does this. One is lossless compression and one is lossy compression. So lossless is where it compresses the size of the file without reducing the quality of the image. So it will do things like reducing the DPI, maybe resizing the image. So you've got a 10,000 pixel wide image and it reduces that down to 2,000 pixels wide or less and that cuts the file size down enormously. Lossy compression is where it reduces the file size but with potential loss of quality. A lot of people get a bit worried about this. Am I going to see a big quality loss in my image? Most lossy compression these days is so intelligent and so good that you barely see the difference between the quality of the images. I mean, you have to look really, really closely on a really high definition computer to see the difference. So you can do lossy compression and likelihood is that you can't tell the difference between the original image and the loss that the compressed image. Again, our goal is to get it down to a smaller file size as we possibly can. 100K if we can, 10K if we can, you know, as small as we possibly can. Again, if we're uploading multiple images, if we've got a post, like I say, with wedding photographer where they're doing a post with 30 images of the wedding, you know, that totals up. So you want to get those file sizes right down. The compression, the amount of compression you're going to get is always going to depend on how the original image was created, what the device was created with. Yeah, it's not going to strip a lot of information, but yeah, you can do that. And there are some options, you know, some of these tools, there are going to be options. Some of the options and settings are going to be quite complex and you may not understand them, but there's going to be a default setting that you can just run that image through and you're going to be perfectly fine with it. So you don't necessarily need to know a lot about image compression to use these tools. So I said, you know, Photoshop is one, using the Safer Web, you'll see that in other image editing and design tools where you'll see Safer for Web as one of the options. If you are uploading an image to the website, that's the option you want to use because it's going to do that lossy compression. Some online tools, Image Optim and Tiny PMG. Both tools that I've used, both good tools, you can run your image through that first before you upload the image up to your website. JPEG Mini. And then plugins like EWWW, WP Smush. I think there's another one called Compress PNG or Tiny PNG, but if you go in the WordPress add new plugins or on the plugin repository on .org, you can search for these types of plugins. And again, with these, it's running on your website so every time you upload an image, it'll compress it at that point when you upload that image. You can also run it through your website and it'll run through all the images that you've already uploaded. So if you've got a mature website, you've never thought about this before and you've got a thousand images on there and you're like, oh, this sounds like it's going to be a lot of work. No, because you can install one of these plugins and it'll say, do you want to optimize the images in your media library? And it'll run through and do that. It'll compress those. Is it always a best you have? I tend to do that and then I always have one of these plugins installed and active on my site. So it's running through it twice. I'm running through it before I upload and then running through it again when it's uploaded. Yeah, so in EWWW, and we can look at this on your site here so you can see what it looks like. Let's do a live demo here and see if it works. I can't put my mouse gone. Let's do 600,000 active installs. So you can tell it's a well-used plugin. It's been around for a long time. So now I've installed and activated that plugin. You'll see here under media library, I've got bulk optimize. If I also go to my media library, it may or may not. It doesn't say there, but it may say, yeah, okay. So it says optimize now or I can go to bulk optimize and it'll tell me, you know, I've got scanned for optimized images. I've got 202 images that haven't been optimized so I can optimize them now and it'll run through and it'll run compression on those images. And now I've got nice optimized compressed images. So it's a nice easy tool to run. If you've got tens of thousands of images, then this might take a little while. You might want to leave it alone for a few hours, but you know, 200 images, it's taken a matter of seconds. Sandy. Yeah, like if you've got a site right now with 10,000 images on, you can install this plugin, you've got a bulk optimized and run it right now, just like I did. So that's definitely something you want to go home and, you know, start looking at those plugins and look at trying those out, playing with them and look and see what happens. Just bear in mind, of course, that you may not see the actual file size. Let's just have a look, see if we can get that information up on the screen for you. Let's have a look, see if we can see in the media library, if I click on an image, see there, is that 137 kilobytes? Yeah. Excellent. So that's now the size of our image. Sometimes you may not see that, but it looks like that information is stored by default displayed in the media library. But you could easily look at, if you know how to do an FTP to your server or use file manager in C-Panel on your hosting platform, you could look at going in there and looking to see what the size of your uploads directory is. So you can see, you know, do I have an uploads directory that's a gigabyte in size? And, you know, I've got a thousand images in there that's potentially, you know, every image is far the large. So I need to optimize them again. But that's a useful tool to know about and I certainly recommend, you know, going ahead and doing that on your sites when you've done today. So Retina. So we now know, you know, a lot of screen devices, you know, like these, we're getting these new, you know, really high definition screens. I've got a MacBook here and an iPhone and an iPad at home, all got a Retina display, high depth screen. And when I look at an image that hasn't been prepared for a Retina screen, it just doesn't look as clear and it looks just a little bit distorted low quality. So one of the things we wanna do is think about Retina screens. We want our images to look really, really nice and crisp on these modern screens. And we can use a plug-in, WP Retina is one of those. If you go again into the .org repository and search for Retina, you'll find a bunch of others, one I've used in the past. And what that'll do is it'll enable you to create and use Retina images on your site. So what these are doing is basically Retina images double the quality of a normal image displayed on a normal screen. So we can see there, we can use HTML to do this. So in our HTML, we can upload an image that is 800 pixels wide by 600 pixels tall and then we can constrain the height down to half of that. And what happens is when it's loaded on a Retina device, you get that double quality, that high quality image. We can also use SVG. SVG images aren't supported natively in WordPress. There's some code you can do to add support. I believe there's also some plugins that you can do to add support for SVG. I personally have had a lot of problems trying to use SVG images on websites. So I tend to go with the easiest method which is usually a plugin. So now we've got our images in there. We've thought about licensing. We've thought about attribution. We've thought about quality and file size. Look at SEO. So images are great for getting people to stay on your page and look at your content. If you've got a post that's a thousand lines long and it's all boring text, long paragraphs, what's gonna happen, somebody lands on that from Facebook or Twitter or Google search, they're gonna see that and it's natural human behavior. We've all done it. We get, there we go. I'm not gonna read that and I'm going to bounce off. And I'm going to go to the next search results and click on that until I get something that's more engaging. So immediately an image engages us seeing that nice quality image that's relevant to the page or post that we're on. It's sticky. It makes us stay on the page. It makes us scroll down. It makes us consume the content easier. Breaks up that long form content. So we know that images are great for getting visitors to our site and keeping them on our site. But what we also wanna do is we want to optimize those images for search engines. And images are great for getting additional SEO, on-page SEO done. So one of the first things we need to understand is image file names. If I take an image with this camera right now with my Nikon, I'm going to get a file that's got some weird random name. Means something to Nikon. I mean something to Apple. But it doesn't mean anything to me and it doesn't mean anything to you. Might be DSC-00093.jpg. That doesn't tell me anything about what the image is. If I take an image and it's called that. So the first thing I want to do is when I have that image on my computer, rename the image. If you're about to upload this image to a page for WordPress development services, rename the image to WordPress-development-services.jpg. Use, you know, if you're optimizing a page or a post for a specific term, use that term as the file name for the image. I tend to avoid underscores and use hyphens instead of spaces. Naturally, Unix Linux-based systems will, when you upload a file name that has spaces, it'll replace the spaces with hyphens. So for me, it's just a personal preference, so. But I, you know, as a rule of thumb, I don't use underscores in file names. Not really, I mean it's just good practice and say I tend to do that and a lot of people, you know, would win. Really? Hmm. Some search engines, first, but they like dashes to separate words, it makes them easier to find. Also, if you are gonna be the ones who are changing it, they can double click on a word to select the whole one. A dash will separate a word, but a underscore will grab everything. Yeah, I mean, can you see this with URLs? If you have a page or post you create, when WordPress creates that permalink, that slug, the URL, all those spaces in that page title are replaced with hyphens. They're not replaced with underscores, so when you look at a URL, it's always hyphens. You really don't see underscores in URLs. Just right click. Just remember you cannot rename the image once it's in WordPress. There's just, there's no way to rename the file because it's stored in the server file system, Linux or whatever you're running as your server, Windows or a Linux file system, and so WordPress has no access to rename that. The only way you could rename it is to FTP into the server and rename it that way, but then you break the connection between WordPress and the file. So, only way to rename images is rename them on your computer before you upload them. If you've got a mature site and you've got images on there now, and you're trying to think about SEO on your site, go through your most popular pages, first of all, the most important pages on your site, download those images, rename them, re-upload them again. I know it's a pain, but again, file names are very, very important to search engines. If you're using the same file on multiple pages, upload it multiple times with the file name different. So, in theory, you really don't want to use the same file, the same image for multiple pages. You want a specific image specific to that page. You don't want a picture of a burger on a page that's all about desserts, so it wouldn't make sense. But there are going to be times when you have the same image, you're re-using over and over again. The mistake that everybody makes is the images in my media library, I can easily embed it by clicking Add New and just selecting it from my media library. That could be the image that I renamed for this specific page over here. So my example of WordPress Development Services, if I've got my image, I've uploaded to my WordPress Development Services page, and I've called the image WordPress Development Services, and I go and re-use that on my WordPress Design Services page. The image is optimized for WordPress Development Services, it no longer makes sense. Google's going to see that and go, well, what gives? It's not, you haven't done proper SEO optimization. So rename the image, re-upload it to use on that specific page. Make sense? You would, so for your front page, you're optimizing it for whatever your website's about. So it's your business, it's usually your business name, and maybe a general description of what your services are. So you would rename those images for that. It's a lot of work, but nobody said SEO is easy. This is how you do things properly. When you upload an image into WordPress, it can set a title, an attribute, and an alt text. Again, you can set these on each post or page. So when you embed an image, again, get back to my example of WordPress Development Services, I'd want to set the alt, tag, and title attribute for that page. Again, optimize that image for that page. Just bear in mind, if you are dealing with ADA compliance, alt text is used for screen readers for people who are blind and need the screen reader to interpret the content on the page. So really the true method of using alt text is to describe the image. But again, if we think about what we're using the image for, to describe our page or to optimize our page for a term, then if you're using a relevant image, not some person pointing at a whiteboard, but you're using a relevant image, then describing that image in the alt text works for both screen readers and for SEO. You can use attachment pages again, yes. And no extensions for browsers. Chrome has a really good extension for monitoring and measuring ADA compliance when you load a page, so yeah. By the way, that's it, yes. So the next one is if you're going to link an image, use attachment page. Again, you style that attachment page. You can add the SEO title, SEO description. So the attachment pages are going to be useful for SEO. And finally include your images in your XML site map that gets submitted to Google. A good SEO plugin like all in one SEO that we do, automatically includes your images and automatically submits those to Google and Bing for indexing in their image search. Images for social media. So we all know the importance these days of social media and good social media marketing. And part of this is when we scroll through our feeds, whether it's Twitter or Instagram or Facebook, it's catching somebody's attention. There's a lot of information that we're consuming. We don't have a lot of time these days. Our attention isn't that great. So we tend to scroll through a feed and we stop when we see something that catches our attention. So really good, high quality image can really help to get that click through on your social share. So this is just, you've created a post and you've put it out there on your blog and people are liking it or tweeting it, sharing it with their friends or just copying the URL for that blog post and posting it in their Facebook page. You're going to get a social share and you want it to look nice. So you can use SEO plugins like All-in-One. Some themes would do this, although I would say it's not the remit of a theme to do this. It's the remit of a plugin. You want to use a plugin to be able to control this, set that image. You'll find the big media publishing houses. They'll create a custom image that's correctly sized just for social shares because it makes a huge difference. It catches that attention. It gets you to click on that, brings that visitor to your blog post and they want to read your content, potentially share it with their friends. So there's some things that we need to understand. One of those, which we get a lot of questions about, causes a lot of problems, is that social share information is cached by those social networks. So when they find or call your content or get notified about your content when somebody likes or tweets or shares, posts the URL onto Facebook or Twitter or LinkedIn, that information is grabbed from your website, from the source code, and then cached, stored for seven days. Some, some, and I'm really just referring to Facebook here, have a tool where you can go in and you can force them to clear that cache. It doesn't always work, but other social networks make it really, really difficult to clear that cache. Twitter, LinkedIn, to examples, it's really, really difficult to get them to force clear that cache. And that causes a problem because you might see the wrong image. You set this nice, beautiful open graph image but Facebook hasn't picked it up, showing the wrong image or it's not showing any image, showing some problem, little thumbnail, whatever, and you want to get them to fetch the correct information and use that for social shares. And so the only way to do that is to go through the rigmarole and to force them to clear their cache. Facebook makes it a little bit easier for you, unfortunately the rest, it's nigh on impossible. All the social media networks have rules about file sizes, so you get that nice looking share instead of some little thumbnail. These are the current file sizes. Again, you can Google, open graph is what it's called, open graph, OG or open graph, image sizes in 2018 and you'll see a list of what the current sizes are for images within content for social shares. We tend to do a lot with Facebook, so we do 1200 pixels by 630 pixels for all of our shares. We get that nice looking, big, wide format image on Facebook and that tends to work well for Instagram and Twitter. Pinterest, of course, the images are vertical format, portrait rather than landscape, so it's a little bit more difficult with Pinterest. So finally, we're gonna talk about caching. So caching and content delivery, CDN. So if you've got a site that's still performing slowly and you wanna look at these things on your phone as well as your desktop, you might browse your site on your desktop and go, oh, that's loading nice and fast. It's loading within two to three seconds, but then you get on a phone and you do it on a 3G or 4G network in a slow part of the country and it's loading really, really slowly, that's gonna affect your visitors. Nobody's gonna wait for your images to load and your page to load. They're gonna just click back and go to your competition. So one of the things we can do to speed up image delivery is Jetpack Photon. It's a really good tool. I believe it's paid service, but what it is is content delivery. So it sucks down all the images from your site and it delivers them to the visitor from what's called a content delivery network. So it's a much, much faster way of delivering images. Caching is another thing we can do. These performance plug-ins like WP Supercache, W3 Total Cache, there's tons of them out there. I tend to use WP Supercache because it's developed by the WordPress.org team. I have a question. Yeah, so we could have a completely separate session about caching. Installing a caching plug-in, people think, oh great, this is gonna speed up my site, but you get this problem where it's actually competing against the caching that's going on on the server side and you may not know what caching your hosting company does. You might phone up support and they don't actually know what caching they're doing. It's until you get to speak to somebody at a second or third level that they can say what caching they've set up on the server and even, again, it may be set up incorrectly. So typically you wanna check documentation for your hosting if they recommend a specific plug-in, if they recommend specific configuration of a plug-in. They might say, well, install WP Supercache but configure it these specific ways. Turn on page cache but turn off database caching or object caching, because we're doing that at the server side. So yes, you can have such a thing as too much caching or caching conflict. So you always wanna check with your hosting provider. So Google Analytics and Yoast are two separate things but all in one and Yoast are both SEO plug-ins. You cannot run them on the same site. You cannot, because what you're doing is you're creating two sets of SEO meta that Google's then looking at and going, wait a minute, you've just duplicated the information it's potentially conflicting. So that just confuses Google and say, well, I'm just gonna give up and sorry, not gonna index your content or I'm gonna penalize you because you're doing something really, really wrong. So yeah, one SEO plug-in and make sure that your theme is not doing anything like SEO. SEO is the remit of a plug-in, not the theme. If you change your theme, you lose all your SEO. If it's in the plug-in, it's independent. You can change your theme all day long. Your SEO is still there. Well, you can. They have a hook where if you install all in one, we hook into Jetpack and we can deactivate their SEO. Sometimes that's not possible. So for example, themes, they might do SEO. That's something you'd need to be aware of and you need to contact the theme developer to find out how do I turn this off because I wanna do it with a plug-in. It's the same with social meta, open graph meta. A lot of themes will do it. A lot of other plugins will add open graph meta and if you wanna control that with an SEO plug-in like all in one, you have to know am I outputting multiple duplicate or conflicting open graph tags because then you have serious problems when you're trying to share information or when visitors are trying to like or pin or tweet that information. So you need to look at your source code and you can do a search for like OG colon and you can see I got multiple blocks of open graph tags and if you see one sets from all in one, you'll always see it says all in one SEO pack and then you'll see the meta from us. You may see a second block that may be coming from another plug-in. It may be coming from your theme. You have to troubleshoot that and figure out where it's coming from and turn it off if you wanna use plug-in to control that. Some alternates to photon. You could use Max CDN or Amazon Cloud Fund. These can get a little bit convoluted. So a lot of times, hosting companies like Bluehost or Inmotion will resell these services that have a preferred partner for CDN and you just contact your hosting company and say, hey, do you have a CDN service that I can use and they'll say, yes, it's gonna cost you this much or it's free or whatever and they can enable it. Just remember that caching and CDN is doing the same thing. It's caching information about your website so you make a change to your content. You have to clear the cache. You have to clear the CDN so that the new information is displayed in browsers. Otherwise, you might look at your site and go, well, hang on a minute, I changed that image but it's not showing up. I know I changed that image. I go into my edit page or edit post. I see I changed that image but when I browse to it, I'm getting the cached image getting the old image from CDN so you always have to force clear those. Yeah, and again, a lot of that can be browser caching. So remember, your browser as well does caching and some browsers do some fairly aggressive caching. Chrome used to have a big problem with aggressive caching of content. It's caching it locally on, if I browse to a site, it's downloading all the content to my local computer and it will pull that before it pulls new content from the website. So you might see what's cached on your local computer. You can use incognito or private mode or you can do that force refresh of your browser. You may have to do that a few times to get the new content pulled down from the website. Yeah, so there's browser caching. Some of these performance plugins like WP Supercache, W3 Total Cache do browser caching as well. So you have to clear the cache there, clear your cache in your browser. If you're running CDN as well, you have to clear the cache in CDN as well. So it's a lot to think about. And of course, there may also be caching going on with the hosting provider you have no idea about. Sometimes you might see some hosting providers have a little thing up on the admin bar that says clear cache. Some don't and so you might be refreshing and doing everything you can and you're still seeing the old content, the old image show up and it's because the hosting company is caching and sometimes the only thing you can do there is wait 12 hours to clear the cache. You can use Google Chrome or I tend to prefer Google Chrome in the inspector, there's a network tab and you can reload your page and it'll give you a couple of numbers down the bottom. I'll show you in a second, we need to finish up here. There's also PageSpeed Insights, it's a free tool from Google where you can test the speed of your page. You can use a tool like Pingdom. Pingdom will measure the page speeds on your site from multiple locations in the world. So you can see what's the page load time for customers in Germany and if you're a business that has customers in Germany, you can see, is my page speed slow in Germany? Is it slow in China or whatever? So let me quickly show you. Here the last thing I'll do is how to use the network tab. So let's just do this. I'm gonna right click, inspect. This is Chrome. There's that network tab. Now if I go to a post, I will see this waterfall. Looks all weird and a lot of information here but two numbers down the bottom. Content loaded in eight point, less than a second, 828 milliseconds and the full page loaded in 1.45 seconds. So that's very fast. Google says they wanna be two or three second page load times. So if you're seeing a page load time of five, six, seven, 10 seconds, you've got a problem and you can actually see from this waterfall what's taking time to load and so you might see that it's an image and that image is 10 meg in size. Okay, now you know I need to go back and optimize that image. And again, just remember that if I reload this page, I may get cached information but I right click, choose inspect. I'm now inspecting the source code of my site so I can do things like changing CSS. So if I go to network, go and load a page or post, I get that waterfall and down the bottom there, 805 milliseconds. Content load, page loaded in 2.3 seconds. All right, if you have any questions, I'll be over at the happiness bar for the next half an hour. My name's Steve Mortiboy. My contact details are here. I will be uploading the slides to slideshare.net and tweeting them out. Thank you very much.