How to Make Your Website Images Look Great, Load Quickly, and Improve Your SEO | Suzanne Scacca | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

How to Make Your Website Images Look Great, Load Quickly, and Improve Your SEO

teacher avatar Suzanne Scacca, Freelance Writer/Website Builder

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

7 Lessons (30m)
    • 1. Create an Impressive Visual Story with Your Website Images

      1:19
    • 2. Use a WordPress Theme with a Template

      3:31
    • 3. Avoid Cheesy Images

      6:45
    • 4. Prepare Your Images for Upload to WordPress

      4:29
    • 5. Compress Your Images with a WordPress Plugin

      6:18
    • 6. Optimize Your Images for Search

      5:34
    • 7. Next Steps

      2:28
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

96

Students

--

Projects

About This Class

You know that saying, “A picture is worth a thousand words”? Well, that doesn’t just apply to art displayed in museums or your friends’ Instagram posts. 

We are visual creatures and, as such, we don’t want to visit 90s-style websites with black backgrounds and flashing neon colors. We want to spend our time on websites that look modern and beautiful and welcoming. 

The images you use — and how you prepare them — play a big part in this. 

Whether you’re building a website for your business or you’re a web designer needing help choosing and optimizing images for your client’s site, this course is for you.

I’m going to share 5 tips that will help you: 

  • Select the right kinds of images for your site. 
  • Prepare your images so they look good and load quickly. 
  • Optimize your images for Google and improve your search ranking in the process. 

Before we begin: 

Make sure you have, at the very least, the beginnings of a WordPress website. You can take this course if you need help getting started.

Meet Your Teacher

Teacher Profile Image

Suzanne Scacca

Freelance Writer/Website Builder

Teacher

Oh, hi there! The name's Suzanne. Most days, you can find me writing about WordPress, web design, and small business management. On occasion, I write about strange speculative futures in which humanity is ruled by technology. And now... Well, I'm bringing website-building and SEO classes to Skillshare. Enjoy!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Create an Impressive Visual Story with Your Website Images: guys. My name is Susanne Skaff. Welcome to my next course. If you're here today, it's probably because you're working on the design portion of your website. And while your WordPress theme has gotten you part of the way there you have a bunch of filler content, filler images that makes sense for the theme but have nothing to do with your business. So today we're gonna look at five things you can do to find the right images for your website, optimize them so that they don't compromise page speeds or your brand identity and also help you, um, improve your website search ranking. So if you haven't yet bought your Web hosting plan domain name and installed WordPress, you're gonna need to hit, pause and take this course right here. Yep, eso That's my how to build a website with WordPress. Course you can get it done in an hour, get everything you need set up and then you can come back here and fill in all the images that you need. And for those of you who are ready, let's get started 2. Use a WordPress Theme with a Template: in this lesson. I want to briefly go over the role that WordPress themes play when it comes to your images . So you can see here that I have a couple of themes installed. I'm using the Astra theme. I also have a plug and installed called starter templates. Now, depending on which theme you're using, templates may already be included. They might also be called demos or starter sites. Now there are a number of benefits to using templates. Uh, the first is that you don't have to do any actual design. Work yourself if you don't want to. You can have an entire website built for you just by clicking and import. But so let's say this is the template that you've fallen in love with you want to use. Obviously, you're not going to keep the images that are in here because they're not unique to your business and they don't tell your unique story. You're still gonna have to go out there and find images to bring into your website. You can see that the Web developers already figured out a lot of the tricky stuff for you. So how to properly sized the image? How toe, create balance and have the right spacing between images and text and white space. So using a template is an incredible advantage because you don't have to pay the expensive fees of Web designer Beacon. Still have a website that's beautifully designed, well laid out, and all you're left to do is fill in the missing pieces. One thing I do wanna call your attention to before I move on to the next lesson is that if you use a template, you're gonna have to do a little bit of cleanup before you publish your website. What you'll need to do is go to your media folder, and once you start adding images of your own to your website, you're gonna see them here and you'll be able to customize all the details and whatnot, and I will go over that in a later lesson. But for now, what we need to focus on is getting all this extra stuff out of here, and it might not seem like a big deal. Um, it's just extra clutter, but in terms of performance of your website, and when I say performance, I'm talking about how quickly your Web pages load more files you have sitting here on your website, the harder it's gonna be for your web hosting to process your website and send it to your visitors. But what I would recommend is leave these here for now. Import your your template that you want to use and start customizing it. Throw in all the images that you want. Delete the sections that don't belong, etcetera, etcetera, and then when you're happy with how everything looks, you've already you've taken care of replacing all the placeholder images come in here and delete anything that does not appear on your website. And that goes for images that you've uploaded that you've decided not to use as well as all of the's. And while you can go through and delete them one by one by clicking, delete permanently is gonna take too long. So what you need to do is click bulk, select, and you can go through and check any image you wanted, deletes and click delete permanently. Yes, it's going to take a little bit of time, especially if you have templates that are full of images. But it's much easier to both delete this way than to go one by one 3. Avoid Cheesy Images: not gonna lie. Cheesy stock photos. They're not going to do anything for your business. I know they're very easy to find, especially on free stock photo websites. But by choosing ah, photo that looks very staged, way too polished or just screams cheese like think about things differently. That's cheesy. People don't want phony and motivational speeches in the images on your website. They want to see something riel. And I know that's not necessarily fair, because a lot of us just don't have the resource is to take our own photos of our businesses or it just doesn't make sense. I'm a writer. The only thing I'm gonna take a photo of is maybe my face and my desk. No one really wants to see that. So you have to get creative in terms of what kinds of images you used. Just keep in mind that images aren't filler. They need to serve a real purpose on your website. So spend some time looking through stock photo websites toe to find stuff that really represents your business and your audience. You don't want to throw something like this out there. That's it, just screams cheese, like the leader standing at the front of the room, staring right at drawing like would. What kind of message does that send anyone? If you're gonna put someone's photo on your website, make it be your own or make it be people who actually look like you or it looked like the people that you're serving now. I'm not saying that you can't use free stock photo websites. There are plenty of websites where you can get good good content. You just have to do more specific searches than business or consultant or restaurant or whatever you're building your website for. So you might even want to look for things like colors or locations. For example, this is my website. Um, this is a stock photo that I found, I believe on unspool ash. There were a number of reasons I chose this. The first is that I know that Blue is a very powerful color in terms of marketing. It feels very stable. It's very calming on, and it's good for building trust, and I just really like the aesthetic of it. And it blends well with the purple on my brand colors. So that was the first reason I also really like the Boca. This is, um, it's B O K E h Boca style. What this is is where you have some parts of, ah, photo that you can see clearly. But then the rest is blurred out, and usually they're lights in the background. So you get these almost like a spectrum of lights. Be, can't tell what's what's around it. And and I like that it. It allows me to put strong messaging on top of a strong visual without overwhelming it. So these are the kinds of things to think about. Um, if you read up on color theory, you'll you'll learn a lot about how to choose the right colors for your business. For me, Blue makes sense because I want my clients to. I feel relaxed into feeling ease when working with me. Let's say for you you're a fitness consultant, and for you, your job is being motivating and getting people toe work past their limits. So you might want something a bit stronger, maybe an orange or even a shade of red. Not anything to intends. You still wanna give it a more energetic style. So do a Google search for color theory, color psychology and figure out what you want. Those main colors you want to be on your website and that will help you find images that that work well for you as faras, which sites you should turn to. I mean, any of the top stock photo sites will work. Um, and just because you choose one site doesn't mean you can't use a mix of others. It's all about finding the images that work best for you. So let's say you wanted to find a folk of blue each photo. It's just random girl bees. But I like the idea of the Boca styling where it's blurry in the background, strong in the foreground. Um, another thing to think about is Theo. Orientation of the photos so you could see here. There are a lot of, um, you could see here there are a lot of portrait photos, meaning there longer than they are wider. And if you're looking for something, for instance for the banner on your home page, you want it to be a landscape photo. So something like this, and with many of these sites, you can actually filter those results so you could see here orientation. So if you know exactly where you're gonna place a photo, you can go ahead and select horizontal versus vertical or even square would work, and then you'll be able to narrow down your results better. So terms of websites pixels is really great. Unspool ashes. My favorite. This is where most of the images on my websites come from. Another resource to use, um is can VA. This is personally my favorite design tool. I don't use Photoshopped illustrator sketch anything like that because I'm not a professional designer. I don't need to pay for premium software. Instead, I just use can va um can va has its own stock photos so you can by photos from them. If you can't find them anywhere else, you can use templates, which I really like, because it helps them create photos for the perfect size. So, like I create a lot of my blah graphics here, um, you can use use it for social media. You can use it for other kinds of marketing collateral. It's it's very easy to use. Even when you create something new, you can set the dimensions if you know what you're looking for. or you can use like Blawg. Banner, I feel like, is a good one for anything on your website. You want it to be ah, landscape so longer than taller, and within the builder itself, it's It's really easy toe create. You can use one of their templates, or you can add individual elements and create your own custom imagery. 4. Prepare Your Images for Upload to WordPress: so the first thing we need to do is figure out if we need a transparent background or can just use the photo as ISS. Transparency is good for things like logos, illustrations, anything that has a central content piece and then the rest is blank and isn't meant to be part of the design. So, for instance, this is my logo. You can tell here, over here on the left that it's it has a transparent background because it's not surrounded by a white box, even though that's what it looks like here. So if we were to export this, it would come out with, uh, basically a see through background. And that's useful for websites that have, um, non white backgrounds. So, for instance, this Web site would be completely fine if we put a logo with a non transparent background onto it. So long as the background of the logo was white that were any other color, we would either have to change the background of this header, or we would have to export the logo as transparent. And that's something you can do with professional design software. You can also do it with can Va. But you have to pay for the upgrade, so either way, you're gonna have to pay. If you want to export a transparent logo or if you have a designer doing it for you, just have them do it something like this. You wouldn't need to worry about whether the background is transparent or non transparent, because because the entire photo is made up of content and you don't have to worry about the background showing or not showing the next thing to focus on when preparing your files is file type or image type. When uploading photos toward press, there are three file types you can upload J peg, PNG or gift. So whether you're exporting from your design software, whether you're doing it from a photo site like unspool ash, make sure that you have it in one of the accepted formats. Let's find an image that you want to use on your website, so let's just say this is one of the images you want to use. Go here. Size is the third factor. So with some stock photo states, you won't have a choice of what size you export your image, as that also goes for can Va. But that's mainly because you've already set the dimensions when you create either an image from a template or you size it on your own. So in this case, when you download, it's just gonna have you select the image type that you want to use. And in this case, P and G is the best quality image. It's gonna be the clearest sharpest. The only problem is when it comes time to compress it, it's not gonna get very small. They do tend to cause some issues with Paige speeds if use too many of them and they go on optimized. J Peg is good. Um, the only thing is, the small file size comes at the expense of the quality. You difference between the quality of Ah J Peg and a PNG isn't too severe. Part of it depends on how much you compress. It also has to do with the actual content of them. Is so for something like this. Because there's such fine detail I would recommend using a PNG for something like that Boca image I showed you on my website. A J Peg would be fine because so much of it is blurred already. That's really not going to compromise. The quality of the content with designing software sizing is already taking care of for you . You just choose your file format and download and with stock photo site. If they do give you the option by default, I always just go with medium whatever is closest to 2000 pixels, because when we bring it into WordPress, it'll automatically resize based on the space that we put it in, as I explain with templates earlier. But in terms of getting the highest resolution image and a reasonable file size, try and stick with images under 2000 pixels. 5. Compress Your Images with a WordPress Plugin: Once you've taken care of preparing your vile outside of WordPress, it's time to add your images to WordPress. Before we do that, though, I want toe introduce you to image optimization, plug ins or image compression plug ins while you conduce a image compression outside of WordPress. Many of the unlined re sizing tools will help you do that. I prefer toe do it through WordPress because you can automate it so you install the plug in and it just runs behind the scenes. And you never have to worry about your files being compressed again. And in terms of what compression does essentially, what it does is it just strips out the excess. So, as I had mentioned before, there's, Ah, big difference between how PNG and J pegs compress. PNG's tend to be bigger files because the image itself, the content itself, is preserved. What gets pulled out is meta data. So if you take the photo in Philadelphia, Pennsylvania, it's gonna take out that that little bit of data that tags the location with a J peg. However, it actually strips out some of the pixels in the image that said the the amount of pixel loss when you compress a J peg isn't that bad, especially if you said it for a reasonable compression level. Hear on Keys CD ends website You can actually see what it looks like when an image goes through compression, and this is a J peg. So this year is the original. This is what happens when you apply 50% compression, and this is what you see when you apply 80% compression. You could see that there's a little bit of deterioration in the in. The sharpness of the image, especially around here, gets a little bit dollar, but this is a photo of a dog. If it were on a pet website, um, I'm not sure that many people would be looking at the dog and being like it's unrecognizable. So this is just a example of how compression works, and Teoh kind of put your mind at ease. If if you're nervous about using J pegs in terms of which plug ins you should use, do a search for image optimization. I think your best options are going to be short pixel. There is a limit on how many images you can compress with short pixel um, the free version. So just keep that in mind. Optimal is really good, but just set it and forget it. Imagine FIEs another good option. Um, not only does it compress your images, but it converse them to Web P. This isn't something I talked about before in terms of file formats, because WordPress doesn't support WEP E. If you want to upload images into WordPress, they have to be J. Packer PNG Web P, however, is a smaller file size, and it loads insanely fast on your visitors browsers because word trust doesn't support it out of the box and because some browsers still don't support it, it's not always the best option, but imagine if I does make it possible for you to use it and to speed up your your images in your website. So keep that in mind if you feel like things just aren't loading as quickly as you want them to. Installing an image optimization plug in is the same as installing any other plug in you want to install. Now you want to activate it and then go through the settings, configure everything so that you won't have to worry about optimizing or compressing each new image that is uploaded to your site to show you how great these services are gonna show you my own personal website. This is optimal. This is one of the plug ins I showed you you'd see here that I've set it up with an A P I keys that I can connect to, uh, optimization service. And the settings here are very easy. Basically, if a plug and gives you a Nimitz optimization setting, go ahead and enable it. So image replacements? Yes. You want to use the optimized, lighter version of the images scale images and lazy load. Yes, but lazy low does is when someone visits your web page, your server loads all of the content that appears within their view. So it would be everything here as they scroll down the page on Lee. Then would images and other content load So it's a much more efficient way of loading a website. Also, take a look at the advanced settings like it said, Um, if you're nervous about what compression does to the quality of your images, you can actually adjust that here, So I like to keep it on the high end. I don't use a lot of images, so it's not too much of, Ah, big deal for me to have heavier images on my site. But if you do have, um, a lot of images say you have an e commerce website with a bunch of product photos, you might want to go a little bit closer to the medium high range just so you can scale back on the file sizes. There are other settings you can apply here. Re sizing. Um, making images look better on different devices. Again, there's lazy load that you can activate exclusions. You're really not gonna have to worry about this. Every image that you upload from your logo to the big banners on your home page should be optimized. Once your settings air configured, you can just let the plug in do its job so you can see here. It actually keeps track of all the images of uploaded, and it lets me know when it has compressed an image and how much I've actually saved, which is nice for me to know, because I don't want to have toe keep checking page feet insights every day to see how fast or how slowly my website is loading 6. Optimize Your Images for Search: all the work we've done today will help in terms of S E O. You've chosen beautiful, relevant images not just to represent your business, but dollars to represent the people that you're serving. You've taken the time to prepare the files that they're properly sized and inserted into the theme and then used all the right spacing and sizing and balance that the game developer has already determined for you. And you've also compressed the images to make sure the file sizes arm so large that they put a strain on your server and cause your Web pages to load slowly. So all that's really good. You're improving the visitor experience, and Google's going to notice that and in turn, rank your website better. But that's not the only thing you can do in terms of image. ASIO Yost is one of my favorite s CEO plug ins for WordPress, not just because it's really intuitive in terms off getting in there and applying search optimization is to your pages, but it provides a lot of guidance that you might not know if you're not a professionally trained S CEO, and this is useful not just for writing high quality content, but also for optimizing your images for search. This is the Yost s CEO block that appears at the bottom of any Web page or blawg Post you create. You can see here, this is my long post on as you link building. And this is the corresponding metadata for search. Is your opportunity to go in and control what Google actually publishes in search engines when people are looking for your content? But this isn't all that Yost does for you. If you look at your s CEO analysis, it will provide feedback on what can be improved in terms of S E O. For the most part, it has to do with key wording, um, metadata and linking. However, it does actually check your images to make sure you're making the most of this opportunity . So you can see here. I haven't done the image old attributes exactly the way Google wants me to because it's in red. All this means is the Ault or alternative text associated with my images don't accurately represent the content on the page, and in some cases it's not necessary. So you saw it. The home page of my website before, um, the blue Boca image with the gravel on the bottom, that sort of image. I'm not gonna bother optimizing for search because no one's gonna care what my brand image is. It's not gonna provide them with any value. No one's going to see it in Google images search and be like, Oh my God, this is so amazing. I can't believe I learned that this much. And when an image actually adds more value to the page in terms of information and not just branding, you do want to use the old text. It sends signals to Google that says all of this content ties together, and this is what I'm talking about. And it also gives you more opportunities to rank for Google in terms of images. So let's take a look at this page. I only have one image on it. Over here you have your image settings, the whole text. So to improve this, I would need to add this focus key phrase. So I might say how to get back links the right way and then as healing building course cover. If you have an image that is actual data contained within it So let's say, um, it's ah, picture of a graph and it's showing the decrease in sales over the month of August. This description would say past comparing August sales two dozen 20 um, decreasing from 90,000. Very, very descriptive. All text isn't just good for informing Google what the visual content of the page is about . It's also important for any of the visually impaired visitors who can't see your content. Their screen readers read this alternative text so that they don't miss out on any of the important content. Just one last thing to note about this. You don't want to go crazy with adding the keyword toe all of your images because you don't want them to cannibalize themselves. And what I mean by that is, let's say someone does a search for how to get back links, and they do a Google images search. You don't want every single image on this page or across your website to have to compete in search against one another, because they'll be so similar that they'll just cancel each other out and every other website will rank ahead of yours. So the first image on your page should include the focus keyword. All the others should include relevant keywords. So s CEO back, linking back link building, that sort of thing. We can update this now. Then they will return here. And you can see that Yost is happy with what I've done and I got the green for go. 7. Next Steps: can't really build a website without images. Thes days. Unfortunately, image just can cause problems. If you don't take the time to select the right ones, prepare them for WordPress and optimize them for search and speed. But with the fact tips that we've just reviewed, you should be well on your way to using images inward. Presley Pray, um, if you have any issues with anything, we've gone over. Any questions may be different stock sites stuff, maybe different stock photography sites to use or, um, other image optimization plug ins you're interested in. Just let me know. You can leave the questions in the comments. You can message me on Twitter. You could find me wherever on, and then, once you're done filling in B design and images portion of your website, it's time to turn your attention to the copy your contents really important because thes air your words to your perspective, customers and users and readers. And if you don't take the time to right it honestly and really try to connect with your visitors emotions and I'm not talking about, like, cheesy emotions, I just mean, like, do they need something right now? You need to be able to appeal to that. Um, but that's exactly what you need your content to do. You need it to speak to your audience. Also needed to speak to Google. And that's not necessarily something that any Joe Schmoe would know how to dio. Um, but you don't need to be a professional writer in order to create content like that. All you need is this 30 minute course that will teach you how to write s CEO content that your readers will love because it makes your page a lot easier to read and, um, stay engaged with and the content walls to be something that Google's bots can read. That means they can pick out all the essential info, know what your pages about and rank it for the right keywords. So if you're interested in learning how to do that, you can sign up for this course here and again. If you guys have any questions at all, feel free to get in touch. Otherwise I will