XHTML and CSS Tutorial - 10 - Resizing Images Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

what is going on guys welcome to your
tenth XHTML tutorial and in this
tutorial what I'm going to be talking
about is how to resize an image because
sometimes you just have images on your
website that are just either they're
probably way too big or maybe they're
way too long width wise so sometimes we
need to learn how to resize an image so
they fit better on our website so what I
did before this tutorial is I went ahead
and I took a huge image of this video
game right here Madden what year is it
Madden 10 and I threw in my directory so
I you know I didn't want to show you
guys me doing that because it would just
waste time but this image is way larger
than we need for our website so we need
to figure out a way to resize it and put
it on our website so first and foremost
what we want to do is actually get on
our website before we start shrinking
stuff so let's go ahead and we know how
to do that image let's go ahead and put
our ending tag right now and for the
source the name is Madan one dot jpg so
let's go ahead and save this and see how
it looks
oh mama this is like the biggest image
ever I was ever gonna be to be able to
tell what that is that's like a
billboard size image right there so we
want to shrink it so it's like only 150
pixels tall so in order to shrink that
image here's what we need to do not only
does the image parameter or excuse me
the image tag take an attribute called
source but it also takes another
attribute called height and we can set
this equal to a ever number of pixels we
want I want my image to be a hundred and
fifty pixels tall so for height set it
equal to 150 now go ahead and save this
save this what the heck save this and
refresh your screen gotta get all my s
is in order and refresh it and see what
we get yeah that's a whole lot better
than that big mumbo-jumbo billboard
poster we had on there earlier so now we
have a beautiful small 150 pixel tall
Madan 10
image so you know if you were making a
site like eBay or something that might
come in handy
so before I just let you guys go I want
to talk to you guys about a couple
things you know this is gonna be useful
information later on whenever you've
resize an image this way it doesn't you
know make your you might be thinking
this all right I'll make all my images
smaller in that way my webpage will load
faster because the file size will be
smaller it doesn't work like that
what your browser is doing is it's
loading that huge big image you know
downloading however many bits that is
and then it's shrinking it so you're not
loading a small image you're loading the
huge image and you're just making it
look smaller so in that sense your web
page is not going to speed up at all it
has to download that huge image no
matter wha so it would be better if you
wanted your web page to load faster if
you went ahead into a program like
Photoshop or something and actually took
this image and shrunk it so the image
size was smaller itself and then you
just posted that on your website so in
that way that's what you should do you
shouldn't always you know take huge
images and just post them and resize
them down like I showed you right here
what you should do the preferred way is
going to a fit or excuse me an image
editing program and make it a smaller
file and then put it on your website so
that's a lot easier way it saves your
browser's excuse me your browser from
doing any extra work so we're saying all
right Bucky why the heck would you even
teach me that if that's the preferred
way to do so well that Way's helpful
when you know you are going to be making
an image like maybe you're making a
website with a logo it's useful when you
add images to the website but what if
you had a website like amazon.com or
eBay or even Facebook where you loud
users the upload images of any size and
you shrunk them down to what you wanted
them going to be well I think I just
answered my own question this is only
useful whenever you're going to have a
website like eBay where you can say
right upload any size image you want and
I'm gonna shrink them so they all fit
nice and neat that is when you would
want to use something like that but
trust me making websites like eBay and
Amazon are a couple tutorials away from
now so anyways that is the basics of
resizing image when you should do it and
when you shouldn't do it and why it
doesn't save you any loading time to do
it this way say anyways thank you guys
for watching and the next story I'll
probably be talking a little more about
images maybe finishing them up so
anyways practice adding some images your
website and let me know how it goes so
thank you guys for watching I'll see you
later