Ashley Segura (00:00:00):
Let’s do it. Let’s get started [crosstalk 00:00:02]. As we’re getting started, if everyone wants to hop into the chat and let us know where you’re tuning in from. Today’s episode of SEO for Publishers, we’re going to be talking about image optimization and best practices for your images. With, of course, Casey Markee, Arsen Rabinovich, Andrew Wilder, and our very special guest and founder of the Tastemaker Conference Abbey Rodriguez is joining us today.
Ashley Segura (00:00:27):
So just a couple technical things. As always, we’re going to be having an open Q&A at the end, so please feel free to drop any and all of your questions into the Q&A section. You can do it throughout the webinar, but we’re going to mainly be addressing them at the very end. And if you haven’t already, let us know where you’re tuning in from, and let’s get started.
Ashley Segura (00:00:45):
Very first question. Arsen, I’m sending it to you. Why do we even really need to be concerned about images when it comes to content? How can an image really improve a content?
Arsen Rabinovich (00:01:01):
So back in the day when we just invented SEO, I think Casey was four years old at that time, about 20 years ago. See, compliments, compliments.
Casey Markee (00:01:15):
Nobody believes you. Nobody believes you. You have to be realistic.
Arsen Rabinovich (00:01:19):
All right.
Casey Markee (00:01:19):
You got to say, look, you got to say early 20s, okay? That’s more reasonable.
Arsen Rabinovich (00:01:22):
Early 20s. Good.
Casey Markee (00:01:23):
Still not true.
Arsen Rabinovich (00:01:24):
You really don’t need an image. You don’t need an image. Like a page will rank without an image, right? Back in the day it used to be, Casey, 350 words, right, is a blog post.
Casey Markee (00:01:37):
Yeah. According to Neil Patel.
Arsen Rabinovich (00:01:39):
Yep. 350 words, and as long as you have your keywords in the title and the first 180 characters of the first sentence of the first paragraph, you’re good to go, right? Images contextualize content. Images create a better user experience, right? If I’m looking for something that’s super technical, as an example I was making some modifications to my bicycle in anticipation of this trip that I’m doing over [inaudible 00:02:02] Casey in the next day or two. I was looking for specific measurements for screws and how to tighten them and all of that. And there was no video, and there was a piece of content that really didn’t have images and was just like very technical, and that made it very difficult for me to consume that content and to learn from it. The user experience was really poor.
Arsen Rabinovich (00:02:23):
So images create a better user experience. They contextualize the content. And they add to it. They make it better. So do you need an image for SEO? Probably not. But everybody else is doing it, and it’s improving your user experience, it’s adding to the content. And Google is seeing this, it sees that there’s images, there’s videos, and it’s a better experience for the user, so the likelihood of that piece of content, that asset ranking higher than the piece of content that doesn’t have images is better for the post that has richer information.
Ashley Segura (00:02:57):
So it’s not a direct SEO benefit, but overall it has a ton of benefits to add an image to your content.
Arsen Rabinovich (00:03:03):
Yes. And also like discoverability, right? We’ve got to talk about discoverability. So it’s not just for the organic results. A lot of people do visual search, image search, which I do also. I’m looking for something specific that I can’t really explain it, I’m going to be looking for images, I’m going to look at manuals, I’m going to look at … just look for images. So discoverability of a piece of content is also going to heavily rely on the images that are there.
Ashley Segura (00:03:29):
That makes sense. Abbey, as a publisher, can you kind of walk us through what your process is for shooting images for a new piece of content? Arsen just broke down why we need them, but since you’re adding them, what exactly do you do first? And how do you conduct a like mini photo shoot?
Abbey Rodriguez (00:03:47):
Mm-hmm (affirmative), absolutely. So I come at it from the food blogging lens because I’m a food blogger. Obviously that is very specific to the types of images and process shots you are doing. But I think across the board, the first step is do your research and inspiration. Like know what people are looking for. What does that look like? I’m going to use food as an example. Like if I’m … I just made a really great pancake recipe. I’m going to go researching on, what does that look like? What is something that’s going to encourage a higher click through rate based on …? Because that looks delicious and there’s all those elements. So research and inspiration. I do that through magazines, cookbooks, restaurants, advertisements, Pinterest, just social media, Instagram, movies. I mean you can get a lot of different things from there. But the biggest thing I like to focus on first is my hero image, because this is going to be the main featured image that, specifically as a food blogger, I would be putting in my recipe card that’s going to go into the rich snippet.
Abbey Rodriguez (00:04:46):
And then from there, I compile a spreadsheet. So I usually allot time for a process shot. And so this could apply to something like fixing a bicycle as well. You have your hero image, and then however many steps and instructions you have, having a process shot for each of those. And so specifically like with a process shot that’s really complicated, I use spring rolls for example. That’s really messy in text and words to try to communicate that, so making it very visual.
Abbey Rodriguez (00:05:17):
And then in terms of the logistics of putting together a shoot, I put everything in a spreadsheet. So what I create is called a shoot resume. So I’ll have the dish, or the shot, or whatever that is if you aren’t food blogging specifically. The details, so any notes about what I want to make sure is in there. In my case it would be ingredients, but that would be any items or materials you need, props. I make sure I have the background picked out, and then the lighting, the composition, and the lens that goes along with the composition there, because you really want to focus in on that hero image being clear. You want it to be obvious. You want your eye to go directly to what you’re talking about, what you’re posting about. So that’s just a very quick way of describing the process for shooting.
Ashley Segura (00:06:06):
And that’s quite a detailed process, something that I’m sure took a while to figure out. How did you come up with all of those steps? Was it a lot of trial and error, or was it based on what you were seeing, the types of comments you were getting on certain images and just realized, “Okay, these are all of the images that I need to include”?
Abbey Rodriguez (00:06:24):
Yeah, it’s mostly been a trial and error. Because I’ve been doing food photography for five years specifically, and so that … Content creation, photography, has varying applications to it. So it’s just trial and error and I think just the experience of it and coming up with a work flow that works appropriately. But based on, you know, I’ve worked with all of these gentlemen having a content audit and understanding like, this is what needs to be a piece of that. And it’s just become a part of that work flow as I learned more about my own SEO and just content creation in general.
Ashley Segura (00:07:02):
Yeah, that makes sense. Casey, as a publisher like Abbey prepares to shoot new images, goes through all of those processes, and as she’s trying to figure out, “Okay, I’m going to use X, Y, and Z image for the blog post,” is there a specific, from an SEO standpoint, a specific number of images that she should be aiming to capture, or a food blogger should be trying to goal for for every blog post that they do?
Casey Markee (00:07:26):
Good question. And the short answer is as many as you need when we talk about photos. The mechanical answer might be something like a photo every 200 to 250 words. But when we’re auditing sites, especially in my case when I’m auditing, I know we’ve got a lot of recipe bloggers on the call, we want to look at something that’s visually appealing but is not overboard, so to speak. We don’t need, just because you took 11 photos of the finished dish and they all look fantastic, all of them don’t need, nor should they ever be in your post. Because we’re looking at performance, we’re looking on UX, we’re looking on bottom line page speed over a 4G connection, things like that.
Casey Markee (00:08:06):
We want to have maybe a nice featured image at the top of the finished dish. Then we might get down here and have a nice photo of the ingredients. We’ve talked about that previously, a nice, labeled photo of the ingredients. Fantastic, very highest meets and needs, I love it, I recommend it all the time. Then we get down into a step by step section. We might have photo collages. Maybe there’s four photos making one collage here, and then there’s another four photos making another collage. Or maybe it’s just step by step and we’ve got five, six, or seven step by step photos. Then we might have maybe another photo of the finished dish at the bottom. So it can depend. Seven to 10 photos might be okay.
Abbey Rodriguez (00:08:47):
Yeah, that’s what I had.
Casey Markee (00:08:49):
15 to 20 pages, probably too much. And yeah as Abbey has said, seven to 10 photos, probably okay. I had an audit earlier this week and there was a post that had 17 photos in it, and it scored an amazing six out of 100 on the page speed insights tool. So again, in that case she loved it and she wanted to keep those photos, but I told her that probably the post would struggle considerably to rank competitively based upon the poor metrics on it.
Casey Markee (00:09:18):
We have to dial in the user experience with other metrics like, is this a smart decision? Do I want to keep five photos of the finished dish in my post? Usually we can find that we can provide less photos and provide a higher UX in the process.
Ashley Segura (00:09:38):
Yeah. And we have a good question that pretty much piggybacks off of what you’re saying, Casey, from Amy in the chat group. As a cookbook publisher and food historian, not really understanding the whole photo obsessions, Andrew or Casey, could either of you explain why and when SEO became built around photos and kind of clarify that? If SEO is really built around images these days, or images just help compliment that? Arsen, you mentioned that it’s not necessary for SEO. So could we get a little bit more clarification from the SEO side?
Casey Markee (00:10:11):
I’ll just say that I definitely believe that they’re necessary for SEO now. That’s the environment we live in. We’re visual learners. If you publish a recipe post and you’re not including photos, you’re not going to be successful period. And I would say that it’s too competitive. This is one of the most competitive niches in the world.
Casey Markee (00:10:25):
If you’re going to publish a post, I see bloggers all the time, they’ll get to a certain traffic level no matter what they do, no matter what advice they take from their SEO company or someone else, they can’t build traffic. Nine out of 10 times it’s because the haven’t evolutionalized their use of images. They are still using the same photo over and over again in the posts. You’re going to have a photo of, you know, strawberry stuffed waffles, and there’s literally nothing on the page but four photos of strawberry stuffed waffles. Not a photo of the ingredients, not a photo of you putting this together, not a photo of maybe the finished product from another angle. That’s the kind of things we’re looking for when we’re talking about a highest meets need post in general. Making sure that the photos not only tell a story, but they’re relevant to the user on the page.
Abbey Rodriguez (00:11:14):
Mm-hmm (affirmative). Yeah, and from my [crosstalk 00:11:17] … Oh, sorry.
Andrew Wilder (00:11:18):
I’m sorry. It’s not just about SEO, right? There’s lots of other collateral and lots of other ways to get traffic, Pinterest being the other big example. And Pinterest is literally just about photos. But if you don’t have photos, you also won’t do very well if you share your post on Facebook, or on Twitter, or wherever. And we should talk about this, you can size your photos to look better on those platforms. Part of it is just all these little pieces add up. So it’s not just Google search.
Casey Markee (00:11:46):
It’s important to understand that when we talk about Google search, there is Google organic search, there’s Google image search. They are completely different algorithms. They are completely different indices in many cases. There are many people who don’t even know how to check how much traffic they’re getting from Google Images, and yet they’re able to track that now by default in Analytics. So a lot of people are surprised when we go in, we log in to Analytics and we show them under sources where we can track image referral, image traffic. And it’s only increased, and we want to be able to do that more effectively. You putting in correct photos for every post is just SEO 101 and you will garner more traffic when you do that.
Abbey Rodriguez (00:12:29):
And I just wanted to end with that, from my experience as a food blogger, for those who like specific numbers and information, I usually have about eight to 10 images. So I have my hero image is going to be the first one after my intro, and then I put that in the recipe card. Then I have an ingredients shot. Then I usually have about five process shots, because I try not to make my instructions really long either. And then the final hero image, because I know as a content creator we get attached to our photos, right? We’re like, “Oh, they’re all so beautiful.” And so that gives you kind of that last opportunity to just put that last one there, and that’s worked well for me.
Ashley Segura (00:13:09):
That touches on something that I’m sure many publishers, even myself, struggle with really regularly is, you have so many great photos. How do you choose, this is the photo? If you’re only doing eight to 10 photos, only five process shots, how are you choosing, Abbey, those photos versus other photos that you shot and edited and are great photos?
Abbey Rodriguez (00:13:30):
Yeah. So I think it’s kind of like, you know, when you know, you know like finding the one. But no, like technically speaking, this depends on how you speak, or how you shoot. I usually shoot tethered, but I don’t shoot on a tripod. And so for me, sometimes the images might have a little bit of hand shake and you get really into the small details and grain which don’t necessarily matter if you’re optimizing them. But just for sake of clarity and having a really clear picture, those little details as I go through, then I’ll select those and then save them into a larger collection and then put them all together. So that’s usually my process for selecting. And sometimes just the framing, the lighting, there’s a lot of other elements that go into photo shoots that can affect the outcome of the photo that ends up being the perfect one.
Ashley Segura (00:14:21):
Yeah, which can definitely help eliminate some of the others. Andrew, so after the photos decided, and “Okay, I’m going to use these eight images. This is going to be my hero image. This is going in the recipe card.” Are there any steps you can take before you actually add it to the post to help optimize it?
Andrew Wilder (00:14:41):
Yes. You can upload any format image, but it doesn’t mean it’s going to work well. Like if you’re working in WordPress, which most of you are, you can upload an image straight out of your camera. And it’ll load. It’ll probably be huge and really slow. It might trigger warnings in Google PageSpeed Insights. So there’s a lot of things you can do or should do before you upload them.
Andrew Wilder (00:15:01):
The first is to make sure you size your image correctly. So you want to be looking at the height and the width. Our recommendation right now is 1200 pixels wide by however tall to keep the aspect ratio. We’ve found 1200 pixels wide is a really good size that will look good on retina desktop displays. And most of us work on laptops and desktops, and we’re using this beautiful retina display and we want to see nice pictures. Recognizing that most users are on mobile, that’s not as important. But with 1200 pixels wide, that gives us basically some future proofing, so if resolution increases or monitors get bigger over the years, you’re not going to have to go back and redo your photos. If you started a blog 10 years ago like I did and you uploaded everything at 600 pixels wide, and now your content area is 800 pixels wide, then everything’s going to look too small. So 1200 pixels wide kind of checks all the boxes, and I think that’s going to be a good number for a while going forward.
Andrew Wilder (00:15:58):
Google’s also hinted at this number for the Google Discover feed, which is like on the mobile app. If you want large thumbnails instead of small thumbnails, you have to have a 1200 pixel-wide image in the post. And now actually Yoast will automatically opt you in I believe, so you don’t have to do anything else. You just have to have large enough images. But sizing your images correctly is huge.
Andrew Wilder (00:16:21):
Make sure you’re using the right image format. If it’s a photograph, you want to be using .jpeg. And then really what you want to do is monitor the quality setting when you export the image. So .jpeg is what’s called a lossy algorithm. So you can compress more and it’ll look like crap, or you can compress less and it’ll look good but be bigger file. In most programs, it’s a scalable 1 to 100, so you want to find somewhere in the scale that looks good but also doesn’t have a huge file sizes. Usually that’s somewhere in the 75 or 80% range. It depends on what program you’re using.
Andrew Wilder (00:16:54):
And I generally tell people to aim for around 250 kilobytes. So what you want to do is experiment with a variety of images and set it to like 75% quality, size it correctly, export a few different images and see what the file sizes are. And if you kind of land in the 200, 250, sometimes 300 kilobyte range, you’re going to be fine. If you’re exporting and you’re like 600, 700, 800 kilobytes or more, you need to pull the quality down a little bit. You should be able to find that sweet spot where it still looks great so it’s not hurting the quality and isn’t too big.
Andrew Wilder (00:17:26):
As a … Let’s see, so we’ve quality, size. So then you’ve got your images ready, and we’re going to talk about how to name them when you save the files. Then you should upload them to your site. I recommend uploading it when you’re in the post editor. When you’re in WordPress, that will attach the image to that post. It’s not, strictly speaking, necessary, but it helps WordPress associate that image with the post, and that can make things a little bit easier in the future. So you can upload it while you’re working on the post.
Andrew Wilder (00:17:56):
I also recommend not uploading all of your images and then picking and choosing. Like I sometimes see people upload [crosstalk 00:18:03] to 40 images, and then they go [crosstalk 00:18:04] start dropping them in and pick and choose and decide which ones to use, and then they just leave those other images sitting on the server. From an SEO perspective, that won’t really hurt things, but from a server management perspective it will really start to add up over time. I’ve seen sites with 40,000 images in the media library, and it’s because they’d upload 50 images and pick the three they want and leave everything else there. So a few extra images here and there won’t be a problem, but over time, and if you’ve got a whole team uploading images, that can really add up. And that can make backups harder.
Andrew Wilder (00:18:35):
And then I also recommend, and I think we’re going to talk about this later, having an image optimization plugin inside of WordPress. So you want to actually further optimize after uploading. So we’ll talk about that I guess in a few minutes. I think I saw that question in the list.
Ashley Segura (00:18:49):
Yep, yeah. Perfect. And a quick …
Casey Markee (00:18:52):
Yeah, and just to very quickly add onto what Andrew said, a lot of you on the call are using Lightroom. If you’re using Lightroom, there are very specific settings in there that make all this very easy. You can go in and specify a max limit on the file size, and that way you can play around with the
Andrew Wilder (00:19:10):
I actually recommend not doing that because in Lightroom you can set a target file size of like 250 kilobytes.
Casey Markee (00:19:15):
Uh-huh (affirmative), 250.
Andrew Wilder (00:19:15):
But what it’s going to do then is it’s going to vary the quality when you export. And so you may find like some images look blurry and some look very sharp, and they’re all somehow 250 kilobytes. One of the things to be aware of with .jpeg is the more detail and texture that’s in the picture, the more data you need. So if you’ve got something that’s like an ice cream cone in front of like a beautiful white background, then it’s probably going to be a very small file size. If you’ve got a thanksgiving table with lots of burlap and pine cones and lots of other texture and stuff, or like I don’t know, chocolate cupcakes with sprinkles and there’s tons of texture, that’s going to need more data. So if you set your quality to something that looks good sort of in all cases, then you’re going to be happy with the quality. Because if …
Casey Markee (00:19:59):
I think the question we’re getting is, we’ve said set the quality. But we’ve not provided any particulars. Let’s dial that in. Is it 80? Is it 85? Is it 70? What would you suggest, Andrew, when we’re looking at exporting these images? Do they want to pick three variations so they can see exactly what the image size is? Or do we say, “I’ve chosen 80, but now my image is exported at 450,” then we have to go back in and we keep going down until we’re around 250? How would you … let’s talk about the work flow there specifically.
Andrew Wilder (00:20:29):
I think what everybody should do is do some trial and error. Around 80 is a good place to start, and that might be perfect. But you may find, due to how you shoot or what the texture is … Your style might be light and bright and airy and there’s a lot of smooth backgrounds, so you might be able to tweak it differently. So I don’t want to give a specific number, but just try it. Export at 60%, 70%, 80%, and 90%, and look at the files on your computer and see what the file sizes are. And if you just do that for a few different images, you’ll get a pretty quick idea of where you want your setting to be.
Ashley Segura (00:21:08):
Casey, would you say that … When you have the image size down and you’re putting it into the post, is there a specific way the image should be aligned within the text? Or does it matter if it should be horizontal, vertical? Does any of that make a difference for SEO, or is that all based on user experience?
Casey Markee (00:21:26):
Well kind of a general principle, I always recommend that people center justify their images. And I do it because that’s what responsiveness is all about. If I insert an image into a post, I always tell them to center justify the image so that we can get a cross-platform experience both with mobile, tablet, and desktop. It’s just going to look better on the page. I can’t tell you, I mean we’ll do an audit and I’ll show on the call, “Here is what it looks like on tablet. Here’s what it looks like on mobile.” Or maybe we’ll do that live, and you’d be surprise of the difference just doing a simple center justification will work.
Casey Markee (00:22:01):
We can get into the talk between square image and vertical images. Usually we always want to have a square image uploaded for, I think Andrew has mentioned this previously, for the featured image specifically that we’re using for … It has a lot of benefits. We want to upload a 1200 by 1200 image for the featured image interesting he post, not only for the recipe card but also because we’re trying to optimize as much as we can for Google Discover. So we want to have that uploaded 1200 by 1200 whenever we can. And usually we choose to have all the other images in the post at least 1200 pixels wide. They might be longer than that, they might be shorter than that, but 1200 pixels wide is what we tend to want to aim for so that if Google wants to pull out other images possibly, we can do that. And it’s also future proof so if they, like you said, as displays change we want to have a nice, full photo that isn’t going to take up too many resources when resized dynamically.
Andrew Wilder (00:22:56):
To go back real quick also, when you’re inserting your image into the post, I wanted to mention insert at full size in WordPress.
Casey Markee (00:23:04):
Yeah, very important.
Andrew Wilder (00:23:05):
Don’t insert the large. Insert full. So that’ll actually put the whole 1200 pixel in there …
Arsen Rabinovich (00:23:10):
And center it.
Andrew Wilder (00:23:11):
Yes, and center it. And then your theme should keep it within, it’ll scale it down accordingly which is what will help it look good on retina displays.
Andrew Wilder (00:23:21):
I saw a couple questions on this stuff come in. Michelle, 100 to 150 kilobytes is totally okay if your images look great. And that’s actually better, right? The goal is to have your images be as small as possible in file size so they load faster, but you want them to look good. So if your stuff looks good at 100 kilobytes, that’s awesome.
Ashley Segura (00:23:42):
Andrew, you have a direct question from Marissa in the chat right now. If you can discuss resolution as it relates to the quantity and file size? Since we’re on the image quality right now.
Andrew Wilder (00:23:52):
Hi Marissa. So I’m guessing you’re asking about DPI, which is one of the export settings. And the answer is it doesn’t matter. You can set it to 72, you can set it to 3,000, and it doesn’t make one bit of difference on the web. That only impacts if somebody goes to print it. That actually tells the printer what size, how many dots per inch. So I usually leave it at 72 because I’m old school and monitors themselves used to be 72, but it really doesn’t matter. You can completely ignore that. What matters is the number of pixels wide, the number of pixels tall, and the quality setting.
Abbey Rodriguez (00:24:23):
I’ve also noticed too that certain lenses that I use have a better quality depending on the editing with it as well. So like Andrew was saying, I think it’s totally variable.
Ashley Segura (00:24:37):
And Abbey, based on what you’ve seen being a conference owner and having so many food bloggers, looking at so many different sites, and being a blogger yourself, are there certain elements of a hero image that you see that, that makes a great hero image and this doesn’t make such a great hero image?
Abbey Rodriguez (00:24:56):
Yeah. And I think ultimately, food blogging, at least from my experience and what I’ve noticed over the years is certain images seem to be trendy, as are other things in life. But I think overall in my experience, which I can really speak from that, those really tight macro shots are the ones that perform best where you’re up close. Like I use my macro lens for that. It’s a tight show, you can see everything, it’s very clear. You don’t want to set your aperture, you know, your f-stop too low. You want to make sure that everything is in focus and that those little elements like dripping syrup on a pancake, something that it makes you want to like reach into your screen and eat it.
Abbey Rodriguez (00:25:43):
And I speak from a food blogger perspective. You know, I can’t speak to the other content creation aspects of that. But I think just those really tight crop shots. Because when I first started food photography, it seemed like these higher flat lay table scapes were all the rage, but you can’t really see what you’re eating. And I think when people come to the internet to look for a recipe, they don’t care about the artistic side of it, even though we get attached to that as content creators. People want to see like, I want to bite into that, I want to eat that, that looks amazing. So I try to hone in on that, and specifically use that work flow and that lens for all my hero images.
Ashley Segura (00:26:23):
Okay. And the consistency with that I’m sure helps with your brand of images as well.
Abbey Rodriguez (00:26:29):
Mm-hmm (affirmative), yeah. It develops that aesthetic over time. And then I think as you put together your shoot resume, you don’t have to constantly be thinking, “Oh, how should I shoot this today?” You get into a specific flow that you know works well for your brand. And again, it’s dependent on what your brand is. I can’t say definitively what that is for everybody. But overall, I think those shots work well what I’ve seen across the board.
Ashley Segura (00:26:52):
That makes sense. Arsen, over at TopHatContent, when we do a content audit, we notice a lot of blank or empty alt tags for images. Can you explain why this is such a bad thing, and really what alt tags are meant to be for?
Arsen Rabinovich (00:27:04):
Yeah, we do see a lot of that. So alt tags serve a few purposes. Firstly, contextualize, as all of us said earlier, they contextualize the image. They’re also used for accessibility, right? So screen readers will read the alt text for people who can’t see. And then if your images aren’t going to load on a page, the alt text is the text that’s going to be inside that frame of the image when the image doesn’t load.
Arsen Rabinovich (00:27:41):
They also obviously help with SEO. The contextualization of the image along with the content that wraps around the image all help Google really understand what the image is about, why it’s there and what it is. But even though like image recognition technology has greatly advanced, Google still can’t see, crawlers still can’t see the image. They’re not looking at it the way you and I are looking at the image. So you definitely want to make sure that it’s filled out. You don’t want to leave it up to Google to make a determination of what the image is about. That might cause all kinds of issues. Just like what we recommend with making sure that your meta descriptions are filled out, because Google will just pull whatever little snippet from your piece of content and just insert it into the search results. Same thing with alt tags. You might inadvertently start ranking for keywords that you’re not intending to rank for if you’re not contextualizing for Google.
Arsen Rabinovich (00:28:33):
But yeah, so that’s the main … from where I’m sitting, those are the main reasons for making sure that your alt tags are filled out. And I know Andrew has a plugin that solves this, right?
Andrew Wilder (00:28:47):
Sorry, I was typing away on answers. Yeah, so Alt Text Tools will let you export all of your images and their corresponding alt text or no alt text so you can find the ones and fix them. If you have a lot, The Blog Fixer has an awesome product that can help you go back and fix them as well. If you have a lot to do, I’d recommend get their product. It gives you an interface where you can literally just type them all in and it updates everything, yeah.
Ashley Segura (00:29:12):
And what was the name of that one more time, Andrew?
Andrew Wilder (00:29:15):
My plugin’s Alt Text Tools, which is a free plugin in the repository. So you can search, if you go to plugins, add new and search for it, you’ll find it there. And then The Blog Fixer has, I think they call it an alt text fixer. I’ll get the URL in a second.
Ashley Segura (00:29:31):
Perfect, awesome. Thank you for clarifying that.
Casey Markee (00:29:34):
Alt Text Generator Fix, yeah.
Ashley Segura (00:29:40):
Ah, there it is.
Andrew Wilder (00:29:40):
Pacifico!
Casey Markee (00:29:41):
Yeah.
Ashley Segura (00:29:41):
No lime, though.
Casey Markee (00:29:44):
No, the lime is …
Ashley Segura (00:29:46):
Ah, okay. Prepared. Casey, when it comes to file names, so Arsen just talked about alt tags. But little confusing on the difference of alt tags and actual image file names. So when you upload an image to WordPress, does that file name need to already have the keyword of what that image is? Or how far do we have to go? For example, if it’s a pumpkin roll for you file name, or if it’s a pumpkin roll, does your file name need to say “pumpkin roll” too, or does the alt tag cover that?
Casey Markee (00:30:17):
Well, no it doesn’t. I mean Google uses the URL path as well as the file name to best understand the image. And they even have an image best practices guide. We’re going to go ahead and paste that over in a minute. It’s going to kind of reinforce a lot of the answers we’ve given today and a lot of the answers we’ll give in a minute. But when you upload an image or a file that has the same, and this is something that I’m going to have Andrew talk about as well.
Casey Markee (00:30:40):
What we want to be careful of is uploading images that are the same name as a potential blog post that you’re going to use in the future, and we see this all the time. What happens is that when there is a conflict between an image that’s uploaded and a new blog post title, sometimes WordPress gets confused and they’ll automatically append a number to either the images or to the blog post itself. So if I upload six images that say “pumpkin roll” and I haven’t made any differentiations, at least WordPress is smart enough to append 1, 2, 3, 4, 5, 6 to that. But they don’t apparently seem to be smart enough to understand a conflict between a post URL and an image that’s tied to that post URL.
Casey Markee (00:31:18):
And we’ve seen this happen a lot. I know it’s happened to people on the call here, where for no reason URLs, historic URLs have just been getting changes. It’s been pumpkinrolls/1, pumpkinrolls/3 when they try to update and republish these posts. The reason that’s happening is most likely a conflict with one of the images. And we can change that back, but you have to go in, and Andrew can speak to this, but I believe you have to go in and make edits both in the image gallery and then we just have to revert the URL back specifically.
Andrew Wilder (00:31:49):
Yeah. WordPress assigns what’s called a slug to everything. So a post has a slug, an image has a slug, a page has a slug. Your recipes, even if you’re not using them … so like if you’re using WP Recipe Maker, every recipe actually has a slug as well. So we’ve seen a conflict where somebody created the recipe first, like they had pumpkin rolls as the recipe and they created that, and then they go to create a post and the post keeps renaming itself to “pumpkinroll1” because the slug’s already in use on the recipe. And that one’s really tricky to pin down because you don’t see the slugs in the recipes. So yeah, if you ever find like numbers being appended, something like that is happening. So yeah, that can be fun to track down.
Casey Markee (00:32:28):
Good times.
Ashley Segura (00:32:33):
And Karen, let’s see. Karen just threw in a great question on if Google’s made any recent changes that makes using keywords in your alt tags more negative than actually helping. Arsen, can you break down how you should write an alt tag?
Arsen Rabinovich (00:32:49):
Yeah. Keep it short.
Casey Markee (00:32:57):
Succinct.
Ashley Segura (00:32:57):
And?
Arsen Rabinovich (00:32:57):
Keep it short, descriptive. Do use your focus keywords very carefully. Don’t overdo it in the alt tags. We still see this happening, and like we’re already tired of … we’re not tired, but we keep just repeating don’t over-optimize, don’t over-optimize in every episode. Be very clear, be descriptive, don’t make them too long.
Arsen Rabinovich (00:33:20):
Definitely do keyword research. Keyword research is super important. One of the hacks, and I think I posted this in the foodie group on Facebook. Or what is that group that we’re all in? Casey, what is the name of that group?
Casey Markee (00:33:33):
Food Blogger Central.
Arsen Rabinovich (00:33:33):
Food Blogger Central. So one of the hacks that I use is I actually, so if I’m writing about … Here, let me pull it up so I can just quickly tell everyone. So let’s say I’m writing about potato soup. I love talking about potato, but writing about potato soup, right? And I have images of potato soup and I’m trying to figure out how to not repeat potato soup over and over and over and over again in my alt tags. So I’m actually going to go to Google image search, and I’m going to type in potato soup, and you guys should try that too. And then you’ll see all of the images, but at the top there’s a little thin bar and on the thin bar you see these little, they’re almost like buttons, right? And they say like bacon, easy, slow cooker, vegan, cream, sausage, cheese, right? Those are all implicit and explicit associations between potato soup and other, I don’t want to say the word entities, I’m not sure if Google uses any kind of entity identification here, but Google has mapped these other terms as closely related to the search potato soup.
Arsen Rabinovich (00:34:37):
So I would go in there and I would look through these tags, and I would see which one fits closer to the image that I’m trying to optimize, then use that. Because this way you’re kind of mapping and matching to what Google has already mapped inside of it’s whatever database it uses to store all of these relationships.
Arsen Rabinovich (00:34:55):
But yeah, you definitely want it to be shorter. You want it to be descriptive. You want to describe the image. Don’t use words like “Picture of Arsen cooking soup,” right? You don’t want to be that descriptive. But describe what the picture is about. What is the picture of?
Casey Markee (00:35:13):
And just to add onto this, I’m actually going to be pasting, I just pasted over a link to Google Vision AI. For those of you who are not familiar with it, it’s a machine learning algorithm that Google has made available for free for us to actually test our alt tags. And it’s very easy to use. I’m going to go ahead and paste over information on it. It will allow you to upload any image you would like, and the machine learning algorithm will generate what they consider an optimal alt tag for that. I will warn you, hilarity will result. Hilarity will definitely happen on several images you upload. But it is interesting to have you see how Google sees some of your images. So take some of those, go over to Google Vision API, upload those. This is machine learning, and it will spit out what it considers an optimal alt tag for that image.
Andrew Wilder (00:36:05):
I want to underscore one thing just to be sure we’re absolutely clear, though. Alt text is not an SEO tool. It’s an accessibility tool. So …
Casey Markee (00:36:13):
Yes and no, and I’m going to clarify that. Because alt tags are ranking factors.
Andrew Wilder (00:36:18):
Yeah, so …
Casey Markee (00:36:19):
But they’re also, again, mainly for accessibility. You’re talking to the guy who literally never got invited back for Everything Food Conference because he stood on a stage for 40 minutes telling bloggers that they’ve been using alt tags incorrectly for years. So I’m very susceptible to that, Andrew, specifically.
Andrew Wilder (00:36:35):
The most important thing with alt text is to describe the image for someone who can’t see it.
Casey Markee (00:36:39):
They’re sitting next to you. They’re hidden by Arsen’s beard.
Arsen Rabinovich (00:36:43):
Right?
Casey Markee (00:36:44):
They can’t see in front of them. What is it? What are they looking at? Very true, very true. And this Google AI, this Vision AI thing does exactly that. It does not care what your alt text, it doesn’t care what your keywords are. So if you’re looking to visually see what the image is, this is great.
Casey Markee (00:37:04):
Now, when we have audits, especially, you know, regardless of whenever we do anything, alt tags is a fine line. We want to try to use our focus keyword when it makes sense to users. Sometimes, most times, including your focus keyword in an alt tag doesn’t make sense. I might have a photo, if I can include it naturally, like “Here’s a photo of a piece of strawberry stuffed French toast on a plate. It’s cut in two. There’s syrup in the background.” I can definitely say that, something like that, very natural. I would just try to be, you know, if it makes it sense for me to say strawberry stuffed French toast, fantastic. Maybe I don’t need to in that situation, it just depends.
Ashley Segura (00:37:43):
Yeah. So Andrew, could you clarify then since alt tags, accessibility, a little bit SEO but mainly accessibility, what does Google look at when analyzing images then? What are some ways that we can optimize images and utilize them for SEO purposes.
Andrew Wilder (00:38:03):
I think it’s all of the above. So you’ve got the alt text, you’ve got all the … The page that it’s on matters. Google understands context. So if you’re on a blog post that’s all about Arsen’s potato soup, odds are good that the picture may very well be related to potato soup. And if it’s in the recipe schema as the image, you know, there’s all these other clues. So alt text is just one piece of that puzzle. Google also can’t rely on alt text because people have used it wrong for so many years. People have keyword stuff, or they’ve put Pinterest descriptions in there because Pinterest stupidly used to use that as the default description. So my thing is you should do it correctly for the HTML standard, which is if it’s an informational image you should describe the image, and that’s useful for your visitors.
Andrew Wilder (00:38:54):
It’s also not just blind people who are using a screen reader. Let’s say somebody’s on a cell phone and they’re in the car, not driving hopefully, and they go through kind of a dead zone and the page doesn’t load completely. So instead of the images popping up, you’d see the browser will display that alt text. So they can actually see what it is. And if that’s a compelling description, they might actually hit reload on the page and reload it and get it. If it’s not a compelling description and they see like this long list of hashtags that shouldn’t be there, that might be annoying and they might go somewhere else. So accessibility, we tend to think about it like it’s only for blind people, or it’s only for somebody who can’t hear, or like somebody only has one arm so they can’t use a mouse, these extreme examples. And accessibility is really just usability, so the alt text is a big part of that.
Ashley Segura (00:39:44):
Yeah, that makes sense. Casey, when it comes to writing image captions … So we have the alt tags on images, we know how many images to use, we know how to format them inside the blog post. Now it’s actually adding captions to them. Are there best practices, and are captions necessary for SEO purposes? Or is it more of just a preference?
Casey Markee (00:40:05):
You know, it’s funny because we did paste over the link to the Google best practices for image optimization earlier in this. And there’s a whole section in there where they specifically say, “We use captions.” So captions is a way for us to add value, to add relevance, to add more consideration to what is going on with that image. I usually say that if you want to add captions, it doesn’t hurt you. Certainly doesn’t hurt you, it could most likely help you.
Casey Markee (00:40:33):
Google extracts information about the subject matter of the image by what’s around the image, and that includes the captions. So what we can do is when you’re putting image captions together, you might want to consider something like, what are the five Ws? The who, what, when, where, why. Maybe there’s something there that you could pull to put something under caption there. Or maybe you could explain the significance of that image to a moment or a scene. Maybe you’d want to keep it short clearly, one to two sentence max for a caption is the way to go. Certainly we would never write a paragraph for a caption.
Casey Markee (00:41:12):
Also one of the things that we’re thinking of, especially for food bloggers specifically, more storytelling over just descriptions. So if there’s something like a, I’ll give you an example. We had a Disney blogger and she had to do a sponsored post, and the sponsored post was on a stone oven that she literally, they gave her a stone oven to make the products in. So she provided a whole post showing the steps of their husband going in and making this stone oven, and the captions were describing that. And in that way, it was very easy for her to do captions showing the story of how they built this stone oven that were completely different than the alt tags that she had on those images, and that of course increased the quality of the entire post, and of course the quality of the surrounding images. So I think whenever you can put captions and it adds value to the user, there’s going to be a tangential benefit there for SEO as well.
Ashley Segura (00:42:05):
And do you need to put specific keywords into the caption? Or is it more of literally just describing the image, kind of like the alt tags? If it makes sense and it’s natural …
Casey Markee (00:42:13):
It’s just kind of like the alt tag. Yeah, just natural. Storytelling, descriptive. And that’s a problem, because captions are hard to do in my experience with typical recipe posts. Because you already have an alt tag behind the scene. And then maybe it’s describing a step. Okay, maybe we could describe the step again as the caption, but we should already have another H3 or something or something else below that describing what’s happening in the steps anyway.
Ashley Segura (00:42:42):
Yeah.
Casey Markee (00:42:43):
So you just have to be careful on that, for sure.
Ashley Segura (00:42:45):
Yeah, and without being redundant. Abbey, as a blogger, are you finding yourself using captions or do you just use the actual blog post to kind of tell the story?
Abbey Rodriguez (00:42:55):
Yeah, right, exactly what Casey was saying. I take advantage of the headers in breaking down the steps so that it’s very clear. You know, back to the user experience. The captions to me just feel redundant, because I think visually you can tell a story with your photos, which is the goal.
Ashley Segura (00:43:12):
Mm-hmm (affirmative).
Casey Markee (00:43:13):
One of the other ways to use captions too is just credits. I know that’s one of the simplest ways to go. If you are using someone else’s photography or if there’s something specific about the image, the caption is appropriate for an image credit where anything involving a copyright attribution would be appropriate use as well.
Andrew Wilder (00:43:30):
One thing you also want to be careful not to do is use the exact same phrase in your alt text, your caption, and your title. If someone’s using a screen reader, it may read that three times for them, and that would be really annoying, right? Somebody asked about title tags. I actually have been leaving them blank and making sure my alt text is filled in completely, or properly.
Andrew Wilder (00:43:50):
I feel like with a caption, it should be secondary information that’s useful. So you don’t want to like use the same as your alt text because that’s kind of silly. I’ve seen that on Business Insider where it described the image right the caption.
Casey Markee (00:44:00):
Right below it, yeah.
Andrew Wilder (00:44:03):
It’s like, no, that should be the alt text. But you know, if you have commentary on the image that’s secondary, let’s say you’ve got a slice of chocolate cake. Maybe you have a tip on how to slice the chocolate cake and you’ve got a picture of that. You could do something like, you know, “Wet the knife before,” or something where you’re adding value through the caption, not just repeating yourself.
Ashley Segura (00:44:24):
Yeah. And putting tips on … yeah, that’s a great idea. Andrew, while we’re on the topic of, okay, we have the captions in there, we have the descriptions down. This is a lot that we’re adding to images. So I would immediately be afraid of page speed issues, of finding the fine line of eight to 10 images, okay, is that the sweet spot or can that slow the page loading? Is it going to create a bad user experience? Is there every any instances where images actually hurt page speed by adding too much content over them or anything like that?
Andrew Wilder (00:45:03):
All images are going to impact page speed. If you want a super fast web page, don’t put any images on it. But that’s not a good user experience, right? So you have to strike that balance.
Andrew Wilder (00:45:14):
The two most important things are to make sure you size your images correctly like we talked about so they’re not two megabytes each. Because if you add 10 two meg images, you’re done. But if you add 10 200 kilobyte images, you’re going to be okay.
Andrew Wilder (00:45:27):
The other important thing is to use lazy loading. And what that does is it doesn’t load the images right away. It waits until the user starts scrolling, and then it loads them as you start scrolling. So it’s kind of like a just in time delivery. WordPress 5.5 actually includes lazy loading by default now, although we’re seeing some issues with 5.5 so you might want to wait until 5.5.1. But most of you also probably have other speed optimization tools, probably WP Rocket. That has a lazy loading feature. There’s also a free version from them called LazyLoad by WP Rocket I think. And so you just add that to the site and it will automatically just download the images as you need them. If you don’t have something like that, that will make an enormous difference on your speed. So if you get nothing else site speed-wise out of this, that’s the one key right there is lazy load your images.
Ashley Segura (00:46:17):
Okay. Okay, that’s helpful. And we just have a couple more questions before we’re going to be moving into Q&A. So if you have a question that you haven’t asked in chat or Q&A, now’s definitely the time to make sure you add them to the Q&A.
Ashley Segura (00:46:31):
Abbey, are there any patterns you’ve noticed over the years, the images that get higher engagement than others from just posts that you’ve been doing? And if so, is there something that those images had that some of your other images didn’t? Is it maybe a specific angle or the lighting?
Abbey Rodriguez (00:46:47):
Yeah, so I mean I touched on this a little bit earlier because I think what’s important to remember as was mentioned earlier, as a food photographer you’re not only taking images just for your blog post. If you’re working smarter not harder, you want to repurpose as much content in that one shoot as you can. And so with that being said, I tend to really focus on that hero image for my social media posts, especially if you’re trying to build a specific brand aesthetic over an Instagram or whatever social media you use.
Abbey Rodriguez (00:47:21):
And so again, we talked about how they can follow some trends and certain things are popular in other times than others, but I try to make sure that I have that delicious element. So I try to have a drip of some sort, or like a bite taken out of it. The lighting, like you said, I think this goes without saying, like making sure that it’s really dynamic. There are little tips and tricks you can use to make sure there’s little touches of light in your photos that are really important to make it pop out, and just using little tips like that.
Abbey Rodriguez (00:47:57):
I also think that there is somewhat of a science to how your edit your photos. I have researched this a little bit, that photos that are edited to be slightly warmer with warmer undertones have scientifically been proven to be more appetizing. So I think looking at those little things …
Casey Markee (00:48:14):
I just want to say that that has not helped me overcome my disdain for artichoke hearts or asparagus, so I’m just kind of [inaudible 00:48:21]…
Abbey Rodriguez (00:48:20):
Well, I can’t help that. Can’t help that.
Arsen Rabinovich (00:48:23):
Casey, should we stop wearing black shirts for these? Should we wear something that’s more appetizing?
Casey Markee (00:48:29):
Always. Always.
Abbey Rodriguez (00:48:30):
I don’t know if that’ll help, though. Sorry Arsen.
Arsen Rabinovich (00:48:34):
Oh [crosstalk 00:48:34].
Abbey Rodriguez (00:48:37):
Just kidding. I love you. But yeah, I think just those little elements and just paying attention to the details is really important in terms of engagement, and really those tight macro shots have always worked well for me. The pull back shots, you know, straight on, tight macro, flat lay or like a straight on shot specifically are the two that have worked best for me in what I’ve seen with people’s engagement on other accounts and whatnot.
Ashley Segura (00:49:02):
And do you use the same filter for everything, or do you kind of custom edit every single image?
Abbey Rodriguez (00:49:09):
Yeah, I custom edit it to a degree. I try to use the same presets. But like I said, if you use natural lighting, that can be fluctuating throughout the day versus artificial lighting. So again, there’s a lot of little complex nuance to things that go into getting the right image and the right lighting for that. So I do have a set work flow I go through, but yeah, each image has to be strategically edited and played around with to make it be the right lighting, the right white balance, the right composition. You can crop in certain elements to make it a tighter shot that’s more just visually appealing. When you’re pulling it up on your Instagram, you’re more likely to click on something, at least in my experience with my engagement, that’s this really tight shot and that, again, it’s jumping out to you versus something that’s pulled back and I can’t really tell what’s in focus. The composition is really important there.
Ashley Segura (00:49:59):
Yeah. And trying to figure out what all the ingredients are inside, it’s much easier to do if it’s close up.
Abbey Rodriguez (00:50:05):
Mm-hmm (affirmative).
Ashley Segura (00:50:06):
Yeah, that makes sense. Arsen, getting a bit technical and moving things along, could you explain what structured data is and why you should add it to your images?
Arsen Rabinovich (00:50:15):
Oh, I love this question. Okay, so structured data. Think of your website as the mama bird, and think of Google as the baby bird. Casey knows where this is going.
Casey Markee (00:50:26):
If only you could’ve shared that graphic. I know exactly where you’re going. He’s got a fantastic slide on this, folks. You’re missing out.
Arsen Rabinovich (00:50:36):
So think of your website as the mama bird and think of Google as the baby bird. And the goal for us with structured data is to help Google really understand what’s happening on your page, to take it from implicit to explicit. So we have to chew it up and put it into, well, digested and then regurgitated back into the child or baby bird’s mouth. So that’s what schema is. You’re essentially feeding Google already processed information so that Google doesn’t have to do the processing or try to go through your page with implicit retrieval and try to understand these sequences and patterns of words and what they mean.
Arsen Rabinovich (00:51:18):
So here comes structured data and it says, “This page is about this. This post is this. This is a product page. This is a category. This is a list page. This is a blog post. Here are the images. This is what the images are.” So when you add structured data to your content, whether with JSON-LD or through HTML or whatever have you, you’re helping Google better understand what the content on the page is about. And again, this is helping Google contextualize what it is.
Arsen Rabinovich (00:51:50):
You can apply schema to pretty much, there’s schema vocabularies for pretty much anything at this point. But for food and recipe bloggers, you guys are pretty much very well-covered with the recipe card, because it already has the images and everything in it. Other bloggers who don’t have the recipe cards to have to worry about images, do have to worry about schema and applying the appropriate schema to different pages on their site. And there’s all kinds of products and plugins for that. But in a nutshell, it is a … Search engines came together, I think it was Yahoo, Bing, and Google at that time, came together and said, “We’re all going to agree to use this vocabulary for schema markup so that we can better understand what pages are about.”
Ashley Segura (00:52:36):
Okay. Okay, that’s a pretty clear definition. We’re opening up to the Q&A now, and we have a couple questions. I know there’s some in the chat that still haven’t been answered, so we’ll definitely address those. But the first one, Andrew, I’m going to direct it to you. This is a pretty big question and one that we get a lot after we do a content audit is, how important is it to go back and resize your old photos for the right image size? Like you were suggesting, Andrew, with the 1200 by X Y Z. And is there a tool that does that where it can scan all the images on your site and let you know what the image sizes are and resize them, or is this all manual work?
Andrew Wilder (00:53:17):
I guess the answer is, I’m going to fall to my “Does it add value for the reader?” answer. If you have 500 posts and you have to go back through all of them, I wouldn’t go back and just resize and replace the images. I would try to be more strategic about it. Pick your post that you really want to fix up and make better, and while you’re doing that, also replace the images with larger versions. So it’s not just an image thing, it’s all of your content. So you might as well really kind of go back and upgrade your existing content and do your images at the same time.
Andrew Wilder (00:53:55):
The exception to that being, I’d say actually if your alt text is empty or wrong, that’s important to fix proactively because it could open you up to a lawsuit if you don’t have alt text set up on your images. I know we’ve talked about this in other webinars. So I’d say that’s the one big exception, because there’s legal liability there. But you don’t have to replace the images, you can just add the alt text for now.
Andrew Wilder (00:54:20):
You know, it also depends on your theme. 600 pixels wide might look fine on your theme. If it looks good on mobile, I’d worry about it less too, and probably it does. Again, we all look at it in desktop, but look on mobile, like look at that post and it probably looks fine still.
Ashley Segura (00:54:35):
Okay, that makes sense. And then a question from [crosstalk 00:54:37] …
Andrew Wilder (00:54:38):
Oh, also asked about a tool.
Ashley Segura (00:54:39):
Oh, yes.
Andrew Wilder (00:54:40):
The Enable Media Replace plugin is good. That lets you basically replace an image rather than deleting and re-uploading. So that’s a very handy tool if you’re going to be replacing a lot of images.
Ashley Segura (00:54:56):
That’s awesome. And does it allow you to just replace all the images across the board, or you’re able to search for specific images that you would want to replace?
Andrew Wilder (00:55:05):
I don’t think it has any search tools. It’s more like, “Hey, I want to replace this image.”
Casey Markee (00:55:09):
Yeah, it just adds the ability to replace the image to every individual attachment, media file. That’s it.
Andrew Wilder (00:55:15):
So now I’m thinking like maybe our alt text tool should be updated so that in the export file it lists the media size, the file size or image size.
Ashley Segura (00:55:22):
Ooh, good idea.
Casey Markee (00:55:23):
Yeah, I mean [crosstalk 00:55:23] you should’ve thought about that. We’re sorry everyone. [crosstalk 00:55:25] should’ve thought about that initially.
Arsen Rabinovich (00:55:30):
Let’s blame it on Andrew.
Andrew Wilder (00:55:32):
Yeah just blame it on me. That’s fine.
Arsen Rabinovich (00:55:34):
It’s Andrew’s fault.
Casey Markee (00:55:34):
It’s fine.
Arsen Rabinovich (00:55:35):
Yeah.
Ashley Segura (00:55:35):
This episode’s all on Andrew. The next question from Annie T., how do you optimize images for your home page, and how does this affect site speed? The images are definitely smaller than the blog post, so do you resize a smaller version for your home page specifically? Anyone want to talk to that, Casey, Arsen?
Arsen Rabinovich (00:55:59):
Wait, is the question about featured images that get pulled into, as a part of the excerpt, into the home page?
Ashley Segura (00:56:07):
The images that are on the home page already. So not that get pulled in as a [inaudible 00:56:12], but that are actually in the home page are generally going to be smaller than the images on the blog post. So …
Casey Markee (00:56:18):
Just go ahead and talk about thumbnails, Andrew.
Andrew Wilder (00:56:22):
Yeah. It depends on your theme, ultimately. Your theme in WordPress should handle this automatically. Not every theme does do it properly. But usually it’ll use what’s set as the featured image on the post. So you should be setting a featured image of 1200 by 1200 like Abbey mentioned. And then whenever you upload an image to WordPress, it creates thumbnail sizes. So you have that image. It then creates at least three or four other image sizes. They’re specified in settings, media. You have the thumbnail, which is the smallest one, then medium and large. And then recipe plugins will add other file sizes, your theme may add different sizes. So you may end up with actually 10 or 15 or even 20 different thumbnail images on your server from that one image. And so then your theme should be smart enough to serve one of the smaller sizes there. And if they’re doing it correctly, it actually should be like slightly larger than the space so it looks good on retina.
Andrew Wilder (00:57:18):
There’s also a thing called image source set which is in the code that actually tells the browser, “Hey, if you’re this wide, pull this image.” Or “If you’re this wide, use this image.”
Arsen Rabinovich (00:57:26):
I actually had a … sorry I’m interrupting you, Andrew. So source setting is still a thing, right? We’re still doing source sets?
Andrew Wilder (00:57:30):
Oh yeah.
Casey Markee (00:57:31):
Absolutely.
Arsen Rabinovich (00:57:31):
Okay. I might have read somewhere that it’s like, “Oh, don’t do it anymore.”
Casey Markee (00:57:37):
[crosstalk 00:57:37] just ignore that.
Arsen Rabinovich (00:57:37):
Okay.
Ashley Segura (00:57:37):
I’m going to ask a question. What is source sets?
Casey Markee (00:57:47):
Source set is just a … I will do it and then Andrew will correct me. So source set is basically just an on the fly optimization where we’re detecting what browser is accessing our site and we’re serving an optimized image for that space. So it’s a good way for us to serve higher-quality images for higher-quality displays. That’s where we get around like Safari or any of these other browsers which might have a, what’s the term? With the high retina displays, so we don’t serve high retina displays to a non-retina screen. That’s fine, we want to make sure the image …
Arsen Rabinovich (00:58:21):
And also like sizing, right? So when you’re going into a responsive mode instead of shrinking the image or serving up a different sized image.
Andrew Wilder (00:58:28):
Right.
Casey Markee (00:58:28):
Yeah. It’ll automatically on the fly do all the heavy lifting for you behind the scenes.
Andrew Wilder (00:58:32):
So like an iPhone for example is 375 pixels wide. However, it’s actually double that because it’s a retina screen. So it’s actually 750 pixels wide. It’s really confusing. So basically, you can display a 750 pixel-wide image in a 375-wide spot, and that’s why it looks so sharp and beautiful. And that’s about the limit of what our eyes can see. Like at that point, you can’t detect individual pixels. So there’s not much point in getting higher resolution than that, especially on a tiny little screen.
Andrew Wilder (00:59:00):
So what the source set does is you’ve uploaded a 1200 pixel-wide image, and then in the code it’s going to make all of those other thumbnail sizes available to the browser to say, “Hey, we’ve also got this medium size if you want that instead.” And so if you set that correctly, the browser will actually download the 750 pixel-wide image, or if you don’t get it quite right it might have a 700 pixel-wide image, which [inaudible 00:59:21] fine, and it’ll load that one instead of a 1200 pixel-wide image which is much, much faster. So it’s really a speed optimization thing.
Ashley Segura (00:59:28):
Okay, perfect.
Andrew Wilder (00:59:29):
But it should all be happening in the background and you don’t need to worry about it. And that’s been core in WordPress for a long time now, and it’s pretty rare that I don’t run into that at least in the post content area. Where it gets tricky is in like sidebar featured image stuff, or [crosstalk 00:59:46] page where it might not be working properly. If it isn’t working properly, Google PageSpeed Insights will flag that as a warning, or as an opportunity. So if you do see like “Serve properly-sized images” I think is the phrase they use, that may mean your source set isn’t working properly.
Ashley Segura (01:00:03):
Okay. Okay, thank you for clarifying that. That definitely wraps up this third episode about image optimization. Before we go, Abbey, could you give us a little bit more background of the Tastemaker Conference and what it is? It’s coming up September 24th and 25th, so for those who are interested there’s still tickets available, correct?
Casey Markee (01:00:22):
Great.
Abbey Rodriguez (01:00:27):
Unmute. Yes. So exciting things to share about that. So we are capping it just for bandwidth reasons and whatnot, and so we have at this point I think about 15 tickets left. So all of these lovely people here, Ashley, Andrew, Casey, and Arsen, I call them the SEO dream team. Ashley’s content …
Casey Markee (01:00:51):
You must be the only one. We appreciate that.
Abbey Rodriguez (01:00:54):
I’m starting a revolution here, like a trend with this. Everyone’s going to start calling you the SEO dream team now. But Ashley put in the direct link to the Eventbrite there. So if you aren’t familiar with Tastemaker Conference, we are a food blogger conference and we also host other events that teach you how to run a successful online business that is in the food media area. So whether you’re a food photographer or food blogger, Instagram food content creator, we serve all people who are interested in food media. And so we have our virtual conference that we had to pivot to a virtual setting this year because of COVID, but we will also be having a 2021 conference, if everything goes well, in New York City. So subscribe to our emails. You can also see our website is tastemakerconference.com. You can subscribe to our email list there to get more information. If you would like to come, we would love to see you there, and you want to grab one of those last tickets.
Ashley Segura (01:01:52):
Awesome. Thank you so much for joining us Abbey, and thank you Casey, Andrew, and Arsen. We will be releasing a recap. It’s going to have all the resources mentioned in this, the Q&A answers, and of course the live recording. And so we’ll be sending that out with information for the next episode as well, which will be on September 16th about information architecture. Dun dun dun.
Casey Markee (01:02:17):
Be safe out there everyone. Take it easy.
Arsen Rabinovich (01:02:19):
Thanks everyone.
Ashley Segura (01:02:20):
Take care everyone, thank you.
Abbey Rodriguez (01:02:21):
Bye.
