Jump to content
GreenSock

Web Dizajner

Animate Images or Divs?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Is it better to animate images or divs? What is the best practice?

 

When I use doubled retina ready images it is easiest for me to style images than div background images.

 

 

 

Example of my HTML/CSS/GSAP code for e.g. banner ad 300x250 retina ready:

 
 
<!DOCTYPE html>
<html>
<head>
 
<!-- layout -->
 
<style>
body {
  margin:0px;
}
#stage {
  position: absolute;
  width: 300px;
  height: 250px;
  top: 0;
  left: 0;
  overflow: hidden;
  cursor: pointer;
}
#photo1 {
  position: absolute;
  width:100px;
  height: 100px;
  top: 10;
  left: 10px;
  z-index: 1;
}
#photo2 {
  position: absolute;
  width:100px;
  height: 100px;
  top: 50;
  left: 50px;
  z-index: 2;
}
</style>
 
<!-- animation -->
<script>
 window.onload = function() {
    
 var photo1 = document.getElementById("photo1");
 var photo2 = document.getElementById("photo2");
 
 tl = new TimelineMax();
 tl.from(photo1, .5, {x:"+=30", ease:Power1.easeOut});
 tl.from(photo2, .5, {x:"+=30", ease:Power1.easeOut}, "-=.5");
 
}
</script>
 
</head>
<body>
<div id="stage">
<img id="photo1" src="photo1.png"/>
<img id="photo2" src="photo2.png"/>
</div>
<body>
</html>


photo1.png and photo1.png are doubled 200x200
  • Like 1
Link to comment
Share on other sites

Hello Web Dizajner,

 

I would recommend to try both and see what works best and what your more comfortable with. It also depends what your doing. ;)

 

If the image is not a image sprite-sheet or your not animating the background-position. Then animating the <img> tag should be fine.

 

The benefit of having your image as a background-image in your style-sheet, is that it will pre-loaded when the style-sheet is loaded. Versus the img tag which will depend on the DOM loading.

 

Images when used within a background-image can be scaled with CSS properties like background-size, unlike <img> tags that are scaled and driven by the browser on how it should fit in relation to text and other elements around it.

 

Also if you want the user to be able to print your page, then using an <img> tag is better. The reason being is that elements with background-image are not outputted to the print spooler by your browser. Also <img> tags are better if you need screen readers to view the image, and is better for SEO.

 

For animating, I prefer using the CSS background-image on <div> elements, since it gives me greater control with various CSS properties, versus an <img> tag.

  • Like 4
Link to comment
Share on other sites

Just have to chime in as this one of the few questions I asked about 4 years ago :)

 

http://greensock.com/forums/topic/6123-what-is-the-most-bestest-html-markup-for-images-that-will-be-animated-with-javascript/

 

Jonathan, as always, shared some great insight above. 

 

From a performance standpoint I really don't think I've seen anything conclusive anywhere. For banners I think there is definitely a trend towards css background-image perhaps because its easier to manage when automating spritesheet creation. 

 

Another benefit of background-image is that isn't as easy to right-click > save image. 

  • Like 5
Link to comment
Share on other sites

Interesting - a rare glimpse at a Carl question rather than the usual awesome superhero answer.

 

I guess that's proof that he was once human like the rest of us.  :-D

  • Like 1
Link to comment
Share on other sites

I am not sure but I think that image within div can be in some case (scale, transform) blurry because browsers, particulary older, better render images within img tag .

Link to comment
Share on other sites

That is a browser issue your talking about, regardless if the image is on a <img> tag or if using a background-image. There are actually browser bugs.. mostly in webkit based browsers like Chrome and Safari caused by an anti-alias and other raster type webkit bugs.

 

So either way, in a webkit based browser, that bug will affect images regardless if using an <img> tag or a background-image. ;)

 

That same webkit bug also affects text as well, making it blurry when animating CSS 3D transforms. But again that is a browser thing!

  • Like 2
Link to comment
Share on other sites

