Küçük resim özelliğiyle resimleri optimize etme

Thumbor, resimleri isteğe bağlı olarak ücretsiz olarak yeniden boyutlandırmak, sıkıştırmak ve dönüştürmek için kullanılabilir.

Katie Hempenius
Katie Hempenius
X

Thumbor, resimleri sıkıştırmayı, yeniden boyutlandırmayı ve dönüştürmeyi kolaylaştıran ücretsiz ve açık kaynaklı bir resim CDN'sidir. Bu gönderi sayesinde, herhangi bir yazılım yüklemenize gerek kalmadan Thumbor'ı ilk elden deneyebilirsiniz. http://34.67.235.246:8888 adresinde denemeniz için bir korumalı alan Küçük Resim sunucusu oluşturduk. Deneme yapacağınız resmi şu adreste bulabilirsiniz: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg.

Ön koşullar

Bu gönderide, resim CDN'lerinin yük performansınızı nasıl iyileştirebileceğini anladığınız varsayılmaktadır. Aksi takdirde Resimleri optimize etmek için resim CDN'lerini kullanma başlıklı makaleyi inceleyin. Ayrıca, daha önce temel web siteleri oluşturduğunuz varsayılır.

Küçük Resim URL Biçimi

Resimleri Optimize Etmek için Resim CDN'lerini Kullanma bölümünde açıklandığı gibi, her resim CDN'si, resimler için biraz farklı bir URL biçimi kullanır. Şekil 1, Küçük resmin biçimini gösterir.

Küçük resim URL'si şu bileşenlere sahiptir: kaynak, güvenlik anahtarı, boyut, filtreler ve resim.
Küçük resmin URL biçimi

Köken

Tüm kaynaklar gibi bir Küçük Resim URL'sinin kaynağı da üç bölümden oluşur: bir şema (neredeyse her zaman http veya https olur), bir ana makine ve bir bağlantı noktası. Bu örnekte, ana makine bir IP adresi kullanılarak tanımlanmıştır, ancak DNS sunucusu kullanıyorsanız bu adres thumbor-server.my-site.com gibi görünebilir. Küçük Resmi, varsayılan olarak resimleri sunmak için 8888 bağlantı noktasını kullanır.

Güvenlik Anahtarı

URL'nin unsafe bölümü, Küçük Resim Aracı'nı güvenlik anahtarı olmadan kullandığınızı gösterir. Güvenlik anahtarı, kullanıcıların resim URL'lerinizde yetkisiz değişiklikler yapmasını engeller. Bir kullanıcı resim URL'sini değiştirdiğinizde, resimlerinin boyutunu değiştirmek veya daha kötü niyetli bir şekilde sunucunuzda aşırı yükleme yapmak için sunucunuzu (ve barındırma faturanızı) kullanabilir. Bu kılavuzda, Küçük resim için güvenlik anahtarı özelliğinin etkinleştirilmesi ele alınmamaktadır.

Boyut

URL'nin bu bölümü, çıktı resminin istenen boyutunu belirtir. Resmin boyutunu değiştirmek istemiyorsanız bu atlanabilir. Küçük resim, diğer URL parametrelerine bağlı olarak istenen boyuta ulaşmak için kırpma veya ölçeklendirme gibi farklı yaklaşımlar kullanır. Bu yayının sonraki bölümünde, resimlerin nasıl yeniden boyutlandırılacağı daha ayrıntılı olarak açıklanmaktadır.

Hemen deneyin:

  1. Resmi orijinal boyutunda yeni bir sekmede görüntülemek için şu URL'yi tıklayın: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg

    Resim orijinal boyutunda
    Orijinal resim

  2. Resmin boyutunu 100x100 piksel olarak değiştirin: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg

100x100 piksel boyutunda resim
Resim 100x100 piksel olacak şekilde yeniden boyutlandırıldı

Filtreler

Filtreler bir resmi dönüştürür. URL segmentindeki filtreler bölümü filters: ile başlar ve ardından iki nokta üst üste işaretiyle ayrılmış bir filtre listesi gelir. Herhangi bir filtre kullanmıyorsanız bu özellik atlanabilir. Bağımsız filtrelerin söz dizimi, sıfır veya daha fazla bağımsız değişken içeren bir işlev çağrısına (örneğin, grayscale()) benzer.

Hemen deneyin:

  1. Tek bir filtre uygulayın: 25 piksel yarıçapında bir Gauss bulanıklaştırma efekti: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg

    Bulanık resim
    Bulanık resim

  2. Birden çok filtre uygula. Gri tonlamaya dönüştürün ve resmi 90 derece döndürün: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

90 derece döndürülmüş gri tonlamalı resim
Gri tonlamalı, döndürülmüş resim

Görüntüleri Dönüştürme

Bu bölümde, performansla en alakalı Küçük Resim işlevlerine (sıkıştırma, yeniden boyutlandırma ve dosya biçimleri arasında dönüştürme) odaklanılır.

Sıkıştırma

