Images with JS and CSS
HTML (HyperText Markup Language), CSS (Cascading Style Sheets), JS (JavaScript) and other scripting and programming languages can be used together to create a wide range of animated images, including some similar to those shown in the single file GIF images on other pages. The files are written to work together to display the animated image and additional files and libraries of JavaScript code may also be accessed on the computer or from CDNs (Content Delivery Networks). The files generate the image on the computer and display it on the browser. The combined size of the files loaded is quite small. If the output is converted into a single-file GIF, the size is much larger because the sequence of image frames is stored in the file. As an example, the combined size of the HTML and CSS files on the server needed to create the image based on Gal Shir’s Swinging Cat image shown below is 28 kB, whereas the 800px x 600px image GIF file is 2.8 MB, or 100 times bigger. The files for the Moiré image below amount to less than 5 kB. The small file sizes allow a big saving in server disk space. The downside is that the creation of a page with these images takes more work and time to install the separate files and it is usually more difficult to make them responsive.
Our beloved swinging cat.
Coalescing Moiré Pattern