Görüntüleri sıkıştırır: Bir Web Tasarımcısı Kılavuzu

Sep 15, 2025

Nasıl Yapılır

Modern bir internet bağlantısının ortalama hızı, geçmişin web ustalarına çok fütüristik geliyor. Web'in ilk günlerinde, transfer edilen veriler miktarı, hem zaman ve maliyet açısından, bu nedenle çevrimiçi bir şeye ev sahipliği yapmak için yer alan herkes görüntüler daha küçük hale getirmeye çalıştı.

İronik olarak, sorun günümüzde gitmedi. Bir komut dosyası-ağır web sitesini (Mainstream Dünya Haberleri gibi) her ziyaretinizde, genellikle bir düzine megabayt javascript kodu, görüntü, video ve değeri çeker. Hala acı verici bir şekilde yavaş olabilir ve hatta bazı mobil veri kullanıcıları için güzel bir kuruşa mal olabilir (bu, eğer iyi kullanırsanız sorun olmamalıdır) Web Sitesi Oluşturucu , ve iyi ağ sağlayıcısı senin için bir göz tutmalı).

Bu eğitimde, web için bitmap dosyalarını zayıflayabileceğiniz yolları öğreneceğiz. Eski PNG ve JPEG formatlarını kullandığı sürece (daha fazla bilgi edinin) görüntü dosyası formatları Burada ve dosyalarınızı sağa kaydettiğinizden emin olun. Bulut depolama Ayrıca), bazı sıcak kullanarak kaliteyi ödün vermeden onları nasıl daha küçük hale getirebileceğimizi göreceğiz. Açık Kaynak Projeleri . Sonunda, hala iyi görünecek, ancak kullanıcıların web tarayıcılarında daha az zaman ve veri gerektiren daha küçük dosyalara sahip olacağız.

Ayrıntılara dalmak için okunur. İlk olarak, yazılım hakkında hızlı bir not. Burada belirtilen tüm araçlar açık kaynaktır - bir rehber için alttan aşağıya atlayın Yazılım Nasıl Alınır İhtiyacın var.

En iyi WordPress portföy temaları

Doğru formatı seçin

Dosya boyutu hakkında hala heyecanlanmak için önemsiz, ancak bir görüntünün herhangi bir amaç olmadan çok büyük olduğu ya da küçük olmasına rağmen korkunç göründüğü yeterli örnek var. Bu hataları önlemek için, görüntüyü akıllıca kaydetmek veya dönüştürmek için bir format seçin. JPEG'yi kullanmak, bir görüntüyü her kiremit sıkıştırıldığı, 8x8 pikselin fayanslarına bölünür. Sıkıştırma seviyesi, kullanıcıya bağlıdır (bir görüntüyü kaydettiğinizde bu kaydırıcıdır) ancak tipik olarak JPEG, kalitede kabul edilebilir bir kayıpla 10: 1 dosya boyutu kazancını sağlar.

Yüksek (80-100) ve düşük (40-60) sıkıştırma oranı ile yapılan JPEG dosyaları arasındaki algısal fark, fotografik görüntüler için minimumdur, ancak dijital sanat eseri, simgeler ve ekran görüntüleri gibi şeyler için oldukça belirgindir. Bu nedenle, fotoğraflar için JPEG seçmeniz ve diğer bitmap görüntüleri için başka bir şeyle gitmeniz önerilir.

PNG, ağ grafikleri için en uygun formatlardan biridir (aslında, kısaltması ne demektir). JPEG formatı her zaman kayıp olurken (kalitede 100 olarak ayarlanmış olsa bile), png formatı kayıplı olabilir veya olmaz. Ayrıca, olsa bile, görüntüde kullanılan renk sayısını azaltarak verileri sıkıştırır, böylece sonuç hala net ve net görünüyor. Bu nedenle, Screengrabs'ı veya diğer herhangi bir resmi katı dolguyla tasvir etmek için PNG'yi seçin.

Uygun yöntemlerle başlayın

Imagine is based on Electron and provides a friendly interface for processing several images at once — Hayal edin, elektrona dayanır ve birkaç resimde bir kerede işlemek için dostça bir arayüz sağlar.

