Görüntü Boyutlandırıcı

Image Resizer Image Resizer modülü, görsellerin siteye yüklendikten sonra kolayca yeniden boyutlandırılması için tasarlanmıştır. Özellikle aynı görselin sitenin farklı bölümlerinde kullanıldığı, ancak farklı boyutlarda görüntülenmesi gerektiği durumlarda çok faydalıdır.

Örneğin, site tasarımına göre aynı görsel birkaç blokta gösterilebilir: duyuruda, materyal listesinde ve makalenin tam sürümünde. Görseli yalnızca HTML veya CSS ile küçültürseniz, görüntü aslında büyük boyutta kalır (örneğin, 500×400 px) ve daha küçük bir alanı (300×250 px) kaplar. Bu durum SEO'yu olumsuz etkiler; çünkü sayfa ağırlığını artırır ve yüklenme hızını düşürür — arama motorlarının sıralamada dikkate aldığı parametrelerdir.

Modülün temel özellikleri

Image Resizer yalnızca SEO açısından faydalı olmakla kalmaz, aynı zamanda geliştiricilerin ve site yöneticilerinin işini de önemli ölçüde kolaylaştırır. Haber ve içerik projelerinde çoğu zaman tek bir görselin farklı oranlarda ve boyutlarda gösterilmesi gerekir. CSS ile standart ölçeklendirmede en-boy oranı bozulabilir ve bu da görünümü kötüleştirir.

Crop (kırpma) özelliği sayesinde modül, görselin gerekli alanını otomatik olarak keser ve oranları bozmadan belirlenen boyutlara getirir. Görselin hangi kısmının kullanılacağını belirtebilirsiniz — merkez, üst, alt veya köşeler.

Harici görsellerle çalışma

Ek bir özellik olarak modül, harici görsellerle çalışmayı destekler. Bir içerikte üçüncü taraf bir servise yüklenmiş bir görsel (doğrudan bağlantı üzerinden) kullanılıyorsa, Image Resizer bunu otomatik olarak sunucunuza indirebilir ve ardından şunları yapabilir:

• boyutlandırma;

• kalite ayarı;

• görsel kırpma.

Dosya adlarının SEO optimizasyonu

DLE'nin sorunlarından biri, görsel adına Unix timestamp eklenmesidir. Bu tür uzun ve okunması zor dosya adları SEO açısından fayda sağlamaz. Image Resizer bu sorunu çözer ve alt etiketi değerini dosya adı olarak kullanmanıza olanak tanır.

Böylece görseller, gereksiz önekler olmadan otomatik olarak anlamlı, SEO dostu adlar alabilir.

Performans ve önbellekleme

Görüntü boyutlarının değiştirilmesi sayfa her açıldığında yapılmaz. İşlem yalnızca görüntü ilk kez gösterildiğinde gerçekleşir, ardından sonuç önbellekte saklanır. Bu şu anlama gelir:

• sunucu yükü minimumdur;

• sayfa yükleme hızı düşmez;

• yeniden işleme gerek yoktur.

Görseller için kısa URL'ler

URL yeniden adlandırıldıktan sonra bile görsel URL'si çok uzun kalıyorsa, yolu
/uploads/cache/
yerine sanal bir dizinle, örneğin /resimler/ ile değiştirebilirsiniz.

⚠️ Önemli: belirtilen sanal yol gerçek kullanılan sistem dizinleri veya kategori adlarıyla çakışmamalıdır.

width ve height otomatik ekleme

Görüntü yeniden boyutlandırıldıktan sonra modül, HTML koduna otomatik olarak width ve height özniteliklerini ekleyebilir. Bu, tarayıcı görüntü boyutlarını önceden bildiği için SEO ve yerleşim kararlılığı açısından olumlu etki sağlar.

Kullanım örneği

TPL kodu:

Modülsüz HTML
Görüntü boyutu: yönetim panelindeki standart medium

HTML modülle
Boyut: 140×100 px, kalite: 90%

HTML modülle (otomatik adlandırma olmadan):

Görsellerin dış bağlantıdan yüklenmesi

d:1 parametresini kullanarak görselleri otomatik olarak üçüncü taraf sitelerden indirebilirsiniz:

Sonuç:

Görüntü boyutu 94 KB'den 12 KB'ye düşürüldü, bu da sayfanın toplam ağırlığını önemli ölçüde azaltır.

Kullanım esnekliği

Modül herhangi bir .tpl dosyasında kullanılabilir. Şunlarla uyumludur:

• image etiketleri;

• ek alanlar;

• standart DLE şablonları.

Gerekirse modül herhangi bir anda etkinleştirilebilir ve devre dışı bırakılabilir.

Yükleme hızını optimize etme

Site yükleme hızından memnun değilseniz ve farklı boyutlarda görseller kullanıyorsanız, Image Resizer farkı Google PageSpeed'de net bir şekilde görmenizi sağlar.

Daha da fazla optimizasyon için şunları yapabilirsiniz:

• görselleri /uploads/cache/ içinden indirmek;

• bunları yardımcı araçlarla (örneğin, optipng) ek olarak sıkıştırmak;

• sunucuya yeniden yüklemek.

Parametre yazım biçimleri

Kırpma (Crop)

Kırpmadan önce görüntü otomatik olarak izin verilen en küçük boyuta küçültülür, ardından kırpma işlemi yapılır.

Parametrelerin açıklaması

• w — genişlik

• h — yükseklik

• q — kalite (0–100)

• f — HTML'ye width ve height ekleme

• d — harici görüntünün sunucuya yüklenmesi

• e — ölçeklendirme yönü:

  • 1 veya w — genişliğe göre

  • 2 veya h — yüksekliğe göre

  • 0 veya boş — uzun kenara göre

Ek özellikler

Yönetim panelinde, sunucu tarafından desteklenen bir hash yöntemi seçilebilir. Bu, dosya adı için benzersiz bir sonek oluşturmakta kullanılır, örneğin:

Bu, modülün bir forkudur; DLE 19.0'ın güncel sürümlerinde çalışması için kod düzeltildi (Orijinal burada: https://github.com/dlenettr/image-resizer).

Bu dosyayı sitenize kopyalarsanız, geliştirme için bizim sitemize yazarlar olarak bağlantı verin!