My two cents in this topic:

 

> Is it better to animate images or divs?

 

Neither is better in a performance standpoint as far as I know. The overheads are pretty much the same. So, in a nutshell, it doesn't matter.

 

 

> What is the best practice?

 

Now, that is a different kettle of fish. 

 

I think we all agree this is redundant and not semantical:

<div class="someName"><img src="logo.png" id="logo" width="200" height="200"></div>
Definition and Usage. The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS.

 

I will be so bold as to state that the best practice depends on what needs to be achieved.

 

If using a sprite-sheet:

- Background image in a <div>.

 

Pros

One HTTP call, several assets.

Image is loaded with the CSS

 

Cons

You'll have to adjust all <div> sizes and positions if changing the original sprite-sheet. (Although there are tools to help with that).

 

If using a single images multiple times

- Background image in a <div>

 

Pros

One HTTP call.

Image is loaded with the CSS.

 

Cons

You will have to define width, height on the asset. Fine if it is one or two different ones. I wouldn't use as my default strategy.

 

Standard and Retina images

- <img> Tag in the HTML document.

 

Pros

The <img> tag as intrinsic width and height, meaning, it will default to its native size unless told not to. You really only need to define one and the other will scale automatically. That is one line of css you do not need to type. Multiply that by the number of images you have and that'll add up.

It is semantically correct. You do not have to have width and height defined in the HTML. So your code could be as lean as:

#logo {
 width: 100px;
}

<img src="logo.png" id="logo">

Cons

The greater the number of images, the greater the number of HTTP calls. Unless you are using a sprite sheet, the other options will also have this many HTTP calls so, not that much of a biggie.

 

 

 

Remember at the start where we agreed that having an image nested inside a <div> was silly? Well, sometimes that is the way to go.

 

See the Pen EKrvBm by dipscom (@dipscom) on CodePen

 

 

Ultimately I would say that the best practice is to use as little code as you can to achieve your goal. 

  • Like 3
Link to comment
Share on other sites

I only use background images for static stuff like the background. I don't consider it part of the content, and it's more like a pseudo element to me. The image is what I want to interact with, and it has properties that I can change.

 

You can load a sprite sheet with JavaScript and store it as texture in memory. Game engines usually have the best asset loaders, and they're usually stand alone products, so you can just use the loader.

 

And I don't see anything wrong with wrapping it in a div either. A div is just like the <g> tag in SVG, and most canvas libraries have a container object that you put your sprites in. It's a nice way to group things into components that can be easily referenced from your code.

 

I never paid much attention to semantics. It seemed pretty pointless because for the longest time a div was the only thing you could use. But if you want semantics, just create your own element. If you put a hyphen in the name, it will automatically inherit everything from the HTMLElement.prototype. You also need to set the display and size in your CSS because it will have no default styles.

 

This is what HTML5 was meant to do. Totally valid...

 

<wheel-spinner>
  <img class="joint" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/spring-onion.png">
</wheel-spinner>

 

 

See the Pen b21c4e76c572e85a04c07676b0959365 by osublake (@osublake) on CodePen

 

 

JavaScript and CSS can be encapsulated inside a custom element, allowing you to write everything declaratively.

 

<x-meme src="ancientaliens.jpg" bottom="dipscom"></x-meme>

 

 

See the Pen d338b4b949b919d1eccac047955effbf by osublake (@osublake) on CodePen

 

 

This is what the template actually looks like. An image wrapped in a bunch of divs

 

<div id="meme">
  <div id="top-caption"></div>
  <div id="meme-image">
    <img id="img" src="">
  </div>
  <div id="bottom-caption"></div>
</div>

 

 

  • Like 5
Link to comment
Share on other sites

@Blake, I'd say we are in agreement with a lot of stuff. Just using different words.

 

I do use the "create your own element" whenever is suitable. Hat tip to you sir, for mentioning that in the past. Amongst other things over time that I am always absorbing and trying to implement.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×