When it comes to creating elements for your website, or anything for the web, nothing seems to grab the eye better than animation. Like any good thing though, you need to be careful not to take this too far. Remember that your focus should be on adding value, so sprinkle animations in places that make sense and not just for the sake of adding them.
With animation for the web, there are a few options that stand out and provide flexibility depending on your intentions and needs. Two of our favorites are GIFs and CSS Sprites, which may be common for some and less common for others. But when and where should you use them? And which one is best for your particular needs?
Let’s take a look at the pros and cons of both options so you can make an informed decision as to which one will provide you with the best possible results for your project.
Animated GIFs for the Web
One of the benefits of animated GIFs is that they’re supported by all browsers. After all, what good is an animated gif if no one can see it? The process used to create them is also fairly simple when compared to other animations. Whether you use Photoshop or a similar tool, creating the file is straightforward and it doesn’t take a lot of time to learn how to develop these files.
Animated GIFs are lightweight overall and using them as animation for the web can be accomplished with a singular line of code.
<img src=“animated.gif” alt=“Your Gif Description” />
Because of the simplified process used to create animated messages; GIFs have become an excellent alternative to HTML5 Banner ads for services that accept this file format, displaying your ads in much the same way as their more complicated counterpart.
Although animated GIFs have several positive attributes, they also have some shortcomings to be aware of. Unfortunately, dithering is a problem that affects image quality for a high number of GIFs created. This is caused by the very low color palette used to generate and publish the finished file.
Internet Speeds need to be a consideration as well since high-speed connections are required for proper animation with GIFs. Some larger animated GIFs can create slow loading issues even with a strong internet connection. This can also cause issues with overall site speed, which will provide a negative experience for visitors, especially on mobile devices.
Lack of random animations ability as well as control can limit the usefulness of GIFs in certain situations, which will result in the need to explore alternatives.
CSS Sprites Animation for the Web
One of the biggest pros of CSS Sprites is the lightweight file size and package they use, which translates to quick loading times and reduces issues of overall site speeds. Reduced HTTP requests is another reason why pages load faster with CSS Sprites than GIFs. In a mobile-focused world, speed should always be a priority, and because of this, CSS Sprites may be a better option for your visitors.
Clean, smooth animations are what you can expect for CSS Sprites. Popular with game developers for this reason, it is a point scored for them over animated GIFs.
The ability to control the animation as users scroll, reverse animation, and even randomize animations is where the power of CSS Sprites is on display. This opens up all sorts of design options you can employ. Adding Scrolling effects to your site can add a visual aspect that captures your audience’s attention and helps guide your users down a web page. This can be a great way to tell a story and CSS Sprite Animations are a perfect addition to this popular effect.
No type of animation is perfect, however, and now we‘ll examine some weaknesses to be aware of with CSS Sprites. The biggest con of CSS Sprite Animations is the learning curve. You will need to have more knowledge to employ these vs the simpler animated GIF.
Below is a sample code snippet for CSS Sprite Animations:
<div id=“spriteAnim”></div>
#spriteAnim {
width: 399px;
height: 200px;
margin: 2em auto;
background: transparent url(‘/path/to/sprite.png’) 0 0 no-repeat;
animation: spriteAnim 1s steps(12) infinite;
}
/* Animation keyframes */
@keyframes spriteAnim {
100% { background-position: 0 -2393px; }
}
Generating the package can cause setbacks, and unlike animated GIFs, they require specific tools to properly generate the code and files.
Fortunately, some online options assist in the generation of the files and code you need which will reduce the learning curve as well as the time-consuming steps needed to create CSS Sprites.
If you are focused on email marketing and need to add an animated element, CSS Sprites are NOT the option for you. Email marketing services do not allow the use of CSS Animation which takes them out of the running for this specific project type.
Also, because CSS Sprites use background images for the placement, they don’t allow for the same search engine optimizations (SEO) that an HTML image tag does. CSS Sprites do not offer options for Title, Description, or Alt tags which can be a drawback if you are trying to optimize your pages’ SEO fully.
Animated GIFs and CSS Sprite Animations both have great qualities that will provide you with elements that can enhance your website and digital marketing efforts. They both have their strengths, and weaknesses, and when used interchangeably, can prove to be the dynamic duo that your project needs.