For the release of Disney’s Frozen, Fandango wanted to create an interactive module to highlight the characters in the film. Fandango provided access to pre-release promotional materials that included high-resolution character images, screen renders, and background imagery. After planning and testing with Fandango, we arrived at solution that lived in their content stream and showcased the characters in a vertical-scrolling slideshow.
The project was aimed at desktop users, but even for desktops, high-resolution images come at a high cost in terms of bandwidth. There were beautiful, finely detailed transparent PNGs of each character, but each image was tipping the scale at 1-2mb. Lazy-loading was on the table, but the loading time between the slide changes took away from the experience and left it feeling clunky. I had to find a way to keep the image quality and get them to load quickly.
SVG to the rescue. Each character had a clearly defined outline, so I used the image’s alpha channel to create a vector outline in Illustrator. This allowed me to export the images as JPGs with much higher compression, and mask them in an SVG using the vector outline. The end result was an SVG image with transparency, very high quality, but much, much lighter. This technique allowed me to take a 800mb PNG image and compress it to 60k without a visible loss in quality.
Using SVG clipping paths reduced the filesizes to nearly 1/10th of the original pngs.