Web resimlerinizi nasıl optimize edebilirsiniz?

Müşterilerinizin "Sayfa hızım neden bu kadar kötü?" diye sormayı bırakmasını diliyorum. Bu basit adımlar, büyük boyutlu olmayan yüksek kaliteli görüntüler oluşturmanızı sağlayacaktır.

Sorun

Böylece yeni sitenizi kurdunuz ve özel resim boyutlarınız dahil mümkün olan her şeyi optimize ettiniz ve ardından siteyi kullanıcıya teslim ettiniz. İki hafta sonra "Sayfa hızım neden bu kadar kötü?" veya "Sayfanın yüklenmesi neden bu kadar uzun sürüyor?" sorular. Gidin ve web sitesini kontrol edin ve görüntülerin çok büyük olduğunu öğrenin! Eminim her geliştirici daha önce bu pozisyonda olmuştur. DSLR'lerden, telefonlardan ve retina ekranlardan gelen yüksek çözünürlüklü görüntülerin mevcut ortamında bununla başa çıkmak zor bir şey, ancak umarız bu yazı, bu sorunlardan bazılarını önlemek için uygulayabileceğiniz birkaç basit şeyi kapsar. Sonuç olarak, tek bir büyük boy görsel bile sayfa hızı puanlarınızı ciddi şekilde düşürebilir.

Mükemmel dünya durumu

Web sitesi oluşturmaya başlamadan önce, tasarımdaki tüm resimlerin standart bir resim en boy oranına uyduğundan emin olmak için tasarımcınızla sohbet edin. Özel görüntü boyutlarınızı buna göre ayarlarsanız, görüntü kırpma bir sorun haline gelmemelidir. Bunlar standart kamera en boy oranları olduğundan 3:2, 4:3 veya 16:9'u kullanmayı deneyin. Bu mümkün değilse ve yeniden oluşturma için mevcut bir canlı siteden görüntüler kullanacaksanız, en boy oranlarının ne olduğunu kontrol edin ve bunları dahil etmek için buna göre tasarlayın, yoksa çok uzak olmayan bazı sorunlarla karşılaşacaksınız. gelecek.

Dosya yükleme boyutunu kısıtla

Bunu kontrol etmenizi sağlayan birçok eklenti var; o kadar çok ki, onları listelemeyeceğim, ancak basit bir arama size kaç tane olduğunu gösterecektir. Bu eklentiler birçok biçimde gelir, ancak mümkün olan en basit olanı seçerdim. Normalde, WordPress içindeki ayarlarınıza/medya seçeneklerinize, yönetici olarak oturum açtığınızda ayarlayabileceğiniz ve aşağıdaki resme benzer görünecek ek bir seçenek eklerler.

Daha fazla eklenti şişkinliği istemiyorsanız, bu aynı zamanda 'wp_handle_upload_prefilter' içine bağlanarak da yapılabilir. Bunun nasıl kullanılacağına dair iyi bir örnek, sayfanın alt kısmındaki bu blog gönderisinde görülebilir.

Gelişmiş Özel Alanlar kullanılarak çağrılan görüntüler için, tüm kullanıcı arabiriminde maksimum minimum görüntü boyutları/dosya boyutu ekleyebilir ve belirli dosya türleriyle sınırlayabilirsiniz. Bunu yapmanızı şiddetle tavsiye ederim.

Maksimum yükleme boyutunu zorlamanın yeterli olacağını düşünürdünüz, değil mi? Ne yazık ki değil, bu istemcinin yalnızca 100 piksel x 100 piksel boyutunda 500 kb'lik bir görüntü yüklemesini engellemeyecek ve dosyadan EXIF ​​(meta) verilerini de kaldırmayacaktır. Bu yüzden başka bir kontrol katmanı uygulamamız gerekecek.

Görüntüleri optimize edin

Bunu yapmanın en iyi yolu Photoshop web için kaydet seçeneğini kullanmaktır, ancak kullanıcının bu yazılıma sahip olacağını garanti edemezsiniz, bu nedenle artık iki seçeneğimiz var:

Eklentiler

Toplu optimizasyon için harika olduğu ve ayrıca maksimum dosya yükleme boyutu seçeneğine izin verdiği için Smush'ın daha iyi olanlardan biri olduğu bazı iyi eklentiler var. Ayarlarda EXIF ​​verilerini kaldırmak için ek bir onay kutusu vardır.

Çevrimiçi görüntü optimizasyonu

Yine çok sayıda var, ancak TinyPNG mevcut en basit seçeneklerden biri: dosyanızı yükleyin ve sıkıştırılmış sürümü indirin. TinyPNG, tüm EXIF ​​verilerini kaldırır.

Hala yeterli değil?