Kalite filtresi, JPEG resimlerini istenen resim kalitesi düzeyinde (1-100) sıkıştırır. Herhangi bir kalite seviyesi sağlanmazsa Küçük Resim uygulaması, resmi 80 kalite seviyesine sıkıştırır. Bu, iyi bir varsayılan değerdir: 80-85 kalite seviyelerinin resim kalitesi üzerinde genellikle çok az fark edilir bir etkisi olur, ancak genellikle resim boyutunu %30-40 oranında azaltır.

Hemen deneyin:

  1. Resmi 1 kalitesinde sıkıştırın (çok kötü): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg

    Düşük kaliteli resim
    Düşük kaliteli resim

  2. Thumbor'ın varsayılan sıkıştırma ayarlarını kullanarak resmi sıkıştırın: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg

Belirgin kalite sorunu olmayan sıkıştırılmış resim
Sıkıştırılmış resim

Yeniden boyutlandırılıyor

Resmi orijinal oranlarını korurken yeniden boyutlandırmak için URL dizesinin size bölümünde $WIDTHx0 veya 0x$HEIGHT biçimini kullanın.

Hemen deneyin:

  1. Resmin genişliğini 200 piksel olacak şekilde orijinal oranları koruyarak yeniden boyutlandırın: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg

    200 piksel genişliğinde resim
    Resim 200 piksel genişliğinde olacak şekilde yeniden boyutlandırıldı

  2. Resmi orijinal oranı koruyarak 500 piksel yüksekliğe uyacak şekilde yeniden boyutlandırın: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

500 piksel yüksekliğinde resim
Resim 500 piksel yüksekliğe yeniden boyutlandırıldı

Ayrıca orantılı filtresini kullanarak resimleri orijinalin belirli bir yüzdesine göre yeniden boyutlandırabilirsiniz. Boyut, oran filtresiyle birlikte belirtilirse resim yeniden boyutlandırılır ve ardından orantı filtresi uygulanır.

Hemen deneyin:

  1. Resmi orijinal boyutunun% 50'si olacak şekilde yeniden boyutlandırın: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg

    Orijinal resmin boyutunun% 50'si kadar olan bir resim
    Resim, orijinal boyutunun% 50'si oranında yeniden boyutlandırıldı

  2. Resmin genişliğini 1000 piksel olacak şekilde yeniden boyutlandırın, ardından mevcut boyutunun% 10'u oranında olacak şekilde yeniden boyutlandırın: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg

100 piksel genişliğinde resim
Resim 100 piksel genişliğinde olacak şekilde yeniden boyutlandırıldı

Bu yöntemler, Thumbor'ın sunduğu birçok kırpma ve yeniden boyutlandırma seçeneklerinden yalnızca birkaçıdır. Diğer seçenekler hakkında bilgi edinmek için Kullanım bölümüne göz atın.

Dosya Biçimleri

Biçim filtresi, resimleri jpeg, webp, gif veya png biçimine dönüştürür. Performansı optimize ediyorsanız, PNG ve GIF dosyaları genellikle daha büyük boyutta olduğundan ve sıkıştırılmadığından JPEG veya WebP biçiminden birini kullanmanız gerektiğini unutmayın.

Hemen deneyin:

  1. Resmi WebP'ye dönüştürün. Geliştirici Araçları'nın Ağ panelini açarsanız dokümanın İçerik Türü yanıt başlığı, sunucunun bir WebP görüntüsü döndürdüğünü gösterir: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg
Bir resmin içerik türünü (WebP) gösteren DevTools ekran görüntüsü
Geliştirici Araçları'nda gösterilen content-type yanıt başlığı

Sonraki adımlar

hero.jpg görüntüsündeki diğer filtreleri ve dönüşümleri deneyin.

Kendi Thumbor yüklemenizi kullanarak takip ediyorsanız thumbor.conf dosyasının nasıl ve neden kullanılacağının açıklandığı aşağıdaki eke göz atın.

Ek: thumbor.conf

Bu yayında ele alınan yapılandırma seçeneklerinin birçoğu ve diğer pek çok yapılandırma, bir thumbor.conf yapılandırma dosyası yapılandırılıp kullanılarak varsayılan olarak ayarlanabilir. thumbor.conf dosyasındaki ayarlar, URL dizesi parametreleri tarafından geçersiz kılınmadığı sürece tüm resimlere uygulanır.

  1. Yeni bir thumbor.conf dosyası oluşturmak için thumbor-config komutunu çalıştırın.

    thumbor-config > ./thumbor.conf

  2. Yeni thumbor.conf dosyanızı açın. thumbor-config komutu, tüm Thumbor yapılandırma seçeneklerini listeleyip açıklayan bir dosya oluşturdu.

  3. Satırlardaki yorumları iptal edip varsayılan değerleri değiştirerek ayarları yapılandırın. Aşağıdaki ayarları yapmak faydalı olabilir:

    • QUALITY
    • AUTO_WEBP
    • MAX_WIDTH ve MAX_HEIGHT
    • ALLOW_ANIMATED_GIFS

  4. thumbor.conf ayarlarınızı kullanmak için Thumbor'ı --conf işaretiyle çalıştırın.

    thumbor --conf /path/to/thumbor.conf