The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

Resim optimizasyonu

Resimler genellikle bir web sayfasinda indirilen baytlarin çogunlugundan sorumlu olur ve siklikla görsel alanin önemli bir kismini kaplar. Sonuç olarak, resimlerin optimize edilmesi genellikle en büyük bayt tasarruflarindan ve web sitenizdeki en iyi performans iyilestirmelerinden bazilarini saglayabilir: Tarayicinin indirmesi gereken bayt miktari azaldikça, istemci bant genisligi için daha az rekabet olur ve tarayici, yararli içerigi daha hizli indirip ekranda olusturabilir.

Resim optimizasyonu hem bir sanat hem de bilimdir: Tek bir resmin en iyi nasil sikistirilacagina dair tek bir tanimlayici yanit olmadigindan bir sanattir; bununla birlikte bir resmin boyutunu önemli ölçüde küçültebilecek iyi gelistirilmis birçok teknik ve algoritma olmasindan dolayi bir bilimdir. Resminiz için en iyi ayarlarin bulunmasi, birçok boyutta dikkatli analizlerin yapilmasini gerektirir: Biçim yetenekleri, kodlanmis verilerin içerigi, kalite, piksel boyutlari ve daha fazlasi.

Resimleri çikarma ve degistirme

TL;DR

  • Gereksiz resim kaynaklarini çikarin
  • Mümkün oldugunda CSS3 efektlerinden yararlanin
  • Resimlerde metin kodlamak yerine web yazi tiplerini kullanin

Kendinize ilk olarak, bir resmin gerçekte pesinde oldugunuz etkiyi gerçeklestirmek için gerekli olup olmadigini sormaniz gerekir. Iyi tasarim basittir ve her zaman en iyi performansi saglar. Genellikle HTML, CSS, JavaScript ve sayfadaki diger varliklara göre daha fazla sayida bayt gerektiren bir resim kaynagini çikarabiliyorsaniz, bu her zaman en iyi optimizasyon stratejisidir. Bununla birlikte, iyi yerlestirilmis bir resim bin kelimeden daha fazla bilgi aktarabilir; bu nedenle, bu dengeyi bulmak size baglidir.

Daha sonra, istenen sonuçlari daha verimli bir sekilde saglayabilecek bir alternatif teknolojinin olup olmadigini düsünmeniz gerekir:

  • CSS etkileri (gradyanlar, gölgeler vb.) ve CSS animasyonlari, genellikle bir resim dosyasinin gerektiginden daha az sayida bayt ile her çözünürlükte ve zum düzeyinde her zaman net görünen, çözünürlükten bagimsiz varliklar olusturmak için kullanilabilir.
  • Web yazi tipleri metin seçme, arama ve yeniden boyutlandirma yetenegini korurken güzel yazi biçimleri kullanilabilmesini saglar. Bu, kullanilabilirlik açisindan önemli bir iyilestirmedir.

Kendinizi bir resim varliginin içine metin kodlarken bulursaniz durun ve yeniden düsünün. Harika tipografi iyi tasarim, marka bilinci olusturma ve okunabilirlik için kritik öneme sahiptir, ancak resim içindeki metin seçilebilir, aranabilir, zum yapilabilir, erisilebilir ve yüksek DPI'ya sahip cihazlar için kolay kullanilabilir degildir. Web yazi tiplerinin kullanilmasi, kendi optimizasyon ayarlarini gerektirir, ancak tüm bu endiseleri ele alir ve her zaman daha iyi bir metin görüntüleme seçenegidir.

Vektör ve Tarama resimler

TL;DR

  • Vektör resimler, geometrik sekillerden olusan resimler için idealdir
  • Vektör resimler zum ve çözünürlükten bagimsizdir
  • Tarama resimler, birçok düzensiz sekil ve ayrinti bulunan karmasik sahneler için kullanilmalidir

Bir resmin gerçekte istediginiz etkiyi gerçeklestirmek için en uygun biçim oldugunu belirledikten sonraki kritik seçim, uygun biçimin seçilmesidir:

 

