![]() Slide 027, Zimmermann WebP video 2x res of the Gif but half the file size. The WebP is 3.7 MB versus the 6.6 MB Gif. This is from Zimmermann, the WebP file is more than twice the resolution of the Gif, and it has more frames (82 compared to 52) and yet it’s still half the file size. WebP animations are around 64% smaller than Gifs, with better image quality. Loewe, Chanel and Dior have also used WebP, so it’s mainly fashion retailers. The only magic bullet I know of is switching to WebP, which 5 out of the 100 brands did. Slide 024, 5 out of the 100 brands used WebP, one was Ted Baker. Slide 023, These are file names from a couple of video emails I received (Ezgif). ![]() Slide 022, Compass guidelines, no secret to keeping file sizes down beyond what we already know. Some people use an optimizer like Ezgif, these are file names from a couple of video emails I received: and 1393320_ezgif.webp. There’s really no secret to keeping file sizes down beyond what we already know. They mention using fewer frames, shorter duration, and fewer colors, to try and keep below 1MB. Slide 021, Paco Rabanne featured 3–5 videos in a number of sends this year.īelow is from Compass’ motion guidelines, and they have a bit about email. Slide 020, Can go over ~1MB provided the rest of the email is relatively small (Stack Overflow). Zara, Nike, and F.Miller have also all sent two or more videos in an email, it’s not that uncommon. Paco Rabanne featured 3–5 videos in a number of sends this year. And one thing I’m seeing more of is multiple videos in one email. Only 3 out of the 26 videos were under the 1MB recommendation from part one. Slide 019, Mulberry were using half res and scaling it up. Slide 018, Only 7 out of 26 videos, 2x the resolution. A couple like Mulberry were using half res and scaling it up, though even then this file is 3.6 MB. You can load different resolution images based on criteria like browser width, or via dynamic images if you want to go that extra step. In contrast to ‘cuts’ most of the videos stuck with 1x res, only 7 out of 26, 2x the resolution. Slide 017, Slacks recommended file size limit for web animations is 3MB. You can see that there’s not much happening below ~3 MB, especially if were wanting smooth video. They’re bunched around the 3rd and 4th column in white. Which is fairly typical, as most of the videos were between 3–5 MB. Slide 016, Most videos 3–5 MB, not much happening below ~3 MB. Slide 015, Han Kjøbenhavn video, 25 frames long, and 4.1 MB. Though typically we want something that’s runs more smoothly, like this Han Kjøbenhavn video. This was originally 104 frames out of After Effects, whereas this version is just 12 frames after I rebuilt it in Photoshop. I’ll sometimes create these reduced frame rate animations. Slide 013, Originally 104 frames out of AE, this version is just 12 frames. Slide 012, Yelp uses only 12 frames, it had the smallest file-size at 451KB. Slide 011, used just 8 frames and comes in just under the 1MB limit. Yelp uses only 12 frames, it had the smallest file-size at 451KB. It comes in just under the 1MB limit we discussed in part one, it’s 986KB. ![]() The lowest was which used just 8 frames. Most of the videos were between 15–50 frames long, you can see them highlighted in white. ![]() So let’s start with file-size and frame count. Slide 010, Most of the videos were between 15–50 frames long. ![]() Slide 09, So let’s start with file-size and frame count. Slide 008, Some of the videos I received, and by ‘video’ we’re really referring to Gifs and WebP. While a couple had an HTML5 component most weren’t real video. These were some of the videos I received, and by ‘video’ we’re really referring to Gifs and WebP. So video and cuts made up the majority at 80%. So to see what’s typical, I saved 100 animations from my inbox and sorted them into 3 groups.ĥ4 out of 100 were cuts, 26 were video, and 20 were keyframe animations. Part two is ‘video’, and I’ll be going over file-size, placement, accessibility, making videos for email and trends. Slide 05, File-size, placement, accessibility, making and trends. Slide 03, If you missed it part one was ‘cuts’. And you can produce a wide range of effects fairly quickly. This is where you take a small number of frames and cut between, with no transitions. Hi this is Anna from stylecampaign, I’ll be talking about the basics of animation in email using Gifs and WebP. I’ll be going over file-size, placement, accessibility, making videos for email and trends. An introduction to video in email, using Gifs and WebP. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |