How do you add an animated gif to a website?

Hello to all who can help me!
I’ve just started to build a website but i only get so far then hit a brick wall (just because there are so many holes in my knowledge of the adobe’s) I’m fairly competant in photoshop and illustrator - my main issue is imageready…
Here’s what I’m trying to do…
I’d like to have a website (built in photoshop / illustrator or imageready) then slice it up in image ready so i can save it as a html file and upload it to my webspace.
Here’s my problem…
I’m not sure which is the best way to go about it - which program should i do most of the work in before slicing? Do i design components and lay them out in image ready or do the whole thing in illustrator then slice it up? Whats the best way?
Secondly and most annoyingly - I’ve created a simple animation using layers in imageready (it just cycles through the frames continuously) I’ve tried saving it a number of different ways but everytime I go to place it on my illustrator/ photoshop page or place it into another image ready page, it doesn’t animate anymore. How do I get this small logo sized animation to sit on a web page I have made and do its thing? :mad: I’m going mad with frustration!!!
Thanks in advance for any tips - thelastmelon

First, DON’T use the Imageready HTML for your site…it’s about as suck as suck can get.

Next, create your page layout in Photoshop. Once you are happy with the look of your template, use ImageReady to slice the image. Then CODE the html properly using the sliced images. IR creates some horrendous code that is so far from standards that I can’ t imagine what they were thinking. I just save the sliced images.

As for the animated gifs…if you MUSt use them (they are considerered noob stuff now and extremely frowned upon if you are making anything other then a persona home page), you cannot create them and then put them into another Photoshop or Illustrator file…doesn’t work like that, they will just be flattened back into a normal image.

You need to create them and save them. In you template, just create a placeholder spot for them, then when you slice it, just replace where that slice would go with the animated version when you code the HTML.

Hope that helps.

I see - what if I dont know how to code html? And if animated gifs are so frowned upon how am I supposed to have mini slideshows of my work on my website? (Its a personal portfolio of my work you see) Feeling a bit more confused now… :S

CapitalWebHost & thelastmelon,

GIFs are not “considered noob stuff”, and neither are they frowned upon. They are still widely used, fast loading when done right, and are used as a substitute for other file types requiring plugins-- this increases usability across the board.

Secondly, in current versions of Photoshop and ImageReady, you can save a gif and import them into PS without the frames flattening-- and you can then import them back into ImageReady to edit further.

Gif’s would be a good solution for an animated slideshow-- unless you chose to use dHTML, or Javascript or Flash slideshows, or simple page-by-page html, which require more knowledge.



To put the small animated gif onto your website, you must first create/code your entire site how you want it to look, using whatever program you choose, making sure to leave room for where the gif will be placed-- for now you can place a blank image there of the same dimensions. Afterward, you will need to look into the html code and find where that blank image space is.

The image space you make will be hard to find unless you name it with something like “blankimage” or similar. Once you have it named, you can look in the HTML code for the following:

<img src=“blankimage.gif” alt=“blankimage”>

You’ll want to replace the filename “blankimage.gif” with your animated gif whatever it is named as: “youranimatedgraphic.gif”. So it’ll look like:

<img src=“youranimatedgraphic.gif” alt=“Cool Animated Graphic”>

For basic HTML learning, you can go to:

Best to you,


Ah, I SEE. This is good to hear! :agree: I think i might be able to do this quite well as I’m organising the site using GoLive which has the option to view and edit the code of a page you have made in… say photoshop. So am I correct in thinking that I am to create the page in the program of my choice and once i’ve sliced it in imageready and I can see the html file in golive i then drop the animated gif into the space i’ve made using the edit code option in golive? If it does then I’m on my way!!!
Thankyou thankyou thankyou - thelastmelon

GoLive is a decent program… you’d be better off to build the entire site in GoLive-- and use ImageReady for animated stuff, and slicing wherever totally necessary. You will find what works best for you. It’s important to note that, as this is your first webpage, it doesn’t really matter how crappy the code is from whatever program you use-- the point is you are getting a feel for looking at code, and working with graphics. As you progress in knowledge, you’ll find out how to shorten code, make it simplified, etc.

Though, if you are someone who wants something done right and done right the first time, you should thoroughly learn CSS and xHTML and code without help from a program. If you aren’t planning on being a web designer, then don’t sweat it too much.

But yes, you are correct. Carry on and good luck! :slight_smile:


I have been using Extensis Photo Animator, and I love it. It is easy to use, and it produces a very compact .gif file that can be easily incorporated into any web site with ease. WR

Thanks Speeeedy J - I’m off to try it with GoLive!