Bitmap dosyalarını optimize etmek bir sürü ücretsiz araçla mümkündür, bu nedenle tam teşekküllü bir görüntü düzenleyicisine güvenmeniz gerekmez. Hayal edin, böyle bir uygulama olduğunu ve kullanımı inanılmaz derecede kolaydır. Sadece bir görüntüyü (veya bir görüntü yığını) hayalin penceresinin üzerine sürükleyin ve sıkıştırma oranını ayarlamak için küçük sürgüleri kullanın.

JPEG, PNG ve WebP dosyaları ile çalışır ve kayıplı kodlama için idealdir. En büyük avantaj, aletin etkileşimli olmasıdır; Görüntünün geçerli ayarlarla nasıl görüneceğini anında gösterir ve önerilen dosya boyutunu görüntüler. Santicini, toplu işleme için mükemmeldir - en azından ihtiyacınız varsa, en azından açılan tüm görüntüleri bir kerede kaydedebilir.

Söylemeye gerek yok, bazı kullanışlı çevrimiçi hizmetler de dahil olmak üzere, yüzlerce, diğer JPEG ve PNG optimizatörlerinin yüzlerce değilse, düzinelerce var. Tinyjpg ). Ama henüz acele etme - kolumuza daha iyi bir şeyimiz var.

Gelişmiş Sıkıştırma Teknikleri

For JPEG, we used a test photo of a straw hat on a blurred background; Guetzli reduced file size by 33 per cent and Lepton by another 23 per cent — JPEG için, bulanık bir arka plan üzerinde hasır şapkanın bir test fotoğrafını kullandık; Guetzli, dosya boyutunu yüzde 33 ve Lepton'a yüzde 23 daha azalttı

İlk bakışta, kayıplı JPEG dosya boyutlarından bir ısırıktan çok daha fazla bir ısırık alamayız, fındıkla veya başka bir sıkıştırma tekniğini kullanarak görüntüleri daha fazla arşivleme girişimleri ile kanıtlanmış girişimlerle kanıtlanabilen bir şey. Ama burada JPEG için akıllı bir İsviçre kurabiyesi ve sofistike algısal kodlayıcı Guetzli geliyor.

Guetzli, sıkıştırma yoğunluğunu arttırarak ortalama bir JPEG'yi yüzde 20 ila 30'a kadar daha küçük yapar. Sırrı, algoritmanın insanların gördüklerini algıladıkları yolların farkında olmasıdır, bu yüzden ortaya çıkan görüntü hala göze harika görünüyor. Guetzli, aşağıdaki sözdizimini kullanan bir çapraz platform komut satırı aracıdır:

guetzli [--quality Q] [--verbose] original_image output_jpeg_image

Orijinal görüntü PNG veya JPEG olabilir, çıktı her zaman JPEG'dir. Bu nedenle, son teknoloji ürünü sıkıştırma sayesinde PNG'yi JPEG'ye dönüştürmek için Guetzli'yi kullanabilirsiniz. Kalite 0-100 arasında düşmelidir. Guetzli, inanılmaz derecede kaynak-ağır bir yazılımdır; 1 megapiksel başına yaklaşık 300 MB bellek ve ayrıca çok fazla CPU gücü tüketir. Süper optimize edilmiş JPEG'lerin küresel ısınmayı artırmayacağını umuyoruz ...

Taşınabilir ağ grafikleri, kayıpsız görüntü kodlaması için tasarlandığı sürece farklı bir hikayedir. Görüntüyü GIMP gibi bir görüntü düzenleyicisinde PNG olarak kaydettiğinizde, 0 ila 9 arasındaki değerlere sahip bir sıkıştırma oranı kaydırıcınız var. Burada 0 Sıkıştırma anlamına gelmez ve görüntünün bir tiff olarak kaydedilmiş olduğu gibi ağırlığındadır. Buna karşılık, 9, gereksiz renk bilgilerinin çoğunun çoğunu vurur ve TIFF'den 15-20 kat daha küçük bir dosyada sonuçlanır.

Bu sefer daha da küçük bir PNG dosyasını (9 oranında) daha da küçük olmaya çalışacağız. Bu amaçla, Google laboratuvarlarında tekrar köklü olan bir başka açık kaynaklı araç olan Zopfli'yi kullanacağız. Zopfli, deflate, GZIP ve ZLIB veri kodlaması için yüksek kaliteli bir kompresördür.

