Web için bir resim nasıl yeniden boyutlandırılır

Bu gönderi, web için bir görüntünün nasıl yeniden boyutlandırılacağını açıklar. Görüntünün web sayfasına doğru şekilde sığması için öncelikle piksel cinsinden. Ardından, görüntüyü çok fazla düşürmeden dosya boyutunu küçültmek için kilobayt cinsinden.

Web için görüntüleri neden yeniden boyutlandırıyoruz?

Görüntülerin ekranda iyi görünmesini sağlamak ve web sitesi ziyaretçileri için hızlı bir şekilde indirmek istiyoruz.

Hızlı yüklenen görsellere sahip web siteleri, arama motorlarında daha üst sıralarda yer alacaktır.

Çünkü arama motorları, kullanıcıları iyi bir deneyim sağlayan web sitelerine göndermeyi tercih ediyor.

Hızlı yükleme görüntüsüne doğru iki adım vardır:

• İlk adım, resmi piksel olarak yeniden boyutlandırmaktır ve önce gelmelidir.
  Yani genişlik ve yükseklik. Web sitesindeki yeri için doğru boyutta olması gerekir.
  Duyarlı web sitelerinin tanıtılmasından bu yana görüntü boyutlandırmada birkaç tuhaflık var.
  Bir görüntünün cep telefonu, tablet, masaüstü ve TV için doğru boyutta olması gerekir, bu daha sonra tartışılacaktır.
• İkinci adım, sıkıştırma olarak bilinen görüntünün boyutunu kilobayt cinsinden azaltmaktır .
  Sıkıştırma, bir görüntüdeki renkleri küçültür veya birleştirir, böylece boyutu kilobayt olarak düşürür. Bunu çok fazla kalite kaybetmeden yapmak mümkündür.

Bu görevlerin her ikisini de gerçekleştirmek – yeniden boyutlandırma ve sıkıştırma – bir görüntüyü web için optimize etme olarak bilinir.

Size bir görüntüyü yeniden boyutlandırmak için en iyi uygulamaları ve bunun nasıl yapılacağını göstereceğim.

Duyarlı görüntülerle ilgili komplikasyonlar

Farklı ekran boyutlarında iyi görünecek şekilde yeniden boyutlandırılan duyarlı görüntülere bakarak başlayalım.

Önce mobil için tasarlıyoruz, bu yüzden bir web sitesinin mobil versiyonuna atıfta bulunarak başlayacağım.

Mobil web sitelerinde görüntü genellikle ekranın tüm genişliğini kapsar. Görüntüler metnin üzerine yığılır ve kullanıcılar uzun, mobil uyumlu web sayfalarını hızla aşağı kaydırmaya çok alışkındır.

Bir mobil cihaz için bir görüntü için çok iyi bir genişlik 640 pikseldir. Yükseklik istediğiniz herhangi bir şey olabilir.

Ancak görüntü boyutlandırma burada bitmiyor. Tek beden herkese olmaz.

Farklı cihazlarda görüntüler

Aynı görüntüyü ekstra büyük bir monitörde veya TV ekranında düşünelim - evet web sitelerine artık akıllı TV'niz üzerinden erişilebilir.

Resim, metnin solundaki bir sütunda yer alabilir.

Mobil sürümde olduğu gibi ekranın genişliğini kaplayabilir. Bunlara kahraman görüntüleri diyoruz.

Bu görüntünün şimdi ne kadar büyük olması gerektiğini hayal edin?

Bir TV için, piksel mükemmel bir görüntü 1920 piksel genişliğinde veya daha fazla olacaktır.

Görüntüyü bir mobil cihaz için zaten 640 piksel küçülttüyseniz, 1920 piksele yükseltmeye çalışırsanız korkunç görünecektir. %400'den fazla uzatmış olursunuz.

Görüntüleri büyütmek iyi görünmüyor – pikseller uzuyor ve görüntü bulanık görünüyor.

Görüntüleri 1920 pikselde tutmak da sorunu çözmez. Bunlar, özellikle yavaş internet bağlantılarında çok yavaş indirilir.

Komplikasyonlara eklemek için: bir resim, sayfada kullanım için tam piksel boyutunda olmalıdır. Arama motorları, boyutlar olarak bilinen genişlik ve yükseklik hakkında iyi bir fikre sahip olmayı sever.

Gördüğünüz gibi standart bir boyut yok ve her şey oldukça karmaşık hale geliyor. Yapabileceğimiz tek şey elimizden gelenin en iyisini yapmak.

Uyarlanabilir görüntüler için WordPress eklentileri

Uyarlanabilir görüntüler adı verilen, cihaza doğru görüntü boyutunu sunmaya yardımcı olan birkaç WordPress eklentisi vardır.

Temelde önce küçük bir görüntü indirilir - ister boyut ister çözünürlük olsun.

Ekran çözünürlüğü büyükse, eklenti daha büyük sürümü sağlar. Bu, ziyaretçinin bekleme süresini hızlandırır.

Büyük kahraman resimleri kullanmak istiyor ancak indirme süresi konusunda endişeleriniz varsa çözüm budur.

İşte beğendiğim iki uyarlanabilir görüntü eklentisi:

• Nevma'dan WordPress için Uyarlanabilir Görseller
  Görüntülerin daha küçük sürümlerini mobil cihazlara gönderir, bu nedenle, etkinleştirmeden sonra ayarlar kaydedildikten sonra işi yapan çok basit bir eklenti.
