A.R.M. ([info]kinkyturtle) wrote,
@ 2008-01-04 05:41:00
Previous Entry  Add to memories!  Tell a Friend!  Next Entry
How to make an image show up using HTML
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.

(Post a new comment)


[info]sonjaaa
2008-01-04 12:21 pm UTC (link)
The alt tag is important for blind people and other accessibility reasons.

(Reply to this)(Thread)

[info]kinkyturtle
2008-01-05 01:32 am UTC (link)
This is true.

(Reply to this)(Parent)

[info]deckardcanine
2008-01-04 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 to this)(Thread)

[info]kinkyturtle
2008-01-05 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 to this)(Parent)

[info]akseawolf
2008-01-04 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 to this)(Thread)

[info]yakko
2008-01-04 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 to this)(Parent)

[info]orv
2008-01-04 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 to this)(Parent)(Thread)

[info]timmowarner
2008-01-04 07:15 pm UTC (link)
KT and I have dubbed images such as those "Dumbnails."

(Reply to this)(Parent)(Thread)

[info]orv
2008-01-04 07:17 pm UTC (link)
That's a good term.

(Reply to this)(Parent)

[info]discopanda
2008-01-04 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 to this)(Parent)(Thread)

[info]orv
2008-01-04 11:58 pm UTC (link)
I have no particular objection to that.

(Reply to this)(Parent)

[info]kinkyturtle
2008-01-05 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 to this)(Parent)

[info]discopanda
2008-01-04 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 to this)(Parent)

[info]thecanuckguy
2008-01-04 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 to this)(Parent)(Thread)

[info]orv
2008-01-05 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 to this)(Parent)

Create an Account
Forgot your login?
Login w/ OpenID
English • Español • Deutsch • Русский…