Zum yapilmis vektör resim
Zoomed-in vector image
Zum yapilmis tarama resim
Zoomed-in raster image
  • Vektör grafikler, bir resmi yansitmak için çizgiler, noktalar ve çokgenler kullanir.
  • Tarama grafikler, bir resmi, dikdörtgen sekilli bir kilavuzun içindeki her bir pikselin tek tek degerlerini kodlayarak yansitir.

Her bir biçimin kendi olumlu ve olumsuz yönleri vardir. Vektör biçimleri, ideal olarak geometrik sekillerden olusan resimler (ör. logolar, metin, simgeler vb.) için uygundur ve her çözünürlük ve zum ayarinda net sonuçlar saglar. Bu, vektör resimleri yüksek çözünürlüklü ekranlar ve degisen boyutlarda görüntülenmesi gereken varliklar için ideal bir biçim yapar.

Bununla birlikte, vektör biçimleri sahne karmasik hale geldiginde (ör. bir fotograf) yetersiz kalir: Tüm sekilleri açiklamak için gereken SVG biçimlendirmesi engelleyici bir sekilde yüksek olabilir ve sonuç yine de fotograf gerçekliginde görünmeyebilir. Böyle bir durumda GIF, PNG, JPEG gibi bir tarama resim biçimini veya JPEG-XR ve WebP gibi daha yeni biçimlerden birini kullanmaniz gerekir.

Tarama resimler, çözünürlükten veya zumdan bagimsiz olma gibi hos özelliklere sahip degildir. Bir tarama resmin ölçegini büyüttügünüzde tirtikli ve bulanik grafikler görürsünüz. Sonuç olarak, kullanicilariniza en uygun deneyimi saglamak için bir tarama resmin birden çok sürümünü çesitli çözünürlüklerde kaydetmeniz gerekebilir.

Yüksek çözünürlüklü ekranlarin çikarimlari

TL;DR

  • Yüksek çözünürlüklü ekranlarin CSS pikseli basinda birden çok cihaz pikseli vardir
  • Yüksek çözünürlüklü resimler, önemli ölçüde daha fazla piksel ve bayt gerektirir
  • Resim optimizasyon teknikleri, çözünürlükten bagimsiz olarak aynidir

Resim piksellerinden söz ettigimizde, farkli piksel türlerini birbirinden ayirt etmemiz gerekir: CSS pikselleri ve cihaz pikselleri. Tek bir CSS pikseli birden çok cihaz pikseli içerebilir. Örnegin, tek bir CSS pikseli dogrudan tek bir cihaz pikseline karsilik gelebilir veya birden çok cihaz pikseli tarafindan desteklenebilir. Bunun amaci nedir? Ne kadar çok cihaz pikseli olursa ekranda görüntülenen içerigin ayrintisi da o kadar ince olur.

CSS ve cihaz pikselleri

Yüksek DPI'ya sahip (HiDPI) ekranlar güzel sonuçlar üretir, ancak bunun için açikça bir seyden vazgeçmeleri gerekir: Resim varliklarimizin daha yüksek cihaz pikseli sayisindan yararlanabilmesi için daha ayrintili olmasi gerekir. Iyi haber, vektör resimlerinin bu görev için ideal bir sekilde uygun oldugudur. Her çözünürlükte net sonuçlarla olusturulabilirler. Daha ince ayrintiyi olusturmak için daha yüksek bir isleme maliyeti ödeyebiliriz, ancak temel varlik aynidir ve çözünürlükten bagimsizdir.

Diger yandan, tarama resimler, resim verilerini piksel temelinde kodladiklari için çok daha büyük bir zorluga neden olur. Dolayisiyla, piksel sayisi arttikça, bir tarama resmin dosya boyutu da büyür. Örnek olarak, 100x100 (CSS) pikselde görüntülenen bir fotograf varligi arasindaki farki düsünelim:

