Member Avatar for squigworm

I am having trouble importing a properly working .gif file into Dreamweaver. I am in the process of learning how to code and in the meantime could really use some help with this. So far I have found the suggested code

<img src="image.gif" alt="image" />

Is this the best way to go about getting a .gif to appear and actually play when the page is opened ? Any and all help is very much appreciated.

  • 4 Contributors
  • 4 Replies
  • 610 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Short answer: using an HTML image element is the right approach, but a few common things can make a GIF look like it “doesn’t work.” As asked, the tag itself is fine (as noted). The usual causes are preview mode, file location/name on the server, the GIF being saved as a single frame, or browser caching. is correct to stress keeping the same folder structure when you upload, and ’s note about Dreamweaver adding width/height is normal and won’t stop animation.

Quick troubleshooting checklist you can follow now:

  • Open the GIF file directly in a web browser (drag the .gif into Chrome/Firefox). If it animates there, the file itself is fine.
  • Dreamweaver’s Design view often shows a static frame. Use Live View or Preview in Browser to test actual browser behavior.
  • Verify the src path exactly (including case). Local Windows paths are case-insensitive; many web servers are not.
  • Use the Files panel / Remote view in Dreamweaver to confirm the image was uploaded to the exact remote folder as the HTML file.
  • In the browser, open Developer Tools → Network, reload the page, and check that the GIF request returns 200 and Content-Type: image/gif. A 404 or text/html response means the path or server config is wrong.
  • If you edited the image, re-export with animation enabled (for example, Photoshop “Save for Web (Legacy)” or GIMP “Export as GIF” with “As animation” checked). Some editors can flatten animations to a single frame.
  • If a cached copy keeps showing, force-refresh or append a short cache-busting query string, e.g. ?v=2.

Example (store images in an images folder next to the page):

<!-- example -->
<img src="./images/animated-v1.gif" alt="animated badge">

If the GIF is very large, consider exporting at the display size and optimizing, or use a modern alternative (short looped MP4/WebM or animated WebP) with a GIF fallback for widest compatibility.

Recommended Answers

All 4 Replies

Member Avatar for hericles

That HTML snippet is correct assuming the image is in the same folder as the HTML page. When you say you are having trouble, what exactly is going wrong? Is that code not showing the image?

Member Avatar for JorgeM

Also keep in mind that when you copy your page up to the website, you also have to copy the image files. The file structure needs to remain the same. For example, if you have an image folder as a sub-folder of the root on your computer, that same structure needs to be established on the web server also so that the relative links aren't broken.

Member Avatar for monica.slocum

This is what I get just going to insert/image/and selecting the gif file

<img src="achievement113.gif" width="395" height="97" />

When I add the alt="image" the gif acts the same and the code looks like this

<img src="achievement113.gif" width="395" height="97" alt="image" />

And when I take away the size values the gif still acts the same and the code looks like this

<img src="achievement113.gif" alt="image" />

The only thing that I could think of is what hericles suggested, make sure you have imported/saved the .gif file into your website save folder (for instance mine is C:\Users\iDROID cpu1\Documents\Unnamed Site 2
This is where all of my files are saved for my website and when I upload the site to the server it pushes all of these files/folders to the website the exact way they are on my computer.

Hope this helps, I am pretty new to this to but trying to help :)

Member Avatar for JorgeM

Just to add some information... with regard to the image attribute, the only requirement is the source attribute. The alt is good because it displays text when the image cannot be loaded and web spiders can index the text. The width and height, while not required, is a really good idea so that the web browser knows exactly what the dimensions are before downloading the image file from the web server.

In addition, it is good practice to have the image file the same size as the dimensions you indicate on the image element. Do not use huge image files and scale them down using a smaller height and width. If the image file is 2MB in size, that is what will be downloaded even if you only want to show the image of a size of 640 x 480.

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.