Do you use icons for your website? No matter if your business is about software development or baking cookies, the use of icons and animations can bring you and your viewers a great number of benefits.
An interesting study was carried out two decades ago. Back then, icons were very new and the Internet was not as widespread worldwide as nowadays. In 1991, three researchers from the USA mentioned that dynamic visual representation is better than traditional static text. The main advantage of animated icons is their ability to bring abstract icons to life that represent complete applications or functions within the application. With the use of animation, it is easier for viewers to get the meaning of complicated and abstract things, and also to see all the abilities and benefits.
What Different Image and Animation File Formats Exist?
• PNG
PNG or Portable Network Graphic was created two decades ago to support image files. In the early 2000s, PNG started to support animation. PNG files have high bit depths, and allow 1, 2, 4, 8, 16, 24 and 32-bit images. A license for PNG is free and open stand as it was developed and it is still supported by World Wide Web Consortium. PNG files allow full alpha channel transparency, which makes it possible to change the background. Moreover, due to built-in gamma correction, a user can see a PNG file the way it was intended to be seen by choosing the gamma level for the monitor.
At the same time, PNG format is not good for large images as the large size will affect the load speed of the page. Also, not all web browsers can support PNG format.
• JPG
JPG stands for Joint Photographic Experts Group. And this is the best format for photos of high quality. JPG file is the most used graphic format in the world. When dropping the size of a JPG file, the quality of an image is not lost. That is why this format is often used in the design and the photography industry.
JPG files do not support transparency. It is also not the best format for logos and icons as it can create a bigger file size for small resolution images.
• GIF
GIF stands for Graphics Interchange Format. It was created in 1989, and back then it was the first format for animations. GIF is suitable for logos and icons with few colors. GIFs support transparency and are suitable for tiny animations.
The main disadvantage of this format is a big size file, that is usually bigger than an SVG, a PNG or a JPEG one.
SVG Animation
SVG animation is an open 2D XML-based standard vector graphic. This type of animation has become very popular worldwide, and various companies and businesses have been slowly integrating this into their websites.
SVG animation or Scalable Vector Graphics Animation was first launched in 1999 by the World Wide Web Consortium and developers of Synchronized Multimedia Integration Language. In 2001 SVG animation became a recommendation from W3C. During the 2000s and also at the beginning of 2010s many web browsers started to support and integrate SVG animations.
Advantages of SVG Animation
• Fast Page Load
There is no need for an HTTP request to load an SVG animation. This allows your web page with an animation to get loaded faster. The faster your page loads, the better SEO ranking you can get. The User Experience (UX) of the page with an SVG animation also looks better than without it. Icons have been often used in interfaces as they are “universal” pictographic representations of computer functionality and processing.
•Text-based Format
SVG is a text-based format that can be created in HTML or in CSS. The text you include in the code is indexed by search engines. That means potentially you can improve your SEO rankings with this animation.
• Scalability
Being a text-based format, an SVG image does not depend on a resolution at all. Moreover, you can see an SVG animation from any device. And the quality of an image will be the same. You can use an SVG animated image in different sizes within the same website. There is no need to create many copies of the same image that comes in different sizes. When using any other format such as PNG, you will have to create many copies of the same image.
• Small Size and Quality
The size of your SVG-animated file is defined by colors, layers, effects, gradients and other elements it has in the code. Any SVG-animated file can easily be compressed without losing its
• Easy Changes
If you ever need to make any changes in an SVG-animated image, you can do it fast and easy. All you need to do is to change the properties of an image in the code itself such as background, transparency, borders or any others.
Conclusion
Depending on the purpose that you have, different types of animation formats can be used. SVG animation has become quite popular due to such properties as fast page load, text-based format, its scalability, small sizes and high quality together with easy changes, that can be made anytime.
Do not hesitate and drop us a message if you want to know more about the best animation format for you.
Sources:
- Oleg Romanyuk (2019): Why you should use SVG images: how to animate your SVGs and make them lightning fast
- Tutorial Republic: HTLM5 SVG
- Habr (2012): Знакомство с SVG-графикой [Russian]
- Smashing Magazine (2018): Animating SVG files with SVGator
- Baecker, R., Small, I.S., Mander, R.(1991): Bringing icons to life
- WEBHUB: PNG file format: advantages