开发诊所_点燃速度：影像减肥诊所

开发诊所

A few months ago I gave a 5 minute Ignite talk at the Velocity conference. (My previous post talks about the Ignite experience.) I thought they recorded the video and wanted to share but seems like it's not happening. So below are the slides from slideshare.

几个月前，我在Velocity会议上进行了5分钟的“点燃”演讲。 (我以前的帖子谈到了Ignite的体验。)我以为他们录制了视频并想分享，但好像没有发生。 因此，下面是slideshare的幻灯片。

The ignite talk rules are: 20 slides that change automatically after 15 seconds. But I took the liberty of hacking the format a little bit. For one, the 18th (and 19th) slide which was my main point is duplicated. And then I had some transitions, like in the first two slides for example, where different text or pictures change after a timeout. I expanded those transitions for slideshare, so the slide count is 40-something, but at the presentation it was still total of 20 slides in 5 minutes.

引发谈话的规则是：20张幻灯片，在15秒后会自动更改。 但是我有点随意修改了格式。 首先，复制我的主要观点的第18张(和第19张)幻灯片。 然后我进行了一些过渡，例如在前两张幻灯片中，超时后不同的文本或图片发生了变化。 我为幻灯片共享扩展了这些转换，因此幻灯片数为40左右，但在演示文稿中，在5分钟内仍然总共有20张幻灯片。

If you follow the slides on slideshare, be sure to click the Notes tab which has what I said, more or less, at each slide. The full script is below.

如果您按照幻灯片共享上的幻灯片进行操作，请确保单击“注释”选项卡，该选项卡在每张幻灯片上或多或少都有我所说的内容。 完整脚本如下。

And yes, if you like it, please vote for my South by Southwest panel proposal. It has the same name "Image Weight Loss Clinic" but will be a much longer version of this 5 minute Iginite and what is more - Derek Tonn of graphicsoptimization.com will share the stage with me. Pretty exciting, so cast you votes, leave a comment and help me get to SxSW.

是的，如果您愿意的话，请为我的“西南偏南小组”提案投票。 它具有相同的名称“图片减肥诊所”，但将是5分钟Iginite的更长的版本，更重要的是-德里克TONN graphicsoptimization.com将与我分享的舞台。 非常令人兴奋，因此请您投票，发表评论并帮助我进入SxSW。

Ignite Velocity: Image Weight Loss Clinic 点燃速度：影像减肥诊所

documents from Stoyan Stefanov查看更多 Stoyan Stefanov. 文档。

剧本 (The Script)

Here's what I said, more or less:

这或多或少是我所说的：

1. Let’s talk a little bit about cutting back on that bandwidth bill. Saving some money. And without touching the code. How do we do that? One way is…
   让我们谈谈减少带宽费用的问题。 节省一些钱。 并且无需触摸代码。 我们该怎么做？ 一种方法是…
2. Images. Ever since the dawn of times people have been using images. Cavemen scraping on their cave walls… and today… Today we have websites. And LOLcats.
   图片。 自从时代开始以来，人们就一直在使用图像。 穴居人在他们的洞壁上刮擦……今天……今天，我们有网站。 和哈哈猫。
3. Half of the average web page weight today is images. And most of these images are too fat. They could use a diet and lose some weight but without losing quality, not even a single pixel.
   今天，平均网页重量的一半是图像。 而且大多数这些图像太胖了。 他们可以节食，减轻一些体重，但又不会失去质量，甚至没有一个像素。
4. So, welcome to the Image Weight Loss Clinic. Our first patient today is... some random page found on the Internets. Hmm, what have we got here… Header graphic, speaker photos, logos, rotating banners – the usual stuff.
   因此，欢迎来到图像减肥诊所。 今天我们的第一个病人是……在互联网上发现一些随机页面。 嗯，我们到这里来了...页眉图形，演讲者照片，徽标，旋转横幅–通常的东西。
5. First problem - there are some GIFs. We shouldn’t be using GIFs. PNG is the format for graphics - buttons, icons, and so on. The palette type of PNG, also known as PNG8 is good as a GIF and actually better. And PNG filesizes are smaller. Well, except for really tiny GIFs, but let’s ignore these, they don’t matter much.
   第一个问题-有一些GIF。 我们不应该使用GIF。 PNG是图形的格式-按钮，图标等。 PNG的调色板类型(也称为PNG8)作为GIF很好，实际上更好。 PNG文件大小较小。 好吧，除了非常小的GIF之外，但让我们忽略它们，它们无关紧要。
6. You should convert all your GIFs to PNG8. There’s a number of tools to do this in a batch. You can use ImageMagick for example. “Instant results or your money back”. Especially since ImageMagick is free.
   您应该将所有GIF转换为PNG8。 有很多工具可以批量执行此操作。 您可以使用ImageMagick为例。 “即时结果或您的退款”。 特别是因为ImageMagick是免费的。

7. For your JPEG photos, use JPEGTran. It’s free, cross-platform, command-line tool, easy to script. And it’s lossless, you keep the photo quality. If you run it without setting any options, that’s good enough. Run with the –optimize and you’ll get even better results.

   对于JPEG照片，请使用JPEGTran。 它是免费的，跨平台的命令行工具，易于编写。 而且它是无损的，您可以保持照片质量。 如果您在不设置任何选项的情况下运行它，那就足够了。 使用–optimize运行，您将获得更好的结果。

