Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
i'm about to choose between using an animated gif, flash or html5/js for a short animation to display a sequence of different images.
what are your thoughts on animated gifs? Are they dead? Should I use HTML5?
THanks for some interesting thoughts. :)
I'd say an important factor is the size of images you want to cycle. For very small images, perhaps sub-100px, an animated GIF might be ok. For anything larger, such as portfolio or item images, they're pretty much unacceptable. It's not so much about semantics or SEO, but rather image quality; GIFs simply don't look good for complex (e.g. photographic) images.
HTML5 doesn't come in to the equation, the markup will be almost identical between (X)HTML4 and HTML5. The javascript is the key part in cycling images, and there are a whole bunch that do all sorts of fancy things, depending on your needs. One of the most well-known jQuery plugins is the cycle plugin. It's very easy to implement.
To return to the idea of semantics and SEO, a GIF embedded in a page doesn't look like many images, so search engines won't know it, meaning any one performing an image search pertaining to what you're trying to display won't find your images. If you use a JS cycle approach, all of your images will be embedded separately in to the markup, and search engines will pickup on this. It does allow users to download the individual images, whereas with a GIF it would require either deconstruction in a GIF editor or a screenshot, but this will either be an advantage or hindrance, which you can consider accordingly.
To summarise: you almost certainly want to cycle to images with javascript.
I would definitely not use flash for something so simple, especially when it makes that part of your website inaccessible to devices such as the iPhone, iPad, etc. HTML5 is nice, but no browser supports 100% of it, and some of the mobile browsers are very lacking in support. A gif would probably be the easiest hassle free way of doing this.
Animated gifs are not good or bad. They are a tool that is widely supported. If they fix your problem you should not hesitate to use them.
Animated gifs would work everywhere.
Flash would be extremely heavyweight and creates a dependency to a flash.
HTML5 is nice, but is not supported by everyone yet.
Depends how complex it is... if it's only a short series of images simply use JavaScript without HTML5. You'd only have to write a few lines of code to produce the effect.
Animated gifs aren't dead. In fact, they're probably more popular now than they have ever been because of so many animated gif memes. That being said, animated gifs can be useful, but consider the advantages of a more dynamic format, that animated gifs can't recreate:
Transitions between images
Can be generated dynamically
File size might be lower
If you don't need those features, or anything else that Javascript provides, then use an animated gif.
As previous answers mention, if an animated GIF is all you need, then go for it.
Flash would be a slight case of overbombing.
If you want something slightly more flexible, you can still use js without bringing HTML5 into the mix, of course.
By making a simple jQuery slideshow out of it, you could buy yourself transition effects and an easy way to replace images. But again, if you don't need that, or that is overkill, then go with the GIF.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I wanted to create an icon in css, with an svg in between, just the way I saw in duolingo, I have given the screenshot (because you’ll have to login to see). When I saw the source, I saw that there is an svg file with all the icons as a pack, but individually they were set as icons in circles. I suppose that they have used the viewBox property in svg. I just wanted to know I guessed right, and if it is a sensible way, or should I use PNG files?
I don't know, but I guess they were using the CSS Image Sprites technique in conjunction with SVG images instead of using PNGs. This is great for when you have vector graphics and would like to support high-dpi devices ("Retina" and "4k" screens).
Putting them into the same file just reduces the network load and improves loading time. Using SVG also improves network bandwidth usages for these kind of graphics and yields the best fidelity.
So unless you need to target older browsers, using SVGs is a great idea, IMHO.
Just visited Duolingo. They use different techniques, as far as I recognize it. Indeed they cut out icons from some kind of sprite to display these. However, they also use RaphaëlJS to import SVGs which is nice, because it is very easy to manipulate the SVG afterwards.
You can use them to adapt the size of your graphics depending on the resolution of the viewer. However, be aware that older browsers don't support SVG very well (Raphaël has a great backwards compatibility here, but the browser limits still apply).
SVG are surely consume smaller amounts of storage and bandwidth. So it is up to you, if you want to use these or not. If you need to manipulate the graphics it's the way to go IMHO. However, if you need to support old browsers go with png.
This depends on if you are going to support IE8 or not. It's about 3% global usage. Unfortunately for the sector I work for, its more like 10% so I need to support it.
Inlining SVG, as you've described, is a great way to use SVG sprites. SVG elements are available to be styled by CSS so if you name your SVG elements appropriately, you could do something like:
.food-level-2 #icon-food.level-marker-2,
.food-level-2 #icon-food.level-marker-1 {
fill: orange;
}
.food-level-3 #icon-food.level-marker-3,
.food-level-3 #icon-food.level-marker-2,
.food-level-3 #icon-food.level-marker-1 {
fill: orange;
}
Which is awesome! User levels up, you change the class from .food-level-2 to .food-level-3, put a nice transition in there, and all is happy. But this is totally not supported by IE8, and hard to do a fall back for.
Background images, as with traditional css sprites, are very easy to make a fallback for.
.food-level-2{
background-image: (../img/food-level-2.png);
background-image: (../img/food-level-2.svg);
}
If the browser doesn't understand svg, it falls back to the png. Generating extra PNGs is easy if you're using something like font-squirrel or grunt/gulp. Make it a SASS mixin to write the .pngs first, .svgs second.
All is, less happy, but ok. You spend more time in Illustrator making all the possible variations. This looks like the route Duolingo choose with 1-1 png fallbacks. You still get crispy vector graphics where supported, and generally reduced load times.
I'm currently planning a web project that has a few animated sequences that need to run on the site.
I need the site to be as cross browser compatible as possible (duh!) and wanted to get fellow developers thoughts on different options.
Canvas is not an option mainly because of IE. IE9+ only support isn't good enough, even though the 'progression' of browser stats for IE is near on laughable
http://www.w3schools.com/browsers/browsers_stats.asp (13% for IE in March 2013 (AND IT COMES AS DEFAULT WITH ALL WINDOWS MACHINES) going slightly off topic...
I was planning on preloading a series of animated gifs for different stages of animations for example 'run', 'walk', 'fly' and then swap the src of an img tag as and when required. I haven't tested anything like this yet, but i invisage delays even with preloaded images (though javascript http://www.preloadjs.com )
although im not too keen on the quality of animated GIFS. taking this idea a little further, using the same method but with each from as a seperate PNG? is that feasible?
Or could a DOM element with a spritesheet attached as the background image work, changing the background position on each step?
Any thoughts or examples ;) would be very helpful! :)
Cheers,
Rory!
---EDIT
im also open to different javascript libraries.. although currently included in my project are jQuery and Rapheal
jQuery animate is going to be your best bet. Buf you have time to generate a sprite sheet to show different animation stages, then you may have enough time to look into a good jquery plugin like gameQuery, which allows you animate sprite sheet items.
I'm working on a webapp (will only be running in Chrome 19+) that is currently built with CSS3 transitions. More specifically, I'm using Jquery Transit to fire the CSS3 animations with Jquery itself. The reasoning here was that some of the animations are drawn out for several seconds and jquery animate wasn't smooth enough, but Transit is a great fix for this. Jquery Transit is working quite well but I'm curious to whether HTML5 Canvas will render things even smoother? And if so, is it worth pursuing, given the fact that I'm using AJAX and percentage-based locations for DIVs currently? If anyone here knows how CSS3 Animations compare to HTML5 Canvas performance in Chrome and would be willing to give their input I would greatly appreciate it!
CSS3 will give you fewer headaches and you can change it easily in the future, and it will work gracefully on systems that aren't canvas-enabled.
If you're using text, you should absolutely stick with CSS if you can get away with it. Canvas ruins the accessibility of your app and disallows users from using a carat or highlighting text or using text to speech.
If you're just making a funny sliding button or something then you should also just use CSS as it will probably be much easier to implement and maintain. Redoing CSS is easier than slogging over (what can be complex) JavaScript.
I can't honestly tell you if canvas renderings will be smoother. One plus of the canvas is that you can animate things to a seemingly larger size (while keeping the canvas the same size) without having to cause the DOM to re-layout. On most modern systems this really isn't an issue thought.
Furthermore, if its already done with CSS3, are you actually having performance problems? If nobody has complained about performance yet, why bother rewriting it for canvas? If you aren't encountering any real performance problems so far, why reinvent your app?
The problem I think you might run into with canvas is that it is bitmap based. Therefore scaling up and down after the page is initially rendered will be a problem. Furthermore, line breaks will be painful to deal with potentially. The people who write your site's content might find it challenging to insert line breaks because there is no such thing as a line break using canvas, svg, or vml. In fact you need to pre-compute line breaks. "\n" using raphael.js works, but it isn't great. Furthermore you can't use selectors to target various portions if you in your svg graphics. You may be able to using canvas, maybe.... Canvas probably has a buncha of the same gotchas.
On the image front you will have blurry images if it scales and there are less libraries out there that deal with image resizing for canvas. This may change in the future, but it will still be an ordeal to deal with. I'd just stick with your divs/css3 with jquery fallbacks for older browsers.
From a purely performance perspective, checkout the first comment on your question. It has some nice benchmarks.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
Does html5 help developers animate vector graphics in any way? I'm talking about straight key-frame vector animation, such as what flash does.
Is the way to do this basically using javascript to manipulate SVG graphics (such as what http://www.raphaeljs.com does? which is a bit weird to me since it's been supported in browsers for quite some time) or does html5/canvas lend itself someway to vector graphics animation?
I'm just trying to understand what's the "new" way developers will animate vectors on the web if/when flash plug-in eventually dies.
Thanks
There's also CSS animation, which is declarative and can be more efficient because the JavaScript code is not pushing the animation.
But there's nothing inherently wrong with the SVG approach and it's more compatible as well.
Currently there is no alternative for complex animations like the animations you can create with Flash (eg. shape-tweens or animations with 3d or bones), and I personally I think Flash is the way to go if you want crossbrowser killer animation. The Flash IDE offers lots of animation features which are not implemented in any other current web based tool. HTML/css is very limited, since it does not fully support skew/rotation/perspective in all browsers and in HTML you cannot animate background images too. However you can create programmatic tweens (like motion-tweens) with Javascript. At this state of HTML you must be a bit hardcore programmer to get a serious DHTML animation and I think you have to deal with CSS sprites or other blitting techniques to get some performance. Beside animation, Flash offers filtering and blendmodes too, which you would like to use in great animations too.
You can use the animate() function from jQuery for very simple animations (move, fade, slide); you can change properties over time. For a lot of web applications; this could enough. But if you want to animate vectors or want frame based animations; Flash is currently the best choice.
PS. What is wrong with animated GIF's?
This might be interesting in the future. It is a flash to Html5 conversion tool form Adobe. Maybe there is a future on the web where the two technologies converge to a single purpose in stead of being two concurrent technologies side by side.
We may well agree that flash has some drawbacks, closed, slow technology. But I can not believe there is no knowledge in the flash source code, its developers and the large amount of users that could be helpful in the development of Html5. Flash is an easy to use environment for creating animations. Such an environment just does not exist for Html 5. So I believe there is room for flash and Html 5 together.
Edit
You should check out Adobe Edge Preview. a new tool from Adobe for creating rich HTML5 animations.
I have an idea for a website which involves a canvas area which has no limit to its size. Basically you would be able to add items to the canvas (notes, photos whatever really). You would then be able to drag the canvas which would move those items along with the canvas until they disappear of screen. If you dragged the canvas back the other way they would appear again.
Question:
Which would be the best suited to this type of thing, Flash or Javacsript?
My main worries are the speed at which javascript/ flash could handle moving multiple items around on screen in the way discribed. Which language would handle better for a user on a slow machine.
UPDATE:
Thanks for your opnions guys, but to clarify what are the benefits of canvas over straight jQuery DOM manipulation? or visa versa. I've never used canvas before.
I don't think this is a question that will get you an objective answer - Flash developers will tell you Flash is better, web developers will say JavaScript. Trying to remain objective, I'd say that both technologies are suitable for what you describe, but have different advantages.
Flash will definitely render faster, even on slow machines, and is much richer graphically.
JavaScript is more accessible and works on a greater number of devices. Use a good JS framework though.
My initial thought would be to go with Javascript - if it's good enough for Google Maps, it's probably good enough for your app too.
Do you need to use canvas, what you're describing could be done with just javascript and the DOM. It would perform perfectly well unless there are a huge number of elements and it would be cross-browser compatible. For canvas you would require exCanvas to support IE which can sometimes slow things down.
The best way would surely be Javascript. And I would even say that you should reconsider the use of canvas. It sounds like it could be done in pure DHTML. In that way you wouldn't lose support for IE.
Consider using one of the javascript frameworks; Prototype or jQuery come to mind. It will ease your coding immensely. Given the development in javascript-engine performance (next versions of Webkit (Squirrelfish Extreme) and Mozilla (TraceMonkey) will be lightning fast) the worries about performance may be moot.
Also if you decide that you can't do it without canvas consider using John Resig's processing.js.
I'd say go with flash (or DOM if you don't need the extra punch). Here's my reasoning:
You can do cool transformations with canvas (skewing, rotations, gradient fade-ins in images, reflection effects, etc) that you can't with DOM. The downside is that doing these cool things is math heavy.
Canvas doesn't work in IE. IE's equivalent (VML) apparently has a root-access security hole.
The DOM has been around for longer than canvas and since it's more widely used (and depended upon), it's more optimized and polished than canvas.
The Flash community has a lot of good free components available that may already do what exactly you want.
Flash and DOM have a lot of good documentation and tutorials, canvas not so much.
Flash can do pretty much everything that the DOM and canvas can, plus audio, video and grabbing input from your web cam.