Ekran çözünürlügü Toplam piksel sayisi Sikistirilmamis dosya boyutu (piksel basina 4 bayt)
1x 100 x 100 = 10.000 40.000 bayt
2x 100 x 100 x 4 = 40.000 160.000 bayt
3x 100 x 100 x 9 = 90.000 360.000 bayt

Fiziksel ekranin çözünürlügünü iki katina çikardigimizda, toplam piksel sayisi dört kat artar: yatay piksellerin sayisi iki kat, dikey piksellerin sayisi da iki kat fazla olur. O zaman, 2x olan bir ekran gereken piksel sayisini iki katina degil, dört katina çikarir!

Bu, uygulamada ne anlama gelir? Yüksek çözünürlüklü ekranlar, güzel resimler sunmamizi saglar ve bu, harika bir ürün özelligi olabilir. Bununla birlikte, yüksek çözünürlüklü ekranlar ayni zamanda yüksek çözünürlüklü resimler gerektirir: Çözünürlükten bagimsiz olduklari ve her zaman net sonuçlar sagladiklari için mümkün oldugunda vektör resimleri tercih edin. Bir tarama resmin kullanilmasi gerekirse her bir resmin birden çok çesidini saglayip optimize edin. Daha ayrintili bilgi için okumaya devam edin.

Vektör resimleri optimize etme

TL;DR

  • SVG, XML tabanli bir resim biçimidir
  • Boyutlarinin azaltilmasi için SVG dosyalari küçültülmelidir
  • SVG dosyalari GZIP ile sikistirilmalidir

Tüm modern tarayicilar, iki boyutlu grafikler için XML tabanli bir resim biçimi olan Ölçeklenebilir Vektör Grafikleri'ni (SVG) destekler: SVG biçimlendirmesini dogrudan sayfaya yerlestirebilir veya harici bir kaynak olarak saglayabiliriz. Dolayisiyla, bir SVG dosyasi çogu vektör tabanli çizim yazilimiyla veya el ile dogrudan en sevdiginiz metin düzenleyicisinde olusturulabilir.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
  <g>
    <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
  </g>
</g>
</svg>

Yukaridaki örnek, siyah bir ana hatti ve kirmizi bir arka plani olan basit bir daire sekli olusturur ve bu sekilde Adobe Illustrator'dan disa aktarilmistir. Fark edebileceginiz gibi genellikle varligin tarayicida olusturulmasi için gerekli olmayan katman bilgileri, açiklamalar ve XML ad alanlari gibi çok sayida meta veri içermektedir. Sonuç olarak, svgo gibi bir araç çalistirarak SVG dosyalarinizi küçültmeniz her zaman iyi bir fikirdir.

Tipik bir örnek olarak svgo, Illustrator tarafindan olusturulan yukaridaki SVG dosyasinin boyutunu %58 oraninda küçülterek 470 bayttan 199 bayta düsürür. Bunun yani sira, SVG XML tabanli bir biçim oldugundan aktarim boyutunu küçültmek için GZIP sikistirmasini da uygulayabiliriz. Sunucunuzun SVG varliklarini sikistiracak sekilde yapilandirildigindan emin olun!

Tarama resimleri optimize etme

TL;DR

  • Tarama resmi, piksellerden olusmus bir kilavuzdur
  • Her bir piksel, renk ve seffaflik bilgilerini kodlar
  • Resim sikistiricilari, resmin dosya boyutunu küçültmek için piksel basina gereken bit sayisini azaltmak üzere çesitli teknikler kullanir

Bir tarama resim, bagimsiz piksellerden olusan 2 boyutlu bir kilavuzdur. Örnegin, 100x100 piksellik bir resim, 10.000 piksellik bir siradir. Bununla birlikte, her bir piksel "RGBA" degerlerini saklar: (R) kirmizi kanal, (G) yesil kanal, (B) mavi kanal ve (A) alfa (seffaflik) kanali.

