Hello #LitmusLive!

Here are my slides! The Hateful Weight.
Thank you!

ADDEDUM

I'd like to add some accompanying links, as well as some notes as there may have been some confusion in a few areas, thus I'd like to offer some clarity.

HTTPArchive is where you can find some interesting web stats, like the avg page weight on the web, which is now 3MB as I mentioned.

I talked about the network, bandwidth and added a comment about latency. This is a often quoted paper by engineer Mike Belshe about the subject, and can offer some insight: More Bandwidth Doesn't Matter (Much).

I was asked quite a few times about animated GIFs. They absolutely can be optimized and should be as mush as possible - and you can send them through ImageOptim as well. Here's an example of the results. Ultimately, it's all about art direction, duration and size of the GIF. #decisions. But As I mentioned to some, I did like the process that Kristian Robinson employed. Although replaying the animated GIF was not his actual intention, he created an image sprite that he then animated using some CSS, to what I would consider a great result. You can read more about what he calls his Faux Video.

Ah yes... chroma subsampling and Photoshop. This needs a pinch of clarification. I showed you how anything greater than a 50% quality saving using save for web or having a setting > 6 in save as jpeg will result in a YCbCr pattern of 4:4:4, and we are striving for 4:2:0. The key is not to save at low quality to get the 4:2:0 pattern we'd like. I may not have been as eloquent or clear in my messaging. You should still save your jpeg at a high quality setting, but you should then send it through something like ImageOptim to a) strip what metadata was added or remains, and b) get that 4:2:0 sub sampling setting we desire. Hope that clarifies that a little bit.

Speaking of Photoshop and more specifically webp, there is a plugin available to create the format. Although I believe this is no longer being actively supported by the author, you can still use it (as I do). You can find that webp plugin here.

When talking about the webp, it's support in Gmail and the code that I provided using the srcset attribute, that strip of code doesn't provide the desired result in the proprietary browsers (Chrome and Safari), but somehow produced the desired effect in the email clients (Gmail app - iOS and Android - and Apple Mail, as well as web versions). #kanyeShrug.

<img src="image.webp" srcset="image.jpg" alt="image" />

In the email applications, Gmail read the webp format and jumped out. I know that Apple mail skips over the webp for lack of support and reads the jpg. I guess this a kinda hack, but would need additional testing. #KanyeShrugAgain

Lastly, HEIF, which Apple plans to support in iOS 11 is not out yet. But I simply mentioned the idea of this format for the following reasons:

  • Apple will support it for all it's iOS 11 capable devices
  • it will provide as much as twice the data savings the similar jpg would.
  • better and much more modern compression.

But ultimately, since we are having discussions around targeting email clients, this is when you need to start to have these conversations. If the numbers prove correct as per Litmus' email client share data, between using webp and the coming HEIF, you might be able to save data on 71% of the email clients out there. The rest can use the other known standards as fall backs. Something worth thinking about.

Have additional questions? Hit me up on twitter and I'll do my best to answer. Thx!