İlginç kısım, Zopfli'nin bir pakette iki kodlayıcı içermesidir: genel amaçlı ikili ve özel 'zopflipng' aracıdır. İkincisi tam olarak ihtiyacımız olan şeydir! Zopflipng, WebP formatından gelen belirli algoritmalara sahip bir deflate dayalı enkoderdir. Scanline kodlarını kullanarak en iyi stratejiyi otomatik olarak seçecek ve PNG içindeki çeşitli gereksiz parçaların çıkarılmasını otomatik olarak seçecek kadar akıllıdır. Bu basit sözdizimiyle kullanın:

zopflipng original_png output_png

Zopflipng, muhtemelen işi aşağıdaki açık seçeneklerle daha da iyi hale getirebilir:

 ZOPFLIPNG --ITERASYONLAR = 500 --FilTers = 01234MEPB - Lossy_8bit - Lossy_Transparent Original_png
çıkış_png

Ödemeniz gereken fiyat Guetzli ile aynıdır: Araç, özellikle büyükse, bir görüntüyü işlemek için çok zaman alır. Ne kadar çok yinelemedik, o kadar uzun sürecek, ancak 500 makul bir sayıdır. Zopfli ile olan dosya boyutu kazancı yüzde 8 ila 20 arasında yatıyor, bu da görsel olarak mükemmel görüntüler için çok iyidir. Kısacası, yüzde 8 kazanma, ekran görüntüleri için ortaktır, oysa yüzde 20 fotoğraflarla mümkündür (bunları PNGS olarak saklamanız gerektiğinde).

Next-gen dosya formatlarına yükseltme

The test PNG image was an ordinary 1920x1080 screenshot; consequent compression by Zopflipng and then FLIF gained 14 per cent without reducing the number of colours — Test PNG görüntüsü sıradan bir 1920x1080 ekran görüntüsü idi; Sonuçta zopflipng tarafından sıkıştırma ve daha sonra FLIC, renk sayısını azaltmadan yüzde 14 kazandı

