Image Optimization For Websites And Blogs | Web Donut | Skillshare

Image Optimization For Websites And Blogs

Web Donut, Design products and assets for creatives like you.

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
5 Lessons (21m)
    • 1. Intro

    • 2. Why Optimize

    • 3. Image Optimization

    • 4. Free Optimization Tools

    • 5. Thank You


About This Class


Every day, billions of images are being posted to blogs and websites, populating the internet with more and more great content. But instead of optimizing before posting, people are just uploading those images as they are.

In this course you will learn why it's important to optimize before posting, what are the benefits of optimizations as well as how it hurts your website or blog if you don't.

You will learn some tips and tricks that will help your website rank higher in search engines, give you free tools to help you with this process, save you money and most important of all, give your visitors a better experience on your website.

So click enroll and let's get you optimized! 


1. Intro: every day, billions of images are being posted two blocks on websites populating the Internet with more and more great content, but instead off optimizing before posting. People are just uploading those images as they are. Hi there. My name is Alex, and in this course I will teach you why it's important to optimize before posting. What are the benefits off optimization, as well as how it hurts your website or block? If you don't, I will show you some tips and tricks that help your website rank higher in search engines. Give you free tools to help you with this process. Save your money. And most important of all, give your visitors but better experience on your website so quickly roll and let's get you optimized. 2. Why Optimize: so you might be wondering, Why should I even optimize my images for the website when I upload them? I hope the website does it for me. Well, actually, it doesn't. It has some basic compression, depending off which CMS are you using. But it's important for you to optimize your images in order to create the best possible user experience for your visitors. So if you don't optimize your images, your website load times would be a lot slower, which in terms hurt you in the Google search, your whole search being searching so long because it increases your bounce rate, which is a rate at which your visitors leave your website. So, for example, if oversight takes 0.5 seconds to load the image, visitors will be happier because they can easily scroll down to see the next section next image in someone. But if the same image takes three seconds to load, many people just don't have the time toe wait for that image to load. They will just leave, which is called the bounce rate and were rich in term will hurt you on search engines and the other reason is people with slower Internet speeds. So depending off where your audience is from, if it's from, let's say, developed countries with faster Internet. It's really not the issue. But if your audience is global, keep in mind. People in the US don't have the same speeds as's people in India, people in the South Korea and so on. And the next reason is you're hosting space. So you're paying for your hosting, which is just a regular heart drive in some companies warehouse hard drives as they go. They have the limits off space, and the companies just can't work. Can't wait toe Upsell you some more space. So why should you pay extra money every year to the company's when you can easily optimize your images and save the hosting space and in terms, save the fees you'll pay for the hosting otherwise, and one final reason is uploading times. So if you're uploading an image which is just one megabyte on underhand, you're uploading an image which is, say, 20 megabytes. It will upload faster, which will save you time time, which you condemned. Invest in some other things that you need to do for your blog's or website like write articles, optimize it and so on. 3. Image Optimization: Now I'll show you inside of full shop. What? I mean, in the real template, I will not go into details about websites because each and every website and each and every content management system has its own quirks and features. So work breast, for example, would will be different than Shopify Shopify would be different than magenta and so wanted . So So I'll just show you inside of the four shop template. But mechanics are exactly the same. It will work exactly the same on any platform you're using. But it's not fair for me to show you inside of or press if you're using a magenta and so on . So just imagine you have this hero image right here, so if I zoom in on it, you can see how it looks like what it does. So it's basically a top image, so you can imagine this image being used inside of the block posts. So in this particular case, it's for the fashion industry, but it really doesn't need to be convened for an image. So you want to replace this image. Just imagine in your head that you are uploading it through your CMAs. So if I open it up. Here is how the image looks like. And if I go right here toe image size, it's showing me that it's Whit. It is 1920 pixels and heights 9 32 So just imagine these are they dimensions that the content management system is, um, allow me to upload. So basically, the template for the content management system is using these dimensions. So if the wits is 1920 pixels, there is really no point off using image, which is like 8000 pixels wide and so on. And if the height is 92 it really is that there is no point off using image off, Let's say 10,000 pixels high, because it just needs to over sample. It's the image you want fit properly and so on. And like we mentioned in the previous video below its times, bounce rates, angry customers and so on. So let me just show you what I mean. So, for example, this image if I hover over it as you can see, it's 5000 and eight pixels white in 3339 soul. And like we said in this example, it's 1920 by 9 32 And right here it's 5000 and 83339 So that in terms, uh, if I go okay, right here and just drag and drop this image right here, it will fit because this is a photo shop. It's a smart object and so on. But if I, um, scale it, you can see how much bigger this image really is. So it's four times bigger in wit and around three times bigger in height. So all of these lines that you see are the outside lines off the image. So if I, uh, upload it, it will look like this approximately. And then your content management system has to scale them down in order to fit properly so that in terms you will lose the quality off the image. And when it uploads, you will just waste your time because the images too large and so on and so on, like we talked in a previous video. So what you can do is use a tool like this. It can be full shop. It can be some online replacements which are free, like camera and so on, depending off what you're using. But Let's face it for the shop is the king in this industry and has been for years. So it's really the best tool for image optimization, in my opinion. So what you can do from here is go right here to the file safe as and then choose your desire formats J pack in this example and click save Now this style ogle pop up as you can see right here if you're using for shop and you're using this method, image, optimization and quality are set to maximum in this case, and we have a 1.2 megabytes file size. So, uh, we optimized it down and it's now 1.2 megabytes. But in the next video, I'll show you how you can optimize that even further. But right now, I just want to quickly mention if you're using a professional photograph. Ah, and you're using a professional camera or you're simply using a photographer for your business and, for example, you have some products that you're displaying on your website or blawg. Keep in mind these tips and say to that photographer toe, optimize your images before hey sends them to you. So learn all of these sizes. If you're using a developer, ask a developer they will say to you. Okay, here is the cheat sheet. Here is the size guide. Then you can send that size guide to your photographer. They know this stuff so they will optimize your images before upload. That way, you can streamline this process even further because you are not the one who will be doing all of this. They will be doing it. So if you don't have a developer and you're doing ah, your photography all by ourself, just go inside of the read Me file or just the development docks for your content management system. If you're using WordPress, you will be likely using a team. Just go inside of the team and learn what are Desai's is for that template that you're using so you'll be prepared in advance to use those sizes instead of the regular size is your camera just pops out when it shoots those images so you can optimize this process before uploading the images and not after you upload them. So from here, simply quick. Okay, save your image and that's it. It will come to this image in the next video and I will show you a free tool that you can use for Windows and another fetal for Mac toe. Further optimize thes images before posting. 4. Free Optimization Tools: Okay, so now that we saved our image from photo shop, I will show you how it looks like inside of the folder. So here it is, and we take a look. Decisive is right. So 1920 by 932 And the follow size is 1.14 megabytes. You might be thinking, Well, that's not so bad, but it really is. So you can always reduce the size further and further, but not to go too far, because then you'll end up with a really good file size but really terrible image quality. So it's really important to find the balance. So let me quickly show you what you can do. You can use these free image optimization tools. So for Windows, it's this one riots. It's really good. We're using it for years and from for Mac, its image optimum. So for both of them, you condole them for free right here. It's his pricing, but it's for the advanced option, really. For Mac, you can search inside of the APP store. You can find hundreds of these APS. All of them are doing exactly the same job. All of them just picture to Donald the free wants to test them out. And if you're happy with them and they have some advanced options by no means just purchased him. But you have literally hundreds off free options inside of the APP store, but for Windows and because I'm using windows right here, we're using rights so you can quickly wheat right here. What is right? How it works, the logic behind it, the technology, because behind it, you can click quickly. Click right here it says about you can read about the founder and so on. But you can download it from here or from here. And when you open the rights up, here is how it looks like. So it's Ah, really simple and easy to navigate interface again For the Mac caps, it can be exactly the same or a bit different. You can open one image of the time when you can open batch images, so this option is useful. If Asai mentioned in the previous video, you're using a photographer and they send you like hundreds of images. They don't optimize them before they send them to you so you can click here and optimize them yourself all at the same time right below. Here, you can choose the format off your image. So Jay Peak, PNG or Jif or GIF. But I will click open and let's open our image up. It will say right here that the file is the high resolution. Do you want to resize it first? Now re sizing it. You'll see what it means. It's not changing the dimensions off your image. So when I click, yes, it will show us this 1920 by 932 pixels. So that's fine. You can see original size right here at the top resembling filter. I'll say, Just leave it as it is, because it's really the best option, So just click OK, now. What happened here is you can see the initial image. File size is 1.14 megabytes, but now it's resized to 1 82 kilobytes. So, as you can see, it's a huge improvement and huge savings off space. You can see right here at the top. It retained the same dimensions, so we're good to go there, and 24 bitch J pack is just resembling filter they're using in this example. So what happened here you can increase or decrease the quality off your image. So this optimized image is at the 80% of the original quality, which is still very good. All of these options really don't don't need to interest you, but all of them are technical. You can click right here in the metadata image adjustments and just go into this a lot more if you want to, but you really don't need to. You can just simply open click OK and then let it do its think it will resemble an image and just click Save. You can replace it or you can rename it and just click. Yes, so if I minimize this, go back. We have an image, which is 1920 by 92 which is what we want and 1 82 kilobytes, which is a lot better. So if you do, you're meant you can upload the roughly seven or eight images for the same file sized the original image head. But I have here some other images that I want to show you. So, for example, this one, if likely quite here it's a 65 It's good, but check this one out. 5760 in which by 3840 in height and 13 megabytes in file size. So do you met. If we can upload roughly seven images for one megabyte like this, just imagine how many can upload in 13 megabytes. This one is 11.2. This one is 11.5. So let's open this one just for fun and see how can it reduce its file size, So go back to right Click open. It's this one double quick. It will give you the same window again. Just click. Yes, as you can see 5760 by 3840 Now before opening. You obviously want to resize it inside of the photo shop or inside a firm whatever program you are using, and then optimize it further. But let's do it like this, sir, Click OK, and as you can see here, 13.1 megabytes was the original file size. It reduced it down to three. As you can see, it's the 80% off the original file size, so that's huge savings of space. Huge, hugely faster uploads. Time for you, Hugely faster. Donald's time for your visitors, as your image will load faster inside of, you know, if you're a blogger or website and it will give them a better user experience. So as you can see, this riot tool is a huge time saver. Huge, early, useful app. And I really recommend that you download and use them on every single image that you upload because it can really help you down the line. So when it could save quick yes, close the rights. And if I click here, you can now see it's three megabytes in size with exactly the same dimensions. And as I mentioned before, you can go inside of full shop or which area app or program you're using and reduce the dimensions to the required dimensions off your website template or Seamus. Not one last thing I want to, uh, I want to mention is, If I co right here and go to the image image size, you can see that the resolution is 72 pixels per inch. Now, this is exactly what you need for the Web. And if it's for the prince, this can say 300 or 600 so on. Just be sure to check this resolution, because when you open some images up depending on how the camera was set up when it was shot. It can say 90. Or it can say, I don't know 1 30 or 300 or whatever, and I will just show you what that means. So this resolution is for the Web. It's great for the Web. It's meant for the Web, so just be sure to use a 72 pixels per inch. But if you encounter some bigger number right here, just keep an eye off what it does to the weight and height. So if I Type 300 for example, just see how much it increases the size off this image in both width and height. So just use 72 just that tip will reduce the file size all lots without really losing too much of the quality. Just make sure to find your own workflow what it works for you and just go from there. Image optimization is really important thing that you needs to be doing for your website and just make sure to take it seriously because it can really help you down the line. It can really increase your website speed and your customer satisfaction, which at the end of the day is the most important thing 5. Thank You: thank you once again for watching discourse, and I hope you found while you in it. Although it may seem like a lot off information, keep in mind that this is a long game and that your customer satisfaction and your visitor satisfaction is the most important thing for your website or block and your business after all. So keep all that in mind and implement the steps inside off your workflow and you will see in time it would just become a part of your routine. So thanks again for watching and until next time. Hell, so it a