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

Küçük resim, resimleri isteğe bağlı olarak yeniden boyutlandırmak, sıkıştırmak ve dönüştürmek için ücretsiz olarak 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, açık kaynak bir görüntü CDN'dir. Bu yayın, herhangi bir şey yüklemenize gerek kalmadan Thumbor'ı ilk elden denemenize olanak tanır. http://34.67.235.246:8888 adresinde denemeniz için bir korumalı alan Thumbor 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ükleme performansınızı nasıl iyileştirebileceğini anladığınız varsayılmaktadır. Aksi takdirde, Resimleri optimize etmek için resim CDN'leri kullanma bölümüne göz atın. Ayrıca, daha önce temel web siteleri oluşturduğunuz da varsayılır.

Küçük Resim URL Biçimi

Resimleri Optimize Etmek İçin Resim CDN'leri Kullanma bölümünde belirtildiği gibi, her resim CDN'si resimler için biraz farklı bir URL biçimi kullanır. Şekil 1, Thumbor'un biçimini temsil etmektedir.

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

Köken

Tüm kaynaklar gibi, bir Thumbor 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ı. Bu örnekte, ana makine 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. Thumbor, görüntüleri sunmak için varsayılan olarak 8888 bağlantı noktasını kullanır.

Güvenlik Anahtarı

URL'nin unsafe bölümü, Thumbor'ı güvenlik anahtarı olmadan kullandığınızı belirtir. Güvenlik anahtarı, kullanıcıların resim URL'lerinizde yetkisiz değişiklik yapmasını engeller. Resim URL'sini değiştirdiğinizde, bir kullanıcı sunucunuzu (ve barındırma faturanızı) kullanarak resimlerini yeniden boyutlandırabilir veya daha kötü amaçla sunucunuza aşırı yüklenebilir. Bu kılavuz, Thumbor'un güvenlik anahtarı özelliğinin ayarlanmasını kapsamaz.

Boyut

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

Hemen deneyin:

  1. Resmi yeni sekmede orijinal boyutunda 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. Resmi 100x100 piksel olacak şekilde yeniden boyutlandırın: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg

ziyaret edin.
100x100 piksel resim
Resim 100x100 piksel olarak yeniden boyutlandırıldı

Filtreler

Filtreler, resimleri dönüştürür. URL segmentinin filtre bölümü filters: ile başlar ve ardından iki nokta işaretiyle ayrılmış bir filtre listesi gelir. Bu, hiçbir filtre kullanmıyorsanız atlanabilir. Tek tek 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ıçaplı bir Gauss bulanıklığı 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 uygulayın. Gri tonlamaya dönüştürün ve resmi 90 derece rotate: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

ziyaret edin.
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ı Thumbor işlevlerine (sıkıştırma, yeniden boyutlandırma ve dosya biçimleri arasında dönüştürme) odaklanılmaktadır.

Sıkıştırma

Kalite filtresi, JPEG resimlerini istenen resim kalitesi düzeyine (1-100) sıkıştırır. Kalite seviyesi sağlanmazsa Thumbor, resmi 80 kalite seviyesine sıkıştırır. Bu iyi bir varsayılan değerdir: 80-85 arasındaki kalite seviyelerinin genellikle resim kalitesi üzerinde belirgin bir etkisi yoktur ancak resim boyutunu genellikle %30-40 oranında azaltırlar.

Hemen deneyin:

  1. Resmi 1 kalitesinde (çok kötü) sıkıştırın: 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'un 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

ziyaret edin.
Belirgin bir kalite sorunu olmayan sıkıştırılmış resim
Sıkıştırılmış resim

Yeniden boyutlandırılıyor

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

Hemen deneyin:

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

    200 piksel genişliğinde bir resim
    Resim, 200 piksel genişliğinde yeniden boyutlandırıldı

  2. Orijinal oranı koruyarak resmi 500 piksel yüksekliğinde yeniden boyutlandırın: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

ziyaret edin.
500 piksel yüksekliğindeki resim
Resim, 500 piksel yüksekliğinde yeniden boyutlandırıldı

Ayrıca, oran filtresini kullanarak resimleri orijinalin belirli bir yüzdesi olacak şekilde yeniden boyutlandırabilirsiniz. Boyut, oran filtresiyle birlikte belirtilirse resim yeniden boyutlandırılır ve oran filtresi uygulanır.

Hemen deneyin:

  1. Resmi orijinalin% 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 resim
    Resim, orijinalinden% 50 daha büyük olacak şekilde yeniden boyutlandırıldı

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

ziyaret edin.
100 piksel genişliğinde bir resim
Resim, 100 piksel genişliğinde yeniden boyutlandırıldı

Bu yöntemler, Thumbor'ın kullandığı çok sayıda 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'a göz atın.

Dosya Biçimleri

Biçim filtresi, resimleri jpeg, webp, gif veya png biçimine dönüştürür. Performans için optimizasyon yapıyorsanız PNG ve GIF dosyaları genellikle çok daha büyük olduğundan ve sıkıştırılmadığından JPEG veya WebP'den birini kullanmanız gerektiğini unutmayın.

Hemen deneyin:

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

Sonraki Adımlar

hero.jpg resmindeki diğer filtreleri ve dönüşümleri deneyin.

Kendi Thumbor kurulumunuzu kullanarak devam ediyorsanız, thumbor.conf dosyasının nasıl ve neden kullanılacağını açıklayan aşağıdaki eke göz atın.

Ek: thumbor.conf

Bu gönderide ele alınan birçok yapılandırma seçeneği ve daha pek çok yapılandırma, bir thumbor.conf yapılandırma dosyası ayarlayıp kullanarak 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 listeleyen ve açıklayan bir dosya oluşturdu.

  3. Satırların yorumlarını kaldırarak ve varsayılan değerleri değiştirerek ayarları yapılandırın. Aşağıdaki ayarları yapmak yararlı 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