Dahili olarak, tarayici her bir kanal için 256 deger (gölgeler) ayirir. Bu da kanal basina 8 bit (2 ^ 8 = 256) ve piksel basina 4 bayta (4 kanal x 8 bit = 32 bit = 4 bayt) karsilik gelir. Sonuç olarak, kilavuzun boyutlarini bilirsek dosya boyutunu kolayca hesaplayabiliriz:

  • 100 x 100 piksellik resim 10.000 pikselden olusur
  • 10.000 piksel x 4 bayt = 40.000 bayt
  • 40.000 bayt / 1024 = 39 KB

^

Boyutlar Piksel sayisi Dosya boyutu
100 x 100 10.000 39 KB
200 x 200 40.000 156 KB
300 x 300 90.000 351 KB
500 x 500 250.000 977 KB
800 x 800 640.000 2500 KB

100x100 piksellik bir resim için 39 KB büyük bir sorun gibi görünmeyebilir, ancak daha büyük resimlerde dosya boyutu hizla patlar ve resim varliklarini indirilmesi yavas ve pahali ögeler haline getirir. Neyse ki, simdiye kadar sikistirilmamis resim biçimini açikladik. Resim dosyasinin boyutunu küçültmek için ne yapabiliriz?

Bir basit strateji, resmin 'bit derinligi'ni kanal basina 8 bitten daha küçük bir renk paletine düsürmektir: Kanal basina 8 bit bize kanal basina 256 deger ve toplamda 16.777.216 (2563) renk verir. Paleti 256 renge düsürseydik ne olurdu? O zaman RGB kanallari için toplamda yalnizca 8 bite ihtiyacimiz olurdu ve hemen piksel basina iki bayt tasarruf ederdik. Bu, orijinal piksel basina 4 bayt biçimimize göre %50 sikistirma tasarrufuna karsilik gelir!

Sikistirma yapay nesneleri

Bagimsiz piksellerde saklanan verileri optimize ettikten sonra, daha akilli olabilir ve yakindaki piksellere de bakabilirdik: Görünüse göre birçok resmin, özellikle de fotograflarin benzer renklere sahip birçok yakin pikseli var (ör. gökyüzü, tekrar eden dokular vb.). Sikistirici, bu bilgileri avantajimiza kullanarak 'delta kodlamasini' uygulayabilir. Bu durumda, her bir pikselin bagimsiz degerlerini saklamak yerine yakindaki pikseller arasindaki farki saklayabiliriz: Bitisik pikseller ayniysa delta 'sifir' olur ve yalnizca tek bir biti saklamamiz gerekir! Peki ama neden orada duralim?

Insan gözü farkli renklere karsi farkli hassasliktadir: Paleti bu renkler için düsürerek veya yükselterek bunu hesaba katabilir ve renk kodlamamizi optimize edebiliriz. 'Yakindaki' pikseller, iki boyutlu bir kilavuz olusturur. Bu, her bir pikselin birden çok komsusu oldugu anlamina gelir: Delta kodlamasini daha da iyilestirmek için bu gerçegi kullanabiliriz. Her bir pikselin yalnizca bitisigindeki komsularina bakmak yerine, yakindaki piksellerden olusan daha genis bloklara bakabilir ve farkli bloklari farkli ayarlarla kodlayabiliriz. Ve bu böyle devam eder...

Gördügünüz üzere, resim optimizasyonu hizla karmasiklasir (veya bakis açiniza göre eglenceli bir hal alir) ve akademik ve ticari arastirmalarin aktif bir alanidir. Resimler çok fazla bayt kullanir ve daha iyi resim sikistirma teknikleri gelistirme çok deger saglar! Daha fazla bilgi edinmeye merakliysaniz Wikipedia sayfasina gidin veya uygulamali bir örnek için WebP sikistirma teknikleri tanitim yazisina göz atin.

