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.
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.](https://web.dev/static/articles/use-thumbor/image/a-thumbor-url-has-follow-485047f95e001.jpg?authuser=5&hl=tr)
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:
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
Orijinal resim 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](https://web.dev/static/articles/use-thumbor/image/image-100x100-pixels-3848e03e36905.jpg?authuser=5&hl=tr)
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:
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 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](https://web.dev/static/articles/use-thumbor/image/grayscale-image-has-been-787f2eb50dfd7.jpg?authuser=5&hl=tr)
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:
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 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](https://web.dev/static/articles/use-thumbor/image/compressed-image-no-noti-ba38af80f42a4.jpg?authuser=5&hl=tr)
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:
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
Resim 200 piksel genişliğinde olacak şekilde yeniden boyutlandırıldı 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](https://web.dev/static/articles/use-thumbor/image/image-is-500-pixels-tall-992a9e041c75d.jpg?authuser=5&hl=tr)
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:
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
Resim, orijinal boyutunun% 50'si oranında yeniden boyutlandırıldı 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](https://web.dev/static/articles/use-thumbor/image/image-is-100-pixels-wide-07aa661c4581b.jpg?authuser=5&hl=tr)
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:
- 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ü](https://web.dev/static/articles/use-thumbor/image/devtools-screenshot-showi-0e757c2215957.jpg?authuser=5&hl=tr)
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.
Yeni bir
thumbor.conf
dosyası oluşturmak içinthumbor-config
komutunu çalıştırın.thumbor-config > ./thumbor.conf
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.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
veMAX_HEIGHT
ALLOW_ANIMATED_GIFS
thumbor.conf
ayarlarınızı kullanmak için Thumbor'ı--conf
işaretiyle çalıştırın.thumbor --conf /path/to/thumbor.conf