Introduction to HTML

Image Resize Q&A

Jen Kramer

AnnieCannons
Introduction to HTML

Check out a free preview of the full Introduction to HTML course

The "Image Resize Q&A" Lesson is part of the full, Introduction to HTML course featured in this preview video. Here's what you'd learn in this lesson:

Students ask questions about images on a web page and Jen discusses options for image resizing.

Preview
Close

Transcript from the "Image Resize Q&A" Lesson

[00:00:00]
>> Jen: So first of all, the number one question I'm getting about images is the resizing question. Can we just take an image and just drop it into our web pages and then use HTML and probably tomorrow you'll ask me about CSS. Can we use something to resize those images once they're inside of the Web page?

[00:00:18]
Yeah, just because you can doesn't mean you should, all right? Tattoo that on your forehead. So this is really a bad idea. The reason why is because when you have a great big huge picture that looks great on your desktop computer with its broadband connection, you wind up with that same great big huge honkin' picture of you mobile phone.

[00:00:43]
And it's going to eat up your data plan and it's going to take forever to download. So it's just really bad form to do that. It's way better to go ahead and get that image resized in some way or another. And there are approximately five bajillion different resize and crop programs for pictures out there.

[00:01:02]
Some of them are already on your computer because they came with your computer. If you actually buy digital cameras these days, you may have software that comes with that. And if those don't work for you, I just did a Google up here for free image resize crop software, resize meaning actually just changed the size of the image, crop meaning actually cut away parts of the image, so you have a smaller image and you get rid of some extra stuff.

[00:01:27]
So if you Google for that, there'll be a ton of results here. I haven't tried any of them. You're welcome to go ahead and give them a go. There's other things that will work just on your Mac, just on your PC. So feel free to experiment and find out what works best for you, okay?

[00:01:44]
But you should always resize that picture before you put it in the Web page. The corollary to that question, how big should the image be? And the right answer is?
>> Speaker 2: It depends.
>> Jen: It depends. [LAUGH] What is it exactly that you're trying to do with that picture?

[00:02:00]
So I think the real question that you're asking with that is, how big should my picture be or how big is the average picture on a Web page? Well, if you go back to that page that we built earlier with the image from Place Kitten, that picture was 200 pixels wide by 300 pixels tall, so that should give you a sense of how big things are in pixels because you're probably not used to working in pixels on a website right?

[00:02:29]
So I'll give you a sense of like how big that is, whether you should be a little bigger or a little smaller than those dimensions for whatever it is that you're doing, okay?. Do we have any lingering questions on images here in the classroom?
>> Speaker 3: If we want to put like a big image like add at the header, is that something to do with CSS or?

[00:02:48]
>> Jen: Yes.
>> Speaker 3: Okay.
>> Jen: You can do that with CSS and make it a background image so you can put text on top of it, if you wanna write something on it, or you could put it at the top of your page as an image. You won't be able to squish it all the way up into the edges of the browser yet.

[00:03:04]
You'll need some CSS to help with that.
>> Speaker 3: Okay.
>> Jen: Okay, yeah, so depends.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now