Bir kez daha, bunlarin hesap harika, ama ayni zamanda çok akademik: Bu, sayfalarimizdaki resimleri optimize etmemize nasil yardimci olur? Kesinlikle yeni sikistirma teknikleri bulacak bir konumda degiliz, ancak sorunun seklini anlamamiz önem tasiyor: RGBA pikselleri, bit derinligi ve çesitli optimizasyon teknikleri. Tüm bu kavramlari, çesitli tarama resim biçimleriyle ilgili tartismalara dalmadan önce anlamamiz ve aklimizda bulundurmamiz çok önemlidir.

Kayipsiz ve kayipli resim sikistirma

TL;DR

  • Gözlerimizin çalisma seklinde dolayi, resimler kayipli sikistirma için mükemmel adaylardir
  • Resim optimizasyonu, bir kayipli ve kayipsiz sikistirma islevidir
  • Resim biçimlerindeki farklar, resmi optimize etmek için kullanilan kayipli ve kayipsiz algoritmalardan ve bu algoritmalarin kullanimlarindaki farkliliklardan kaynaklanir
  • Tüm resimler için geçerli tek bir en iyi biçim veya ''kalite ayari'' yoktur: Belirli sikistirici ve resim içeriklerinin her bir kombinasyonu benzersiz bir çikis olusturur

Bir sayfanin kaynak kodu veya bir yürütülebilir dosya gibi belirli veri türleri için bir sikistiricinin orijinal bilgileri degistirmemesi veya kaybetmemesi kritik öneme sahiptir: Tek bir eksik veya yanlis veri biti, dosya içeriginin anlamini tamamiyla degistirebilir veya daha kötüsü, tümüyle bozabilir. Resimler, ses ve video gibi diger bazi veri türleri için orijinal verilerin bir 'yaklasik' yansimasinin saglanmasi mükemmel bir sekilde kabul edilebilir.

Aslinda, gözün çalisma seklinden dolayi, bir resmin dosya boyutunu küçültmek için her bir pikselle ilgili bazi bilgilerin atilmasi sik sik yanimiza kâr kalir. Örnegin, gözlerimizin farkli renklere karsi hassasiyeti farklidir ve bu, bazi renkleri kodlamak için daha az sayida bit kullanabilecegimiz anlamina gelir. Sonuç olarak, tipik bir resim optimizasyonu ardisik düzeni iki üst düzey adimdan olusur:

  1. Resim, bazi piksel verilerini çikaran 'kayipli' bir filtreyle islenir
  2. Resim, piksel verilerini sikistiran 'kayipsiz' bir filtreyle islenir

Ilk adim istege baglidir ve kesin algoritma ilgili resim biçimine bagli olur, ancak herhangi bir resmin, boyutunun küçültülmesi için kayipli bir sikistirma adimindan geçirilebileceginin anlasilmasi önemlidir. Aslinda GIF, PNG, JPEG ve digerleri gibi çesitli resim biçimleri arasindaki fark, kayipli ve kayipsiz adimlar uygulanirken kullandiklari belirli algoritmalarin birlestirilmesindedir (veya atilmasindadir).

Dolayisiyla, kayipli ve kayipsiz optimizasyonun 'en iyi' yapilandirmasi nedir? Yanit, resim içerigine ve kayipli sikistirmanin getirdigi dosya boyutu ile yapay nesneler arasindaki degis tokus gibi ölçütlerinize baglidir: Bazi durumlarda, karisik ayrintilari tam dogrulukta iletmek için kayipli optimizasyonu atlamak isteyebilirsiniz; diger durumlardaysa resim varliginin dosya boyutunu azaltmak için agresif bir kayipli optimizasyon uygulayabilirsiniz. Burada sizin karariniz ve baglaminiz devreye girmelidir. Tek bir evrensel ayar yoktur.

Web için kaydetme