Resmi olarak, bu bölüm PNG ve JPEG kapsamının ötesine geçiyor, ancak çok pratiktir, çünkü sinyolojik dosya dönüşümü düzenleyebilirsiniz. Burada ne demek istediğimiz, en iyi endüstri standartlarını daha iyi performans gösteren alternatif ve yeni görüntü formatlarını kullanmaktır (WebP'yi okuyun).

Biri, PNG, FFV1, kayıpsız webp, kayıpsız BPG ve kayıpsız JPEG 2000'ü sıkıştırma oranı açısından baştan çıkarabilen manyak (meta adaptif yakınır-sıfır tamsayı aritmetik kodlama) dayanan sıkıştırma yöntemi olan FLIC, FLIC'dir. FLIC, tüm platformlar için mevcuttur ve bazı resim izleyicileri zaten onu destekliyor ancak ana akım vurmak için uzun bir yol var. Şu anda, depolama için veya sunucu tarafında FLIC'yi kullanarak mantıklı geliyor. Verimli bir arşivleme formatı gibi davranabilir. Kodu projenin Github sayfasından almanız ve derlemeniz gerekir. Bir kere flif İkili yüklü, bir PNG görüntüsünü kodlamak için aşağıdaki komutu kullanın:

 FLIC -E ORIGINAL_PNG OUTOR_FLIF

Değiştirmek -e ile -d ve görüntünüzü PNG'ye geri çevirmek için dosyaları ters sırayla yerleştirin. Araçlar açısından, şu anda Windows için FLIC WIC API bileşeni, Linux için QT FLIC eklentisi ve MacOS için QuickLook eklentisi (Ayrıntılar için bağlantılar bölümüne bakın). Daha önce ZopfliPng tarafından işkence gören görüntüyle karşılaştırıldığında, FLIC, dosya boyutunu yüzde 10 oranında azaltır. Etkileyici sonuçlar!

Son kahramanımız Lepton, Dropbox geliştiricileri tarafından cömertçe yayınlanan bir başka açık kaynaklı formattır. Lepton, JPEG ile yaptığı şeydir. Lepton, kayıpsız modda JPEG'leri yüzde 22'ye kadar indirebilir, yani kodlayıcının orijinal JPEG dosyasına kıyasla kalite kaybına neden olmadığı anlamına gelir. Kaputun altında Lepton, bu 8x8 JPEG bloklarını sıkıştırmanın akıllı tekniklerini ifade eder. Sıfırlar ve olanlar yazmak yerine, Lepton, her bloğun etrafındaki bağlamı açan VP8 aritmetik kodlayıcıyı kullanarak Bitmap verilerini kodlar.

Testimiz Lepton'un çok verimli ve hızlı olmasını kanıtladı. Komut aşağıdakilere benziyordu:

 Lepton original.jpg çıkış.lep

Ve ikinci bir veya ikide araç, orijinalin neredeyse dörtte biri kadar küçük olan .EP dosyasını üretti. Zaman alıcı Guetzli ile karşılaştırıldığında, Lepton yanıyor. Lepton'u aynı şekilde dropbox'u kullanabilirsiniz. Biçim, depolama maliyetlerini yüzde 20 ila 25 oranında azaltmanıza olanak tanır ve bu kadar snappy olduğundan, büyük dezavantajları olmayan sineklik kodlama / kod çözme dizileri yapabilirsiniz. Bu arada, kod çözme komutu eşit derecede basittir, yalnızca iki dosyayı değiştirmesi gerekir ve elde edilen dosyanın orijinal JPEG ile aynıdır:

 Lepton original.lep çıkış.jpg

Kullanıcı verilerini optimize etmek için açıklanan teknikleri kullanın veya web projelerinizin yükleme hızlarını daha da iyileştirin.

Yazılım Nasıl Alınır

Bu eğitimde açıklanan her yazılım parçası açık kaynaktır, böylece serbestçe kullanabilirsiniz. Aşağıdaki araçların çoğu, ikili yüklemelerin çoğunun kaynaklarından kaynaklanan her şeyi derlemeye gerek yoktur. İşte yazılımı yukarı ve çalıştırmayı nasıl elde edeceğiniz.

Guetzli ikili tut İşte . Yapılacak en kolay şey. Zopfli sadece kodu verir ('make' ile 'yaptırın') Github . Ancak, node.js paket yöneticisi aracılığıyla elde etmeniz daha akıllı olabilir:

NPM NODE-ZOPFLI

FLIC için bazı yararlı bağlantılar:

Flif hub : Referans Uygulama, Kaynaklar ve Windows Binaries
XnView MP : Dahili FLIC destekli çapraz platformlu fotoğraf görüntüleyici
qt-flif-eklentisi : Linux kullanıcıları için bir cennet
Pedal : MacOS için bir izleyici ve QuickLook eklentisi
Lepton : Kaynak Kodu ve Windows Binaries

Bu makale başlangıçta 316'da yayınlandı. ağ , dünyanın web tasarımcıları ve geliştiricileri için en çok satan dergisi. Sayı 316 burada satın al veya abone olun .

İlgili Makaleler:

Görüntü çözünürlüğüne nihai rehber
CSS'de Glitch Metin ve Görüntü Efektleri Nasıl Oluşturulur?
Tasarımcının görüntüleri daha etkili kullanma kılavuzu
4 Temel Görüntü Optimizasyonu İpuçları

Görüntüleri sıkıştırır: Bir Web Tasarımcısı Kılavuzu

Doğru formatı seçin

Uygun yöntemlerle başlayın

Gelişmiş Sıkıştırma Teknikleri

Next-gen dosya formatlarına yükseltme

Yazılım Nasıl Alınır

Nasıl Yapılır - En Popüler Makaleler

Sketchup ile bir kale nasıl boyanır

Diffush ile başlayın

Yağlı boya ile parlayan renkler nasıl oluşturulur

Bir Chatbot Arayüzü Nasıl Yapılır

Zbrush'ta bir uzaylı korsan yaratığı model

Dijital sanatınızda ressam bir his yaratın

eskiz becerilerinizi geliştirin

How to make a flexible ribbon rig

Kategoriler