Görüntü sorunlarını umarız çözecek birkaç kontrol oluşturduk, ancak yine de ortaya çıkabilecek birkaç sorunu gördüğünüze eminim:

• Bazı küçük resimler için maksimum dosya boyutu hala çok büyük
• Gerçek piksel boyutu, gerçekte gerekenden daha büyük olabilir
• Kullanıcı iyi bir görüntü düzenleme yazılımına sahip olmadığı sürece, optimize edilmiş görüntüler üzerinde görsel kontrol veya karşılaştırma yoktur.
• Resim yanlış dosya tipi

Ne yazık ki bunun bir yolu yok ve herhangi bir sorunu yakalamak için mümkün olduğunca çok şey kurduk. Sorunu gerçekten çözmenin tek yolu, kullanıcıyı dosya türleri konusunda eğitmek ve bir tür resim düzenleme yazılımı kullanmalarını sağlamaktır.

Kullanıcılarınızı eğitin

Kullanıcı için olası çözümler

Bunlar hiçbir şekilde bir şeyler yapmanın mükemmel bir yolu değildir, ancak ilgili herkesin yardımcı olması ve görüntülerin dosya boyutlarını düşürmesi gerekir:

Dosya türlerinizi bilin

Bu gönderi için girilecek çok fazla şey var, ancak dosya türleri hakkında daha fazla okumak istiyorsanız, bu gönderi konuya derinlemesine bakmak için iyi bir kaynaktır. Yine de bu yazının amacı için, onu olabildiğince basit bir şekilde parçalayacağım:

• İnsanları, manzaraları vb. içeren bir fotoğraf = JPG
• Görüntülerin arka planında olmayan başka bir şeyi kaplayan bir kişinin veya ürünün kesilmesi = PNG
• Bir bilgi grafiği veya simge = GIF veya PNG

Web siteniz için bir resim dosyası olarak TIF, PSD veya AI gibi başka bir şey yüklemeyi düşünüyorsanız, şimdi DURDURUN.

Olağan durum senaryosu

Yazılım

• Microsoft Paint kullanan Windows işletim sistemi

Görüntü

• Görüntünün kullanıldığı en büyük görüntü alanı boyutunu görebilmek için tarayıcıyı büyütün. Görüntünün gerçek piksel boyutunu hesaplamak için Windows kırpma aracını kullanın
• Snipping aracının boyutlarına göre MS Paint'te yeni bir tuval/belge oluşturun
• Yeni resminizi yeni tuvale sığdırın
• Resmin şeffaf bir arka plana ihtiyacı var mı?
• Evet ? GIF veya PNG olarak kaydedin
• hayır ? JPG olarak kaydet
• Resminizi sıkıştırmak için TinyPNG kullanın
• Sıkıştırılmış görüntüyü yükleyin

En iyi durum senaryosu

Yazılım

• Photoshop kullanan herhangi bir işletim sistemi

Görüntü

• Görüntünün kullanıldığı en büyük görüntü alanı boyutunu görebilmek için tarayıcıyı büyütün. Görüntünün gerçek piksel boyutunu hesaplamak için ekran yakalama aracını (mac aracı) kullanın
• Ekran görüntüsü alma aracının boyutlarına göre Photoshop'ta yeni bir tuval/belge oluşturun
• Yeni resminizi yeni tuvale sığdırın
• Web için kaydet'i seçin
• Resmi %100 olarak görüntülediğinizden emin olun
• Resmin şeffaf bir arka plana ihtiyacı var mı?
• Evet ? Açılır menüden GIF, PNG8 veya PNG24'ü seçin (Bunu yaptığınızda görüntü kalitesinin ve dosya boyutunun değiştiğini göreceksiniz)
• hayır ? Açılır menüden JPG'yi seçin
• İyi bir görüntü kalitesi/boyut dengesi elde edene kadar çeşitli görüntü formatına bağlı ayarları değiştirin
• Meta veri açılır menüsünü seçin ve hiçbirini seçmeyin
• Kaydedin, ardından web sitenize yükleyin

Sonuç

Umarım bu, kullanıcının sitelerine nasıl yeni resimler ekleyeceğini ve çok fazla dosya boyutundan nasıl tasarruf edeceğini daha iyi anlamasına yardımcı olur. Bu yazının arka plan resimleri, retina, SVG ve diğer birçok resim faffery kullanımını kapsamadığını biliyorum, ancak kapsanan seçenekler uygulanırsa yine de kullanıcıların çoğuna yardımcı olacaktır.

Web tasarımıyla ilgili daha fazla yardım için bugün uzmanlarımızla iletişime geçin.

Web Geliştirmenizle ilgili yardıma ihtiyacınız varsa, bizimle iletişime geçmekten çekinmeyin.