• ShortPixel ile Kısa Piksel Uyarlanabilir Görüntü
  Bu eklenti akıllıdır. Etkinleştirildiği anda farklı ekranlar için görüntüleri kırpmaya ve sıkıştırmaya başlayacaktır. Yine de gerekirse daha fazla kontrole sahip olabilirsiniz. ShortPixel belgeleri de kapsamlıdır. Hatta görüntü sıkıştırma testi ile bir görüntüyü sıkıştırmadan önce ve sonra karşılaştırabilirsiniz.
  

Bu yüzden, yapacağım şey bu uyarlanabilir eklentileri kullanmak, ancak bunlara tamamen güvenmeyin ve fotoğrafları doğrudan bir kameradan WordPress sitenize atmayın. Medya kitaplığınızı temiz tutun.

Önce görüntüyü yeniden boyutlandırın ve KB'yi aşağı çekmek için minimum düzeyde sıkıştırın. WordPress'e yüklediğinizde, uyarlanabilir görüntü eklentisi gerisini halleder.

Web için bir resmi yeniden boyutlandırmaya başlayalım.

Web için bir resmi yeniden boyutlandırma – piksel olarak

Tartıştığımız her şeyi göz önünde bulundurarak, görüntü genişliğinizi seçin.

• Bir fotoğrafçının mükemmel kalitede görüntülere ihtiyacı olacaktır. Bunları ekstra büyük bir monitörde tam ekran genişliğinde görüntülemek için oldukça büyük bir görüntüye ihtiyaçları olacak. Fotoğrafları en az 1920 piksele kadar boyutlandırın.
• Başka birine, 1200 piksele gitmenizi tavsiye ederim. Bu iyi bir denge. Ekstra büyük monitörlerdeki kişiler, tam genişlikteki görüntülerde bir pikselleşme görecektir, ancak bu, hızlı yüklenen bir görüntü için bir takastır.

Kendi web sitem ve blogum için maksimum 1200 piksel genişliğinde resimler kullanıyorum, sayfalarda bulunanların çoğu 800 pikseldir. İşte nedeni:

• Web sitemde tam genişlikte resimler asla kullanılmaz. Her şeyi gerçekten hızlı tutmayı seviyorum.
• İşletmem özellikle görsel değil, insanların fotoğraflarımı bu kadar yüksek çözünürlükte görmesine gerek yok.
• Open Graph için ayrı, tam boyutlu görüntüler kullanıyorum ve bu 1200'den büyük bir şey gerektirmiyor.
• Google Analytics'ten, sitemi ziyaret eden kişilerin bir el cihazı veya dizüstü bilgisayar kullandığını biliyorum. Kullanışlı bilgi.

sizin takdirinize bırakıyorum.

Ücretsiz resim düzenleme yazılımı

İndirebileceğiniz resim düzenleme programlarının yanı sıra çevrimiçi olarak kullanabileceğiniz birçok ücretsiz araç vardır.

Fotoğraflar için JPEG dosya formatına sadık kalın ve burada ele alacağımız şey bu.

Vektörler için PNG veya SVG'ye gidin - ve bu gelecekteki bir eğitim içindir.

GIMP görüntü düzenleme yazılımı

'GIMP' (GNU Görüntü İşleme Programı) tamamen ücretsiz bir görüntü düzenleyicidir.

GIMP'nin mevcut kararlı sürümünü web sitesinden indirin.

GIMP, bir görüntünün (ölçek) boyutunu (boyutlarını) değiştirme konusunda bir eğitim sağlar.

Çevrimiçi resim düzenleyiciler

Google'da 'çevrimiçi yeniden boyutlandırma resmi' için hızlı bir arama, Jpeg'inizi yüklemenize, yeniden boyutlandırmanıza, sıkıştırmanıza ve indirmenize olanak tanıyan bir dizi seçenek sunar.

Bulduğum ilk sonuç resizeimage.net oldu. Kullanımı çok basit - bir görüntüyü kırpar, yeniden boyutlandırır ve sıkıştırır.

Resmi kırpmak isterseniz, 2 numaralı seçeneği kullanın, ancak bunu atladım ve doğrudan piksel olarak yeniden boyutlandırabileceğim 4 numaralı seçeneğe gittim.

Genişlik alanına 1200, yüksekliği Nan alanına koyun ve En Boy Oranını Koru kutucuğunu işaretleyin.

Çıktı görüntü formatı JPG olacaktır.

Bir sıkıştırma seçeneği seçin.

Aşamalı sıkıştırma, ziyaretçi sayfaya gelir gelmez JPEG'in pikselli bir sürümünü gösterecektir. Bilginin geri kalanı, nihai görüntüyü oluşturmak için aşamalı olarak indirilecektir. Bu seçeneği oldukça beğendim çünkü ziyaretçi beklemeyi biliyor.

Ne kadar acımasız olmak istediğinize bağlı olarak görüntünün kalitesini yaklaşık %75 oranında azaltın.

KB cinsinden bir görüntüyü yeniden boyutlandırma – sıkıştırma

Sıkıştırma, yeniden boyutlandırmadan çok farklıdır. Uyarlanabilir bir resim eklentisi kullanıyor olsanız bile, tüm resimler yüklemeden önce sıkıştırılmalıdır.

Sıkıştırma, pikselleri azaltarak görüntünün dosya boyutunu küçültür, böylece daha hızlı indirilir.

Sıkıştırma aşamasında görüntünün kalitesinden çok fazla ödün vermemeye çalışın.

Görüntünün iyi görünmesi ve hızlı bir şekilde indirilmesi arasında bir denge kurmaya çalışın.

Görüntüler GIMP yazılımı kullanılarak da sıkıştırılabilir.

Bir Jpeg'in boyutunu (FileSize) değiştirmeye ilişkin GIMP öğreticisi.