2010-10-10 24 views
14

Với hình ảnh do người dùng tải lên, tôi cần tạo nhiều hình thu nhỏ khác nhau để hiển thị trên trang web. Tôi đang sử dụng ImageMagick và cố gắng làm cho Google PageSpeed ​​trở nên hạnh phúc. Thật không may, không có vấn đề gì giá trị quality tôi chỉ định trong lệnh convert, PageSpeed ​​vẫn có thể đề xuất nén hình ảnh hơn nữa.Google PageSpeed ​​& ImageMagick Nén JPG

Lưu ý rằng http://www.imagemagick.org/script/command-line-options.php?ImageMagick=2khj9jcl1gd12mmiu4lbo9p365#quality đề cập:

Đối với các định dạng JPEG ... hình ảnh, chất lượng là 1 [cung cấp] chất lượng thấp nhất hình ảnh và nén cao nhất ....

Tôi thực sự thậm chí đã thử nghiệm nén hình ảnh bằng cách sử dụng 1 (mặc dù nó đã tạo ra một hình ảnh không sử dụng được) và PageSpeed ​​vẫn gợi ý rằng tôi vẫn có thể tối ưu hóa hình ảnh đó bằng cách "nén không nén" hình ảnh. Tôi không biết làm thế nào để nén một hình ảnh nữa bằng cách sử dụng ImageMagick. Mọi đề xuất?

Dưới đây là một cách nhanh chóng để kiểm tra những gì tôi đang nói về:

assert_options(ASSERT_BAIL, TRUE); 

// TODO: specify valid image here 
$input_filename = 'Dock.jpg'; 

assert(file_exists($input_filename)); 

$qualities = array('100', '75', '50', '25', '1'); 
$geometries = array('100x100', '250x250', '400x400'); 

foreach($qualities as $quality) 
{ 
    echo("<h1>$quality</h1>"); 
    foreach ($geometries as $geometry) 
    { 
     $output_filename = "$geometry-$quality.jpg"; 

     $command = "convert -units PixelsPerInch -density 72x72 -quality $quality -resize $geometry $input_filename $output_filename"; 
     $output = array(); 
     $return = 0; 
     exec($command, $output, $return); 

     echo('<img src="' . $output_filename . '" />'); 

     assert(file_exists($output_filename)); 
     assert($output === array()); 
     assert($return === 0); 
    } 

    echo ('<br/>'); 
} 
+0

Tôi nghĩ rằng nó muốn bạn thử một định dạng lossless như PNG. Đôi khi điều này có thể cung cấp cho bạn nén tốt hơn, đặc biệt là đối với hình ảnh nhỏ; nhưng nó thực sự phụ thuộc vào loại hình ảnh mà người dùng của bạn đang tải lên. –

+1

Tốc độ trang đang đề cập đến JPG (vì nó thực sự cung cấp JPG có thể được lưu). Người dùng đang tải ảnh lên. – StackOverflowNewbie

+0

Hmm lạ, do đó, nó là JPEG nó cung cấp nhỏ hơn của bạn tự động tạo ra một? –

Trả lời

9
  • Các JPEG có thể chứa ý kiến, hình thu nhỏ hoặc siêu dữ liệu, có thể được gỡ bỏ.
  • Đôi khi có thể nén các tệp JPEG nhiều hơn, trong khi vẫn giữ nguyên chất lượng. Điều này là có thể nếu chương trình tạo hình ảnh không sử dụng thuật toán hoặc tham số tối ưu để nén hình ảnh. Bằng cách nén lại cùng một dữ liệu, trình tối ưu hóa có thể giảm kích thước hình ảnh. Điều này hoạt động bằng cách sử dụng specific Huffman tables để nén.

Bạn có thể chạy jpegtran hoặc jpegoptim trên tệp đã tạo của mình để giảm kích thước hơn nữa.

+0

Tôi đã xem các thuộc tính của các hình ảnh được tạo bởi ImageMagick. Dường như đã giữ lại siêu dữ liệu. Vì vậy, bạn biết làm thế nào tôi có thể loại bỏ điều này bằng cách sử dụng ImageMagick? Ngoài ra, có vẻ như ImageMagick sử dụng bảng Huffman. Xem mục nhập về JPEG tại http://www.imagemagick.org/script/formats.php. Điều này có giúp tôi giảm nhu cầu khám phá jpegtran hoặc jpegoptim không? – StackOverflowNewbie

+0

mogrify -strip input.jpg dường như hoạt động. Tuy nhiên, không chắc đó có phải là cách tiếp cận tốt nhất hay không. – StackOverflowNewbie