Uygulamali örnek olarak, JPEG gibi kayipli bir biçimi kullanirken sikistirici genellikle özellestirilebilir kalite ayarini açar (ör. Adobe Photoshop'taki 'Web için Kaydet' islevinin sagladigi kalite kaydirma çubugu). Bu genellikle kayipli ve kayipsiz algoritmalarin belirli bir koleksiyonunun iç çalismalarini kontrol eden 1 ile 100 arasinda bir sayi olur. En iyi sonuçlar için resimlerinizi çesitli kalite ayarlariyla deneyin ve kaliteyi düsürmekten korkmayin. Görsel sonuçlar genellikle çok iyi olur ve dosya boyutu tasarruflari oldukça büyük olabilir.

Dogru resim biçimini seçme

TL;DR

  • Dogru evrensel biçimi seçerek baslayin: GIF, PNG, JPEG
  • Her bir biçim için en iyi ayarlari deneyip seçin: Kalite, palet boyutu vb.
  • Modern istemciler için WebP ve JPEG XR varliklari eklemeyi düsünebilirsiniz ölçeklenmis-resimler

Farkli kayipli ve kayipsiz sikistirma algoritmalarina ek olarak, farkli resim biçimleri animasyon ve seffaflik (alfa) kanallari gibi farkli özellikleri destekler. Sonuç olarak, belirli bir resme iliskin dogru biçim seçimi, istediginiz görsel sonuçlar ile islevsel gereksinimlerin bir birlesimidir.

Biçim Seffaflik Animasyon Tarayici
GIF Evet Evet Tümü
PNG Evet Hayir Tümü
JPEG Hayir Hayir Tümü
JPEG XR Evet Evet IE
WebP Evet Evet Chrome, Opera, Android

Evrensel olarak desteklenen üç resim biçimi vardir: GIF, PNG ve JPEG. Bu biçimlere ek olarak, bazi tarayicilar WebP ve JPEG XR gibi yeni biçimleri de destekler. Bu biçimler, daha iyi bir genel sikistirma ve daha fazla özellik sunar. Hangi biçimi kullanmaliyim?

Web için kaydetme

  1. Animasyona ihtiyaciniz var mi? Varsa GIF tek evrensel seçenektir.
  2. GIF, renk paletini en fazla 256 renkle sinirlandirarak çogu resim için kötü bir seçenek haline gelir. Bununla birlikte, PNG-8 küçük bir paletle resimler için daha iyi sikistirma saglar. Sonuç olarak, GIF yalnizca animasyon gerektiginde dogru yanittir.
  3. Ince ayrintiyi en yüksek çözünürlükle korumaniz gerekiyor mu? PNG'yi kullanin.
  4. PNG, renk paleti boyutu seçimi disinda herhangi bir kayipli sikistirma algoritmasi uygulamaz. Sonuç olarak, en yüksek kaliteli resmi olusturur, ancak bu, diger biçimlerden önemli ölçüde daha büyük bir dosya boyutuna mal olur. Akillica kullanin.
  5. Resim varligi geometrik sekillerden olusan resimler içeriyorsa resmi bir vektör (SVG) biçimine dönüstürmeyi düsünebilirsiniz!
  6. Resim varligi metin içeriyorsa durun ve yeniden düsünün. Resimlerin içindeki metin seçilebilir, aranabilir veya zum yapilabilir olmaz. Bir özel görünümü (marka bilinci olusturma veya baska nedenlerle) aktarmaniz gerekiyorsa bunun yerine bir web yazi tipi kullanin.
  7. Bir fotografi, ekran görüntüsünü veya benzer bir resim varligini mi optimize ediyorsunuz? JPEG kullanin.
  8. JPEG, resim varliginin dosya boyutunu azaltmak için kayipli ve kayipsiz optimizasyonun bir birlesimini kullanir. Varliginiz için en iyi kalite ile dosya boyutu degis tokusunu bulmak için çesitli JPEG kalite düzeylerini deneyin.

Son olarak, en uygun resim biçimini ve varliklarinizin her biri için ayarlarini belirledikten sonra, WebP ve JPEG XR olarak kodlanmis bir ek varyantini eklemeyi düsünebilirsiniz. Bu biçimlerin her ikisi de yeni ve ne yazik ki (henüz) tüm tarayicilar tarafindan evrensel bir sekilde desteklenmiyorlar, ancak yine de yeni istemciler için önemli tasarruflar saglayabilirler. Örnegin, WebP benzer bir JPEG resmine göre ortalama olarak %30 dosya boyutu küçülmesi saglar.

WebP ve JPEG XR evrensel olarak desteklenmediginden, uygun kaynagi sunmak için uygulamaniza veya sunuculariniza ek mantik eklemeniz gerekir:

  • Bazi CDN'ler, JPEG XR ve WebP teslimini de içeren resim optimizasyonunu hizmet olarak saglar.
  • Bazi açik kaynak araçlari (ör. Apache için PageSpeed veya Nginx) uygun varliklarin optimizasyonunu, dönüstürülmesini ve sunumunu otomatiklestirir.
  • Istemciyi algilamak, hangi biçimleri desteklediklerini kontrol etmek ve kullanilabilir en iyi resim biçimini sunmak için ek uygulama mantigi ekleyebilirsiniz.

Son olarak, yerel uygulamanizda içerik olusturmak için bir Webview kullaniyorsaniz, istemci üzerinde tam denetime sahip olacaginizi ve özel olarak WebP'yi kullanabileceginizi unutmayin! Facebook, Google+ ve diger birçok site, tüm resimlerini uygulamalari içinde saglamak için WebP'yi kullanir. Bunun sagladigi tasarruf kesinlikle buna deger. WebP hakkinda daha fazla bilgi edinmek için Google I/O 2013'teki WebP: Deploying Faster, Smaller, and More Beautiful Images baslikli sunuma göz atin.

Araçlar ve parametre ayari

Tek bir mükemmel resim biçimi, araç veya tüm resimler için geçerli bir optimizasyon parametreleri kümesi yoktur. En iyi sonuçlar için biçimi ve ayarlarini resmin içerigi ile görsel ve diger teknik gereksinimlerine göre sizin seçmeniz gerekir.

Araç Açiklama
gifsicle GIF resimlerini olusturur ve optimize eder
jpegtran JPEG resimlerini optimize eder
optipng kayipsiz PNG optimizasyonu
pngquant kayipli PNG optimizasyonu

Her bir sikistiricinin parametreleriyle deneyler yapmaktan korkmayin. Kaliteyi düsürün, nasil göründügüne bakin, sonra durulayin, köpürtün ve tekrar edin. Iyi bir ayar kümesi bulduktan sonra, bunlari sitenizdeki diger benzer resimlere uygulayabilirsiniz, ancak tüm resimlerin ayni ayarlarla sikistirilmasi gerektigini düsünmeyin.

Ölçeklenmis resim varliklari saglama

TL;DR

  • Ölçeklenmis varliklar saglama, en basit ve en etkili optimizasyonlardan biridir
  • Büyük varliklar yüksek ek yüke neden oldugundan bunlarla ilgili dikkatli olun
  • Resimlerinizi ekran boyutuna ölçekleyerek gereksiz piksel sayisini azaltin

Resim optimizasyonu iki ölçüte indirgenebilir: her bir resim pikselini kodlamak için kullanilan bayt sayisini optimize etme ve toplam piksel sayisini optimize etme: Resmin dosya boyutu basit bir sekilde toplam piksel sayisinin, her bir pikseli kodlamak için kullanilan bayt sayisiyla çarpimidir. Ne bundan fazla, ne de eksik.

Sonuç olarak, en basit ve en etkili resim optimizasyon tekniklerinden biri, varligi tarayicida istenen boyutunda görüntülemek için gerekenden daha fazla piksel göndermedigimizden emin olmaktir. Basit görünüyor, degil mi? Maalesef çogu sayfada resim varliklarinin birçogu bu testte basarisiz olur: Genellikle, daha büyük varliklar gönderip bunlari yeniden ölçeklemesi ve daha düsük bir çözünürlükte görüntülemesi için tarayiciya güvenirler. Bu da fazladan CPU kaynagi tüketir.

Yeniden boyutlandirilmis resim

Yalnizca resmi bizim adimiza tarayicinin yeniden ölçeklemesini saglamak adina gereksiz piksellerin gönderilmesinin getirdigi ek yük, sayfayi olusturmak için gereken toplam bayt sayisini azaltmak ve optimize etmek için büyük bir firsatin kaçmasidir. Bununla birlikte, yeniden boyutlandirma islevinin yalnizca resmin küçültüldügü piksel sayisiyla ilgili olmadigini, ayni zamanda dogal boyutunun küçültülmesiyle de ilgili oldugunu unutmayin.

Dogal boyut Ekran boyutu Gereksiz piksel sayisi
110 x 110 100 x 100 110 x 110 - 100 x 100 = 2100
410 x 410 400 x 400 410 x 410 - 400 x 400 = 8100
810 x 810 800 x 800 810 x 810 - 800 x 800 = 16100

Yukaridaki üç örnekte de ekran boyutunun resmin dogal boyutundan yalnizca 10 piksel daha küçük oldugunu unutmayin. Bununla birlikte, kodlamamiz ve göndermemiz gereken fazladan piksel sayisi, dogal boyuttan önemli ölçüde daha yüksektir! Sonuç olarak, her bir varligin tam olarak ekran boyutunda saglanmasini garanti edemezsiniz, ancak gereksiz piksel sayisinin en alt düzeyde tutuldugundan ve özellikle büyük varliklarinizin ekran boyutlarina mümkün oldugunca yakin bir sekilde saglandigindan emin olmaniz gerekir.

Resim optimizasyonu kontrol listesi

Resim optimizasyonu hem bir sanat hem de bilimdir: Tek bir resmin en iyi nasil sikistirilacagina dair tek bir tanimlayici yanit olmadigindan bir sanattir; bununla birlikte bir resmin boyutunu önemli ölçüde küçültmeye yardimci olabilecek iyi gelistirilmis birçok teknik ve algoritma olmasindan dolayi bir bilimdir.

Resimlerinizi optimize etme üzerinde çalisirken aklinizda bulundurmaniz gereken bazi ipuçlari ve teknikler:

  • Vektör biçimlerini tercih edin: Vektör resimler çözünürlükten ve ölçekten bagimsizdir. Bu özellikleri, vektör biçimlerini çoklu cihaz ve yüksek çözünürlük dünyasi ile mükemmel bir sekilde uyumlu hale getirir.
  • SVG varliklarini küçültün ve sikistirin: Çogu çizim uygulamasi tarafindan olusturulan XML biçimlendirmesi, genellikle kaldirilabilecek gereksiz meta veriler içerir; sunucularinizin SVG varliklari için GZIP sikistirmasi uygulayacak sekilde yapilandirildigindan emin olun.
  • En iyi tarama resim biçimini seçin: Islevsel gereksinimlerinizi belirleyin ve ilgili her bir varliga uygun olan biçimi seçin.
  • Tarama biçimleri için en uygun kalite ayarlariyla deneyler yapin: 'Kalite' ayarlarini düsürmekten korkmayin, sonuçlar genellikle çok iyi olur ve önemli ölçüde bayt tasarrufu saglanir.
  • Gereksiz resim meta verilerini kaldirin: Birçok tarama resmi varlikla ilgili gereksiz meta veriler içerir: Cografya bilgileri, kamera bilgileri vb. Bu verileri çikarmak için uygun araçlari kullanin.
  • Ölçeklenmis resimler sunun: Resimleri sunucuda yeniden boyutlandirin ve 'ekran' boyutunun, resmin dogal boyutuna mümkün oldugunca yakin oldugundan emin olun. Büyük resimler yeniden boyutlandirildiklarinda en büyük ek yükten sorumlu oldugu için özellikle büyük resimlere dikkat edin!
  • Otomatiklestirin, otomatiklestirin, otomatiklestirin: Tüm resim varliklarinizin her zaman optimize edilmis olmasini saglayacak otomatik araçlara ve altyapiya yatirim yapin.