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.
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.
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:
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
Resmi 100x100 piksel olacak şekilde yeniden boyutlandırın: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg
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:
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
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
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:
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
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
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:
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
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
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:
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
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
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:
- 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
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.
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 listeleyen ve açıklayan bir dosya oluşturdu.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
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