2010-10-10 25 views
14

Kullanıcı tarafından yüklenen bir resim verildiğinde, bir web sitesinde görüntülemek için çeşitli küçük resimlerini oluşturmam gerekiyor. ImageMagick kullanıyorum ve Google PageSpeed'i mutlu etmeye çalışıyorum. Ne yazık ki, convert komutunda belirtilen quality değeri ne olursa olsun, PageSpeed, görüntüyü daha da sıkıştırmanızı önerebilir. http://www.imagemagick.org/script/command-line-options.php?ImageMagick=2khj9jcl1gd12mmiu4lbo9p365#quality telaffuz edilmesiGoogle PageSpeed ​​& ImageMagick JPG sıkıştırma

Not: JPEG ... görüntü biçimleri için

, kalite 1 düşük görüntü kalitesi ve en yüksek sıkıştırma ....

[sağlar] şeklindedir Hatta görüntüyü 1 kullanarak sıkıştırmayı test ettim (yine de kullanılamaz bir görüntü oluşturdu) ve PageSpeed ​​hala bu görüntüyü "görüntüyü kayıpsız şekilde sıkıştırarak" optimize edebileceğimi gösteriyor. ImageMagick kullanarak bir görüntüyü nasıl sıkıştırılacağını bilmiyorum. Herhangi bir öneriniz var mı?

Burada neden bahsettiğimi test etmek için hızlı bir yoldur:

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

Ben PNG gibi kayıpsız biçimi denemek istiyor düşünüyorum tarafından desteklenmektedir. Bazen bu özellikle küçük görüntüler için size daha iyi sıkıştırma sağlayabilir; Ancak, kullanıcıların yükledikleri resmin türüne bağlıdır. –

+1

PageSpeed, JPG'ye atıfta bulunur (aslında kaydedilebilecek bir JPG sağladığı için). Kullanıcılar fotoğraf yüklüyor. – StackOverflowNewbie

+0

Hmm garip, yani otomatik olarak oluşturduğunuzdan daha küçük olan JPEG? –

cevap

9
  • JPEG kaldırılabilir yorum, küçük resimler veya meta içerebilir.
  • Bazen aynı kaliteyi korurken JPEG dosyalarını daha fazla sıkıştırmak mümkündür. Görüntüyü oluşturan program, görüntüyü sıkıştırmak için en uygun algoritmayı veya parametreleri kullanmadıysa bu mümkündür. Aynı verileri yeniden sıkıştırmak suretiyle, bir iyileştirici görüntü boyutunu azaltabilir. Bu sıkıştırma için specific Huffman tables kullanarak çalışır.

Boyutu daha da azaltmak için oluşturduğunuz dosyada jpegtran veya jpegoptim çalıştırabilirsiniz.

+0

ImageMagick tarafından oluşturulan görüntülerin özelliklerine baktım. Meta veriler korunmuş gibi görünüyor. ImageMagick'i kullanarak bunu nasıl kaldırabilirim biliyor musunuz? Ayrıca, ImageMagick Huffman tabloları kullanıyor gibi görünüyor. JPEG ile ilgili bilgileri http://www.imagemagick.org/script/formats.php adresinde bulabilirsiniz. Bu bana jpegtran veya jpegoptim'i keşfetme ihtiyacını ortadan kaldırıyor mu? – StackOverflowNewbie

+0

mogrify -strip input.jpg işe yarıyor gibi görünüyor. Yine de en iyi yaklaşım olup olmadığından emin değilim. – StackOverflowNewbie

+3

Her JPEG Huffman tablolarını kullanır. Imagemagick muhtemelen her zaman aynı Huffman tablolarını kullanır, jpegoptim ise en iyi, özel Huffman tablosunu bulmaya çalışır. – Sjoerd

4

Görüntü boyutlarını daha da küçültmek için, tüm meta verileri kaldırmanız gerekir. ImageMagick, komut satırına -strip ekleyerek bunu yapabilir.

Ayrıca, , küçük resim resimlerinizi inline-d base64 kodlanmış veri HTML'nize eklemek için var mı?

Bu web sayfası yükleme yapabilirsiniz çok (boyut biraz daha büyük olur bile) hızlı, bu başvurulan tüm resim dosyaları (resim) için birden fazla istekte çalışmasını tarayıcısını kaydeder çünkü HTML kodu.

<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 /> 

Ve böyle görüntü verilerini base64 olarak kodlanmış yaratacak:

böyle bir görüntü için HTML kodunuz şu şekilde görünecektir

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

Bunun doğru olduğundan emin değilim. Harici dosyalara başvurmak, tarayıcının görüntüleri (veya herhangi bir başka kaynağı) istemek için birden çok işlemci, çekirdek ve ağ bağlantısı kullanabileceği anlamına gelir. HTTP/1.1, bu avantajdan daha ağır basan yeni bir talep için bazı ek yüklere sahiptir, ancak HTTP/2.0 veya SPDY (birçok modern tarayıcıda mevcuttur) tek seferde birden çok istek yapmak için tek bir bağlantıyı kullanabilir. –

İlgili konular