How To Optimize Images For Web Performance Without Losing Quality

in this video i'm going to show you how to optimize your images for a top-notch web performance and of course without losing quality hello i'm your host casino from casino.com i'm the digital alchemist and today i will show you how to optimize images for your website with either premium or completely free software but that's not all because i will also share with you a few great resources to get quality images and videos for your website some free some premium so make sure you watch until the end to find out now images are essential in the aesthetics of a website and the overall impression that it creates but images can also be the worst enemy of your website because they can make it slow and not only is it very annoying for your website visitors and potential clients but it's also bad for search engine optimization also known as seo and as you know google doesn't really like slow websites now depending on the platform that you're using to create your website like wordpress for example there are a few plugins that can optimize your images but we're not going to talk about this in this video and for a very simple reason our websites are already full of plugins so yet another plugin is not something that you may want because it has more bloat and more moving parts which makes maintaining the website even harder what's more image optimization plugins can add a lot of stress on the server while your website is hosted especially if your website is on shared hosting which is the case for many people so a much better approach is to optimize your images before they actually even make it to your website okay with that out of the way let's get started and we'll start with affinity photo okay in case you don't know affinity photo is the best alternative to photoshop in my opinion it's pretty cheap it's like 54.99 in euros probably the same in dollars and you only pay once so that's the great thing compared to the adobe photoshop okay so we'll start with this picture and as you can see here the size is 14.8 megabytes so roughly 15 megabyte and roughly 15 000 kilobytes now our goal is to go from 15 000 kilobytes to 400 or 300 kilobytes or even lower okay so the first thing i'm going to do is to right click on my image and click on open with affinity photo now i'm on a mac but if you're on a pc there should be a similar procedure then i'm going to make sure that on the right hand side in the panel i have my layer selected and then i'm just going to hit command c on a mac or ctrl c on a pc or you can go to edit and just click copy okay next i want to create a new document but before i do that let me show you the size of this document so this document is 16 024 pixels by 14 024 pixels which is way too high and the resolution the dpi 350 that's way too much we don't want that we want a web friendly size so what is a web friendly size now there are so many sizes you can do pretty much anything you want but one common size is a size with a 16 by nine ratio so let me show you i go to file new and then for the page width is going to be 1920 and the page height 180 and for the dpi i choose 144. okay that's the common size for full hd but nowadays we get more and more retina screen 4k screens 5k screen so if you're going to use this image for a full screen full page background it's going to look a little bit mushy so we want a higher quality so we could use something like 2560 by 1440 let me show you so this is the ratio so it's like a really a cinema ratio now if you take a look at our original picture it's a bit taller it looks more like a square well not really a square but as you can see it's taller than this so if you want another good ratio let me show you let's go to file new and this time it's going to be 2560 still the same thing but then for the page height it's going to be 17.06 click on create okay and now because we've previously copied our image we can go to edit paste or we could have done command v on the mac and control v on a pc now i'm just going to zoom back out i'm going to select the select tool which is the arrow here in the toolbar on the left hand side and then i'm just going to resize my image and as you can see it snaps perfectly you don't want to have any space on the top bottom left and right okay so that looks alright and now i'm going to save so i go to file export and now it's asking me which format i want now by default mine is set on jpeg yours might be set on png so just go to jpeg and then you can play with the slider and as you drag the slider on the left hand side you can see the estimated file size at the bottom so for this first step we want to be under one megabyte even lower if we can with a good quality so i see i have a lot of room here so let me try 90 so 90 is 523 kilobytes which is not what we want but this is just the first optimization so the real magic comes with the second optimization so this is good 90 is going to be pretty excellent quality so let me export this so i click on export then it's going to ask you where you want to save it so i'm just going to give it a name and change it to affinity up to one click on save and now if i go back so here is my image and the final size is 536 kilobytes which like i said is not what we want but let's fix this now so open your browser and go to the squoosh.app website and then i'm just going to drag the image onto the window and now it's going to ask me which format i want now i'm going to select webp because i'll be using this picture with wordpress and wordpress natively accepts webp but if you need something else if the system you're using doesn't take webp then you should use moz jpeg so i'm going to be web p and bear in mind not web p2 because it says it's unstable okay so webp and then you need to select equality let me try with 85 and as you can see we got a 74 reduction size so now the final size is 138 kilobytes so let's save this let's change the name and hit save and the final size is 138 kilobytes not bad we went from 15 000 kilobytes to 138 kilobytes so let's take the calculator so 14 800 divided by 138 we divided the file size by 107 times how crazy is that and if we take a look at the difference in quality between the first and second optimization honestly i can't see the difference okay next let's look at the process with adobe photoshop okay so first of all i need to open this picture with photoshop so i'm going to right click click open with photoshop now i'm on the mac so if you're on a pc you should have a similar procedure okay next i need to copy this image so i'm going to press command plus a on a mac and control press a on a pc and as you can see now the whole image is selected and then i'm just going to copy the image with command c on the mac control c on a pc okay next i'm going to go to file new and i'm going to change the size of the new document so it's going to be 2560 by 1706 just to keep the ratio and for the resolution i'm going to type 144 click on create okay now i can just hit command and v on a mac and controlling v on the pc and that's going to paste my image okay now let me zoom back out and now i'm going to hit command plus t on the mac and ctrl t on a pc and then i'm just going to drag and resize the image okay that looks about right let me hit enter and now i need to save my image as a jpeg so there are a few ways if you go to file you can either click on save or save as or save as a copy but we're not going to use that instead i'm going to go to export and then save for web legacy okay so as the name says this is going to help us to save for the web mine was set on png as a default and we don't want that so in the drop down here select jpeg now mine was already set on the quality of 85 and it tells me that it's going to be 942 kilobytes so in the first step we try to aim under one megabyte i'd like to be closer to 500 or 400 kilobytes but hey 900 okay let's do this so click on save so it's going to ask us where we want to save it let me give it a name hit save okay so now if we take a look the final size is 966 kilobytes so it's still better than 14 megabytes but still not quite what we want so for that let's open the scrooge.app website and i'm just going to drag the image and now we need to choose the format so i'm going to choose webp now the quality i'm going to choose 85 and as you can see the file size has been reduced by a whopping 86 percent so it's now 130 kilobytes so let's save this let me change its name so it's going to be up to hit save so we went from almost 15 megabytes to 966 kilobyte down to 137 kilobytes so we divided the initial size by 108 times and once again it's hard to tell the difference so this is the initial file so 15 megabytes this is optimization one and this is optimization too now of course if you start to pixel peep you will see a difference but just looking at it like this on a beautiful retina screen it looks beautiful i mean i can't really see a difference except of course that we divided the initial file size but more than a hundred times okay now let's take a look at a completely free solution and this solution is called photo p so photo p.com okay so as you can see it looks a lot like photoshop or affinity photo except for the ads on the right hand side but it's understandable because after all it's a free tool so click on open from computer select your file click open and next you want to go to edit copy then you want to go to file new and where it says width you want to type 1560 and where it says height you want to type 1706 then click create and now you want to place the image we just copied so you can either use a keyboard shortcut or you can go to edit paste and then you want to go to edit one more time click on free transform and let me zoom back out and now we want to resize our image but you want to hold the shift key on the keyboard so let me show you i'm just going to resize because if you don't hold the shift key this is what's going to happen it's not going to look good so make sure you hold the shift key until it snaps and once again you don't want any black bars at the top or at the bottom on the left or right hand side so once you're happy with the result click on enter great next you want to go to file export as jpeg and now you can select the quality like we did previously so i'm going to pick 90 just like i did for affinity photo and here at the bottom i can see the estimated file size 360 kilowatt which is good actually for a first optimization so let me hit save and i'm just going to type a new file name hit save okay and now let me select the file i just saved and drag it onto the scrooge.app window once again let's select webp the quality should be 85 and we're down 73 percent with 101 kilobytes so let's save this so for photo b we went from 14 800 divided by 101 so we divided by 146 times all right so let's take a look at the final results okay so this is the original image which is 14 and 800 kilobytes then we have the final affinity photo optimization 138 the photoshop optimization 137 and last but not least photop 101 kilobytes okay but now let's take a look when it's maximized so this is the original image and next this is affinity photo so you can see right away there's a slight difference in color actually not a slight difference it's a big difference in color so you may want to watch out for that now in terms of quality is the same quality here we're just talking about a different tint okay next let's go to photoshop so the photoshop is really good also and it kept the original color of the image not quite exactly because when you go from the original image to an optimized jpeg there will be some differences so this is photoshop and then we have photo p once again a different tint if i can call it like this but still very good quality but you can see there's a difference between photoshop and even the affinity photo one because those two affinity photo and photoshop the quality uh the sharpness it's really good but then when you go to the photo p one it's still very decent it's still very usable but here on the retina screen i can see the difference maybe you can't see it with the youtube compression but like i said it's still very usable it still looks really really good especially because it's a free tool now at the beginning of this video i told you i will show you some great resources to get images for your website so let's take a look so the first resource is called pixabay now pixabay comes with over 2.5 million of high quality stock images videos and music shared by their talented community so you can use all of these on your website and it's really looking great it doesn't look cheap for a free resource and that's what i love about pixabay now let me show you if we type architect this is what we get so bear in mind that the first results are not from pixabay if you click on any of the results here it actually takes you to i suck by getting images and you have to pay for these images now it's understandable it's a free service it's a free tool so they still need to make some money okay but the rest of the pictures here are free so you can pick any picture that you want so let's open this one for example and as you can see it's really good quality you can get all the details from the pictures was taken on a nikon d700 i mean it looks really really good and here is the pixabay license free for commercial use no attribution required so that's great next pexels now i don't know how many images and videos are shared on pixels because it doesn't really say but it's the same principle looks really good really quality images you don't find those cheap images and that's what i love about those resources i'm sharing with you today so once again if we type architect we have those results let me open this one as you can see it looks beautiful i mean the quality is really really good it looks really professional and you can see because there's been almost 4 million views on this image alone so the quality is really really good next and splash so unsplash brands itself as the internet source of freely usable images powered by creators everywhere once again there's a lot of quality material here but it seems like they only have pictures unless i'm wrong and one of the great things is that you can filter by category so here you got entrepreneur wallpapers 3d renders textures and patterns architecture and so on so if we type architect once again the first results are actually not from unsplash they're from istock by getting images so you need to pay for this but if you scroll down this is where you get the free images so let's open this one for example so as you can see it's absolutely beautiful and you can download it for free in small medium large or even original size and that's amazing now these resources are absolutely awesome but one of the downsides is that because they're free everybody using those resources and you may find yourself seeing the exact same picture on a different website and you might see that picture everywhere so in that case you may want to broaden your horizon and go premium and one of the premium resources that i recommend is envato elements and it's premium but it's pretty cheap because it's about 16 per month now i know for some people that's going to be a lot of money but as a professional think about it you can make that money back in a few minutes if not a few seconds for some people but you get my point you can really make that back especially because it's not only about pictures let me show you it's about stock video video templates music sound effects graphic templates graphics presentation templates photos fonts add-ons web templates and even more that's crazy get all that for 16 dollars per month and no i'm not sponsored i truly love this service i mean this is really a game changer especially when you are a freelancer or you run an agency okay so let me show you if i type architect i get 45 000 of results but it's split between photos videos and the other categories so for the photos we have 26 000 results so these are the images so let me scroll let me open this one and as you can see professional quality beautiful lighting now bear in mind that because they don't want their photos to be stolen they put a watermark and they degrade the quality as you're watching them but when you download the final image if you subscribe the quality is just beautiful so let's close this and now let's go back up and one thing i absolutely love about envato elements when it comes to photos is that it's got a second stock website because they purchased 2020 so if i click on go to 2020 and by the way this name i mean they could have found a better name than 2020 and you know what i'm talking about but for the rest what i like about this stock is that they got a lot of non-stock looking images now some look a little bit less professional but that's on purpose so for example this one once again they put a watermark and they degrade the quality but don't worry the final quality is great but if you want a picture that looks more like a picture that you could have taken and not really a stock image because you know people get used to stock images and when it's too stocky you know it looks fake so i quite like that about 2020. now they have some in-between images that look really professional you can see it's stuck but still it looks a little bit less stocky and that's what i love about this one like for example this one let's say that you build a website for an architect and you want to show some plans but you don't want people to feel like it's a stock image that's the perfect image and you don't pay them extra if you got your envato element subscription you get free access to 2020. now there is one more thing that you can do and that will be the cherry on the cake and it's simply to give this video a thumbs up if you appreciated this content because it really really helps the channel it's only going to take you a split second but that's going to help me so so much and if you want more web design goodness make sure you subscribe and smash the notification bell so that you don't miss anything now if you've made it this far image optimization should have no secrets for you anymore and i'm really excited about how you're going to use this new knowledge now if you'd like to know how i organize my website files and assets make sure you click on the video appearing on screen right now and don't forget i'm trying to build the content i wish i had when i got started so i'll see you in the next one and until then take care and stay safe

Channel: The Digital Alchemist

Views: 75,608

Keywords: how to optimize images for web performance without losing quality, how to optimize images for web, how to optimize images for web without losing quality, how to optimize images, optimize images for web, optimize images for seo, optimize images for website, resize image without losing quality, saving images for web, optimize images, web performance, optimize images wordpress, optimize image wordpress, website images, bjorn, online image compressor, resize image, shortpixel

Id: bfACnNIw2qA

Length: 20min 10sec (1210 seconds)

Published: Mon Feb 21 2022