?

Log in

No account? Create an account

How to make an image show up using HTML - The online computery journal thingy of a turtle

Jan. 4th, 2008

05:41 am - How to make an image show up using HTML

Previous Entry Share Next Entry

It's fun seeing other people doing the album cover meme on my friends list, but apparently there are a few people out there who don't know how to do inline images in HTML. So, as a public service, here's how:

<img src="http://website.com/image.jpg" width="x" height="y">

Obviously, replace http://website.com/image.jpg with the URL of the image, wherever you've uploaded it; x is the width of the image and y is the height of the image, both in pixels. You can get the width and height values by right-clicking on an image and viewing Properties.

Or, to provide accessibility for people with sight or display issues, put a description in alt text:

<img src="http://website.com/image.jpg" width="x" height="y" alt="DESCRIPTION GOES HERE.">

The width, height and alt tags are optional but are strongly recommended.

And keep in mind that's SRC, short for SOURCE. One of the most common ways people fail at this is by typing 'scr=""' instead of 'src=""'.

The next time I do an image-related meme, I think I'll include instructions such as these just in case.

Comments:

From:ex_sonjaaa
Date:January 4th, 2008 12:21 pm (UTC)
(Link)
The alt tag is important for blind people and other accessibility reasons.
(Reply) (Thread)
[User Picture]
From:kinkyturtle
Date:January 5th, 2008 01:32 am (UTC)
(Link)
This is true.
(Reply) (Parent) (Thread)
[User Picture]
From:deckardcanine
Date:January 4th, 2008 03:41 pm (UTC)
(Link)
I've used that code before, but for the site that you had linked to, I couldn't find a JPG or other image file. And I was not about to save it anywhere.
(Reply) (Thread)
[User Picture]
From:kinkyturtle
Date:January 5th, 2008 01:33 am (UTC)
(Link)
What I'm talking about is people who were commenting on someone else's post and saying "I don't know how to do an image in a comment, so here's a link to it instead".
(Reply) (Parent) (Thread)
[User Picture]
From:akseawolf
Date:January 4th, 2008 04:05 pm (UTC)
(Link)
Note to everyone:

Please please please always include the HTML height and width tags when posting an image. Especially if the image is a thumbnail with a link to the full size image.

LJ has a setting that replaces large images with a placeholder when viewing your friends page. This setting can be enabled at http://www.livejournal.com/manage/settings/

However, all images that don't have height and width tags get replaced with a placeholder, so my friends page is full of .
(Reply) (Thread)
[User Picture]
From:yakko
Date:January 4th, 2008 04:17 pm (UTC)
(Link)
Moreover, supplying width= and height= attributes clues the browser in on what it needs to be rendering ahead of time, speeding up page display.
(Reply) (Parent) (Thread)
[User Picture]
From:orv
Date:January 4th, 2008 05:50 pm (UTC)
(Link)
But if you do use height and width tags, make them the actual height and width of the image. Don't try to make a thumbnail by making the height and width tags smaller -- resize the actual image. I hate it when I have to download an enormous multi-megabyte image just so my browser can resize it down to something tiny.
(Reply) (Parent) (Thread)
[User Picture]
From:timmowarner
Date:January 4th, 2008 07:15 pm (UTC)
(Link)
KT and I have dubbed images such as those "Dumbnails."
(Reply) (Parent) (Thread)
[User Picture]
From:orv
Date:January 4th, 2008 07:17 pm (UTC)
(Link)
That's a good term.
(Reply) (Parent) (Thread)
[User Picture]
From:discopanda
Date:January 4th, 2008 09:49 pm (UTC)
(Link)
What about taking a small image and using height/width attribs to /enlarge/ it? Like the logo on this page, which is displayed as 390x340 even though the image is 39x34? (and the same image file is displayed as 78x68 elsewhere on the site using h/w attribs.)

If nothing else, it loads a /lot/ faster that way, /and/ you can reuse the same image file over in other places, too. :-)
(Reply) (Parent) (Thread)
[User Picture]
From:orv
Date:January 4th, 2008 11:58 pm (UTC)
(Link)
I have no particular objection to that.
(Reply) (Parent) (Thread)
[User Picture]
From:kinkyturtle
Date:January 5th, 2008 02:49 am (UTC)
(Link)
That's all right, as long as it's not misused, such as enlarging a photo by a factor of 10%, which most browsers would do by duplicating a few rows of pixels, which would make it look ugly by distorting thicknesses of adjacent objects and making diagonal lines all bumpy and crooked.

But simple pixel art, enlarged to an exact multiple of its original size, works fine. :}
(Reply) (Parent) (Thread)
[User Picture]
From:discopanda
Date:January 4th, 2008 09:45 pm (UTC)
(Link)
Yeah, I do that already myself, plus I tend to use border="0" also, and if I want to add some sort of floaty caption I use title="text_here" and not just alt="text_here". (Either way I at minimum use src="filename.xyz" and alt="" because as I remember it the alt attrib is technically required even if it's blank/empty/null/whatever-you-call-it.
(Reply) (Parent) (Thread)
[User Picture]
From:thecanuckguy
Date:January 4th, 2008 10:00 pm (UTC)
(Link)
Hmmm, I always thought that always supplying height and width was bad idea. (Although, this may date back to when I was first doing HTML in 1994). (It *does* take up a few bytes of space.) If the image is, say, 100x50, then it'll display 100x50 unless you want it another size (and it's probably better to make it that size rather than change height-width attribs, as discussed elsewhere in this thread). Dreamweaver usually puts the tags in automatically, and I often remove them when I'm lazy enough to use DW, as I figured it was one of the unneccessary bits of HTML it was putting in.
(Reply) (Parent) (Thread)
[User Picture]
From:orv
Date:January 5th, 2008 12:00 am (UTC)
(Link)
Well, I think the extra dozen or so bytes will be swamped by the amount of data in the image, so I wouldn't worry about that. They're optional but they are helpful for the reasons others have mentioned -- they provide rendering hints to the browser, letting it start displaying the text before the images are downloaded. This was a bigger deal back when people were using 9600 baud modems. ;)
(Reply) (Parent) (Thread)