Member Avatar for lrjpgms62758

Hi, I am new at this, I'm in the process of designing a website but has run into snags. I have several images downloaded in my site. However, when I try to apply lables to the images, they don't appear on the html or website. Strangely, when I refer back to my server directory, it displays the files with the lables I added. I am using infraview as my image editer. I will provide more info when my issue is addressed by the community.

What am I doing wrong???:?:

  • 4 Contributors
  • 6 Replies
  • 120 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by macneato

Dani AI

Generated

Quick summary (for ): the labels you added in IrfanView are very likely stored as metadata (EXIF/IPTC or the Windows "Title" field) rather than being part of the image pixels. Web browsers do not render image metadata as visible text on the page, so your server listing can show the metadata or filename while the page itself shows only the picture. was on the right track to mention alt, and was right that visible captions must be added as page text — but those two solve different problems (accessibility vs visible caption).

Checklist to narrow it down:

  • Open the image directly in a browser (paste the image URL). If the label is not visible there, it is metadata, not burned-in text.
  • Check the local image in an editor/viewer and inspect file properties to see if the text is metadata fields.
  • Re-upload the edited file and perform a hard refresh (Ctrl+F5) or clear cache. Confirm the server file was actually overwritten and the path/casing in your HTML matches the filename.

How to make the label visible on the page:

  • Add a semantic caption in HTML; this shows for every visitor and is best for accessibility and SEO. Example:
<figure>
  <img src="images/photo.jpg" alt="short description">
  <figcaption>Visible caption text here</figcaption>
</figure>
  • If the text must be part of the image itself, open the image in an editor (IrfanView, GIMP, Photoshop, Paint) and draw/type the text onto the pixels, then save and upload the new file.
  • alt is a fallback for screen readers and missing images; title shows a hover tooltip in some browsers but is not a reliable caption.

If the goal is to pull embedded metadata into the page automatically, use a server-side extractor (EXIF/IPTC readers) to read the tag and print it into a <figcaption>. For background on image metadata and why it is not displayed by browsers, see EXIF (Wikipedia) and for correct HTML semantics see MDN: img element and MDN: figure element.

Recommended Answers

All 6 Replies

Member Avatar for roryt

What do you mean by adding labels? I'm not quite sure what you mean. A link to your site might also be helpful.

Member Avatar for macneato

hi lrjpgms62758,

Not sure if this information will still be helpful since it's been awhile since your post.
OK down to the problem,if you using html, add the alt attribute.

eg.
<img src="www.soccer.com/about us/sponsors/mtn_2.jpg" width="102" height="65" alt="imagename" />

If you think this information helped, or even better. Solved your problem. Please add to my rep

Member Avatar for MidiMagic

If you actually want captions, you have to use p tags (or equivalent) before or after the image.

Member Avatar for macneato

Errr, no.

<p> is a line break
<atl> is for caption [Alternative Text]

Thing is (only noticed now) alt tag wont solve your problem, because it pulls the image directly from the server. Which in theory, your filename determines the downloaded filename. Doesn't actually make any sense

Member Avatar for MidiMagic

I mean that if he wants to put a caption on the image, so every web user sees it as part of the page (instead of having to play with the mouse to read it), he needs to put the caption in a paragraph. See captions on images on this page:

http://geocities.com/midimagic@sbcglobal.net/collaro.htm

p tags are NOT line breaks. They surround paragraphs.

Member Avatar for macneato

true, ma bad. <br> is line break.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.