+3

Mọi JPEG đều sử dụng bảng Huffman. Imagemagick có lẽ luôn sử dụng các bảng Huffman giống nhau, trong khi jpegoptim cố gắng tìm bảng Huffman tùy chỉnh tốt nhất. – Sjoerd

4

Để giảm thiểu kích thước hình ảnh hơn nữa, bạn nên xóa tất cả dữ liệu meta. ImageMagick có thể làm điều này bằng cách thêm một -strip vào dòng lệnh.

Bạn cũng đã xem xét đặt hình ảnh thu nhỏ của mình dưới dạng dữ liệu được mã hóa inline-d base64 vào HTML của bạn?

này có thể làm cho tải trang web của bạn nhiều nhanh (mặc dù kích thước được một chút lớn hơn), vì nó tiết kiệm trình duyệt chạy nhiều yêu cầu cho tất cả các tập tin hình ảnh (hình ảnh) được tham chiếu trong mã HTML.

mã HTML của bạn cho một hình ảnh như vậy sẽ giống như thế này:

<IMG SRC="data:image/png;base64, 
     iVBORw0KGgoAAAANSUhEUgAAAM4AAABJAQMAAABPZIvnAAAABGdBTUEAALGPC/xh 
     BQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAA 
     OpgAABdwnLpRPAAAAAZQTFRFAAAA/wAAG/+NIgAAAAF0Uk5TAEDm2GYAAAABYktH 
     RACIBR1IAAAACXBIWXMAAABIAAAASABGyWs+AAAB6ElEQVQ4y+3UQY7bIBQG4IeQ 
     yqYaLhANV+iyi9FwpS69iGyiLuZYpepF6A1YskC8/uCA7SgZtVI3lcoiivkIxu/9 
     MdH/8U+N6el2pk0oFyibWyr1Q3+PlO2NqJV+/BnRPMjcJ9zrfJ/U+zQ9oAvo+QGF 
     d+npPqFQn++TXElkrEpEJhAtlTBR6dNHUuzIMhFnEhxAmJDkKxlmt7ATXDDJYcaE 
     r4Txqtkl42VYSH+t9KrD9b5nxZeog/LWGVHprGInGWVQUTvjDWXca5KdsowqyGSc 
     DrZRlGlQUl4kQwpUjiSS9gI9VdECZhHFQ2I+UE2CHJQfkNxTNKCl0RkURqlLowJK 
     1h1p3sjc0CJD39D4BIqD7JvvpH/GAxl2/YSq9mtHSHknga7OKNOHKyEdaFC2Dh1w 
     9VSJemBeGuHgMuh24EynK03YM1Lr83OjUle38aVSfTblT424rl4LhdglsUag5RB5 
     uBJSJBIiELSzaAeIN0pUlEeZEMeClC4cBuH6mxOlgPjC3uLproUCWfy58WPN/MZR 
     86ghc888yNdD0Tj8eAucasl2I5LqX19I7EmEjaYjSb9R/G1SYfQA7ZBuT5H6WwDt 
     UAfK1BOJmh/eZnKLeKvZ/vA8qonCpj1h6djfbqvW620Tva36++MXUkNDlFREMVkA 
     AAAldEVYdGRhdGU6Y3JlYXRlADIwMTItMDgtMjJUMDg6Mzc6NDUrMDI6MDBTUnmt 
     AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDEyLTA4LTIyVDA4OjM3OjQ1KzAyOjAwIg/B 
     EQAAAA50RVh0bGFiZWwAImdvb2dsZSJdcbX4AAAAAElFTkSuQmCC" 
    ALT="google" WIDTH=214 HEIGHT=57 VSPACE=5 HSPACE=5 BORDER=0 /> 

Và bạn sẽ tạo ra mã hóa base64 dữ liệu hình ảnh như thế này:

base64 -i image.jpg -o image.b64 
+0

Tôi không chắc điều này là đúng. Tham chiếu các tệp bên ngoài có nghĩa là trình duyệt có thể sử dụng nhiều bộ xử lý, lõi và liên kết mạng để yêu cầu hình ảnh (hoặc bất kỳ tài nguyên nào khác). HTTP/1.1 có một số chi phí cho một yêu cầu mới có thể lớn hơn lợi ích đó, nhưng HTTP/2.0 hoặc SPDY (có sẵn trong nhiều trình duyệt hiện đại) có thể sử dụng một kết nối duy nhất để thực hiện nhiều yêu cầu cùng một lúc. –

Các vấn đề liên quan