8. Option –progressive makes JPEGs that render in the browser from low resolution to high, as opposed to top-to-bottom. If the JPEG is bigger than 10K (which is most JPEGs), the progressive encoding has a good shot at giving you a smaller image. You can always brute force – run with both options and take the smaller result.

   选项–progressive使在浏览器中呈现的JPEG从低分辨率到高分辨率，而不是从上到下。 如果JPEG大于10K(这是大多数JPEG)，则逐行编码可以为您提供较小的图像。 您总是可以蛮力地使用这两个选项运行，并获得较小的结果。

9. Option –copy none strips all comments and meta data - camera model, geo location, everything. If you own the image, strip the meta data. You’ll be surprised how much bloat is in there. If you don’t own the image, check with the owner. Option –copy all keeps all meta data.

   选项–不–copy none所有注释和元数据-摄像机型号，地理位置以及所有内容。 如果您拥有图像，请剥离元数据。 您会惊讶其中有多少膨胀。 如果您不拥有该图像，请与所有者联系。 选项– –copy all保留所有元数据。

10. Next – PNG. There’s a lot of options to optimize PNGs - all lossless and scriptable on the command line. Some even have nice graphical UIs built on top of them, you know, for our command-line-challenged friends.
    接下来– PNG。 有很多优化PNG的选项-所有这些无损且可在命令行中编写。 对于我们那些受到命令行挑战的朋友，有些甚至在它们之上构建了漂亮的图形UI。
11. There’s even browser-based UIs, built on top of some of the tools. For example, smush.it, which is now part of YSlow runs PNGcrush. Google’s Page Speed runs OptiPNG.
    在某些工具的基础上，甚至还有基于浏览器的UI。 例如，现在属于YSlow的smush.it运行PNGcrush。 Google的Page Speed运行OptiPNG。
12. With so many PNG tools, how do you decide which one to pick? They are all good tools and they do their best, so if you’re in a hurry, just pick one and go with it, script it. You’ll be pleasantly surprised by the outcome.
    拥有如此多的PNG工具，您如何决定选择哪一个？ 它们都是很好的工具，并且会尽力而为，因此，如果您着急的话，只需选择一个并对其进行脚本编写即可。 您会对结果感到惊喜。
13. Now if you’re serious about PNG weight loss, you can run all the tools you can lay your hands on. Run the next tool on the result of the previous, try with their different options switches. They all do different things, and results may vary from one image to the next. Run them all in sequence and get an even smaller file at the end.
    现在，如果您对PNG减肥很认真，则可以运行所有可以使用的工具。 根据前一个结果运行下一个工具，尝试使用其不同的选项开关。 它们都做不同的事情，结果从一张图像到下一张图像可能会有所不同。 依次运行它们，最后得到一个甚至更小的文件。
14. Or, if you’re hardcore – run PNGSlim. PNGSlim is actually a Windows batch file that runs most of the other tools. It’s very slow, it can take hours to go through a handful of files. But at the end, it will give you the leanest, most optimized PiNG.
    或者，如果您是中坚分子，请运行PNGSlim。 PNGSlim实际上是Windows批处理文件，可运行其他大多数工具。 这非常慢，可能需要几个小时才能浏览少量文件。 但是最后，它将为您提供最精简，最优化的PiNG。
15. Let’s see some results. That page has a total page weight of over 800K, including scripts, styles, everything. Over 80% of the weight is images. And what happens after optimization?
    让我们看看一些结果。 该页面的总页面重量超过800K，包括脚本，样式和所有内容。 超过80％的重量是图像。 优化之后会发生什么？
16. We can strip quite a bit, over 200K of unnecessary image information. 200K, that’s over 30% if the image weight. The page looks exactly the same, pixel by pixel. There was no manual work involved, just running some tools. I think 30% is pretty impressive.
    我们可以剥离很多，超过200K的不必要的图像信息。 200K，如果图像重量超过30％。 页面看起来完全相同，一个像素一个像素。 无需手动操作，只需运行一些工具即可。 我认为30％的成绩令人印象深刻。
17. To summarize, don’t use GIFs, run JPEGtran on your photos, and for the graphics - any PNG or all PNG tools.
    总而言之，请勿使用GIF，在照片上以及所有图形(任何PNG或所有PNG工具)上运行JPEGtran。
18. So the tools are available out there, now all you need is a process that runs the tools before your images go live. Make image optimization part of the push process.
    因此可以使用这些工具，现在您所需要的就是在图像上线之前运行这些工具的过程。 使图像优化成为推送过程的一部分。
19. These are all lossless operations that don’t require you to look at the images to verify they’re OK. So you can only win! And often you’ll see some amazing and surprising results. Even if you normally do a good job with image sizes, there’s always a few that slip as you race against the deadline. The thing is – setup a process, so you don’t even need to think about it.
    这些都是无损操作，不需要您查看图像以确认它们是可以的。 所以你只能赢！ 通常，您会看到一些惊人的结果。 即使您通常在图像尺寸方面做得很好，但在按时完成竞赛时，总会有一些失误。 关键是–建立一个流程，因此您甚至无需考虑它。
20. Thanks very much, everybody! I’m Stoyan from Yahoo! Search. Enjoy Velocity, it's a great conference!
    非常感谢大家！ 我是Yahoo的Stoyan！ 搜索。 享受速度，这是一个很棒的会议！

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/ignite-veocity-image-weight-loss-clinic/

开发诊所