progressive_jpeg.md

Progressive JPEG是一种通过优化JEPG方式来优化WEB网站使用体验的方式，和Baseline JPEG不同，Progressive JPEG可以让浏览器下载图片的部分时就显示完整的低分辨率图片，并逐步下载和展示完整的高分辨率图像。这样用户可以对图像有较好的观赏体验。

常规的JPEG图片加载是从上往下，也称为baseline图像。

Baseline JPEG和Progressive JPEG对比

• Baseline JPEG

• Progressive JPEG

使用ImageMagick创建优化和progressive JPG

以下命令优化JPG图片并使之实现progressive

convert -strip -interlace Plane -quality 80 input-file.jpg output-file.jpg

批量处理一个目录下的所有图片：

for i in source/images/backgrounds/*.jpg; do convert -strip -interlace Plane -quality 80 $i $i; done

使用Carrierwave和MiniMagick，可以创建一个优化功能模块：

def optimize
  manipulate! do |img|
      return img unless img.mime_type.match /image\/jpeg/
      img.strip
      img.combine_options do |c|
          c.quality "80"
          c.depth "8"
          c.interlace "plane"
      end
      img
  end
end

然后使用如下加载器：

version :large do
  process :optimize
end

Use ImageMagick to create optimised and progressive JPGs

参考

• Progressive JPEGs FTW!
• Image Optimization, Part 4: Progressive JPEG...Hot or Not?
• Progressive jpegs: a new best practice
• Progressive image rendering: Good or evil?
• Use ImageMagick to create optimised and progressive JPGs
• Progressive JPEG