Website Image Optimization | SEO

Articles, Blog

Website Image Optimization | SEO

Website Image Optimization | SEO


if you want to load your website fast
you need to know how to properly resize optimize and compress your imps so if
you want to learn how to do it stay with me what’s up source hackers
Senaid here from codingpassiveincom.com the place where I help others to become
a web developer much faster than they will do it on their own so if that is
something that interests you consider subscribing so first before we
actually start with this video I want to show you one of the main problems that I
can see on like a really big number of websites and that is that image are
first off not properly sized and then they are not optimized and compressed at
all so if we take a look at this image it looks really normal
nothing’s but here but if we try to refresh this page you will now see that
it is going to take quite a lot in order to load entire image and like I said
this is something that is happening really really often and if I will
refresh okay so let’s say Network and then I will refresh so I’ll stop this
one and refresh again let’s now check the time here check how long does it
take to load and time image so as you can see it really takes a lot of the
time and one of the first things that I usually suggest to do is to properly go
and resize your image because let’s say I will use grab this small tool click
here you can see now that this image is actually on the page 500 pixels but if
we actually open this image in the new tab you will be able
that this image is like really really big and as you can see it’s five
thousand seven hundred fifty nine pixels by three hundred two thousand eight 898
which is like huge image you can see so not most people when we say that they
need to resize the image they usually think that they need some expensive
software in order to do it and it is a case because if you want to go with the
Photoshop or any other tool it is pretty much expensive but there are big number
of online image tools that we can use to properly resize image and one of those
tools is resize image net it is something that I use pretty often
because it does a great job and as you can see i am using the linux and on the
linux i don’t have an ability to use tools like a photoshop of course there
are some other tools like gimp but it’s not something that I prefer this is just
much easier so the process with this tool is that we need first to upload our
image once it’s uploaded they will show it here so let’s just wait a few seconds it’s here now they give you an options
to crop your image if you want but in our case we don’t want we want to use
original trust so we can see the difference in the size and the speed
load then after that you are able to rotate if we want to and then at step
four this is what is important for us which is to resize our image now we can
resize it by percentage so we can change it and as you can see what will happen
but as you can see for our website we actually need 500 pixels so I will say
inside this tool that I want 400 pixels and then I want to keep aspect ratio so
that it’s properly resized and then they have calculated and said that it needs
to be 308 Hey which is fine for me okay for the
options down below we are able to choose like what we want but I usually say no
film we don’t want image distortion and then down below we are able to make some
additional options I also just say I want PNG and that’s it I will leave it
to default compression and I will hit resize image now within a few seconds
you will be able to see that they have resized and they says that our old image
is 11 megabytes and the new image is 300 kilobytes so I will download image now I
believe that you expect that quality of this image will be really really bad
but when I show you comparison I think you will be surprised but let’s see so
let’s say resize and I will say now here I have created just very basic HTML
document where I load the image so first one is original then I want to use the
resize it okay sighs and of course I upload
everything to my website because if I tell this on the localhost we wouldn’t
be able to properly see the difference on when the page loads so let’s see now
I will hit refresh again circusy now this
resize that image is already loaded while the original image it really takes
a lot of the time and it keeps loading so let’s do it once again so we can also
take this part in the network so hit refresh okay boom just can see our first
image that is resize it is loaded one point 57 seconds while the second one is
taking really really long time okay now one additional method that I usually use
in order to optimize image image even more is to compress those images so for
that I’m using one again free to it say it the name is tiny PNG website tiny PNG
calm and process is again very simple I will upload resize it image they will
immediately compress and I will be able to download as you see they say that
they have made it 75% smaller image and that way you can see in the first we had
350 kilobytes now it’s only 80 kilobytes now let’s download and I’m sure that
again you will be like you are thinking that this is going to lose the quality
etc etc but stay with me so now I will say this one is compressed
okay and I’m going to upload those two again okay and let’s check our website
now so hit refresh and now as you can see again the difference third one is
loaded like immediately then the second one the one in the middle and then the
first one which is the original image and now if we check our network tab we
are able to see like huge difference in the speed load as you can see even
compressed image load like a second small faster than only resize image and
if you take now a look at those three images I’m pretty much sure that you are
not able just like me notice any difference between those three image
except in the huge difference in the PageSpeed load now of course you can see
now that there isn’t like a huge difference between the one in the middle
and the last one in the the terms of the speed but if you have like 10 20 50
different images on your website that can like make try normos difference in
the speed of your website so pretty much to sum this video you have like two
steps like first one is to resize the image then after that go and compress
that image and that’s it you need just a few minutes and the speed of your page
will draw us to dramatically increase and it will be much faster so guys I
hope that you have enjoyed this video if you do please like it and shape to your
friends and like always if you have any questions or anything make sure that you
post that in the comments below take care

13 thoughts on Website Image Optimization | SEO

  1. Hi, Thanks for the Great tutorials,
    Can you please make a tutorial on how to create a simple membership website with paypal subscription with PHP OOP,

    Thank you!

  2. I wouldn’t recommend using a PNG unless your image has transparency or you really need the highest quality also
    anybody interested in faster loading times should look into GZIP

  3. Pozdrav senad iz makedoniju , video ti je super kao svih ostali. Daj mogu nesto te pitati sta mene dugao interesirao. Vidim neki stranice kad kade mozes downlodirati so linkovi video iz Youtuba. Ako bih mogao da me upatis na toj smer kako se to radi , jel koristiju ne Youtube API ili direktno iz JavaScripta , bio bih mi jako drago.
    Hvala od napred i pozdravujem te puno , i samo napred .

  4. That's great.
    However, if we have an upload pictures website, we can't do so…
    Just think about it for a second: let's say, for example, that thousands of images are uploaded every second, we can't download each one, optimize/compress it, then replace in the source. That will take forever…

  5. This is really interesting. I knew that Images make loading time much longer but not by this much. Learned something today. Can't wait for the next video. Good job.

  6. Hey, i have a doubt
    i m giving image link in href for maginic popup, and using thumbnail image on click,
    is it took long time, than using both thumbnail and orginal image

Leave a Reply

Your email address will not be published. Required fields are marked *