Optimize etmenin, boyutu değiştirmenin ve WordPress ile azaltılan görüntüleri servis etmenin doğru yolu
Bir deşarj görüntüsü sunmak, daha iyi site performansı sağlamanın en göz ardı edilen yollarından biridir. Resminiz WordPress sitenizi tutuyor mu? Görüntü, özellikle çok büyük ve büyükse, çok fazla dosya boyutu alanı alır. Bu nedenle, sayfanın, dönüşümün veya satışların hızını artırmaya çalışırsanız, görüntü optimize edilecek şeyler listesinde bir numara olmalıdır. Bu yazıda, WordPress ile gözden düşmüş görüntülerin nasıl sunulacağımıza odaklanacağız. WordPress’te görüntüleri birkaç farklı şekilde nasıl ölçeceğinizi ve görüntü optimizasyonunuzun iş akışını Smush Pro ile olağanüstü bir şekilde nasıl artıracağınızı öğreneceksiniz.
Ölçek resmi nedir? Web’deki resim Goldilocks bölgesine düşmelidir. Çok büyük değil, çok küçük değil. Haklı olmalılar. Çok küçük ve genişlemişse, görüntü bulanık olacaktır.
Öte yandan, görüntü çok büyükse, tarayıcı bunu doğru boyuta indirir. Bu, görüntünün görünümünü etkilemez, ancak sayfa dosyasının boyutunu artırır. Görüntü optimizasyonuna hakim olmak için tam kılavuz kalite değişikliklerini göremediğiniz için, görüntü dosyasındaki ekstra ağırlık kolayca göz ardı edilir. Ve çoğu insan bir sorun olduğunu bilmediğinden, düzeltmezler. Doğru boyutu sunmak için tarayıcılara güvenmeye devam ediyorlar, çünkü bu tarayıcı için değil mi?
Yanlış. Google PagesPeed Insights’ta doğru “resim boyutu” için fırsat bulduğunuzda, bunun bazı görüntüleri tarama zamanı olduğunu bileceksiniz. Google’a göre … ideal olarak, sayfanız kullanıcı ekranında oluşturulan sürümden daha büyük görüntüleri göstermemelidir. Daha büyük olan her şey … sadece boşa harcanan bayt üretir ve sayfa açık saatini yavaşlatır. (Kaynak: geliştirici.google.com) Sizin için çok büyük zararlı görüntüler sunmak çeşitli şekillerde. Birincisi, ek sunucu istekleri yapmaya zorlayan tarayıcıyı yönlendirir. Web sayfaları mümkün olan en kısa sürede göndermek yerine, görüntünün boyutunu durdurmak ve değiştirmek gerekir. Özellikle web sayfanız resimlerle doluysa, arkadaşlarım zaman alır.
İkincisi, doğrudan cep telefonunuzdan tam boyutlu bir selfie yüklerseniz, ancak küçük bir gravatar olarak görüntülüyorsanız, çok büyük görüntüleri indirmek için zaman ve veri israf edersiniz.
Görüntünün boyutunu sıkıştırmak ve değiştirmek için sinek kuşunda önerilere örnekler. Deşarj görüntüsünü girin. Ölçek görüntüsü, kullandığınız doğru boyutlara uyacak şekilde boyutlandırılmış bir resimdir. Görüntülerin oranını değiştirebilen kesimden farklı olarak, ölçekleme boyutları korur.
Bu gönderiyi tam boyutlu bir ekranda okursanız, bu yazının gövdesinin genişliği 600 pikseldir. Burada WPMU Dev’de optimize etmekle ilgili olduğumuz için, bir blog yazısı için bir resim yaptığımda, tam olarak 600 piksel genişlikte yapıyorum. Bu, tarayıcının ek iş yapması gerekmez ve daha fazla veri kullanmanıza gerek yoktur. Ana Mega Hız için Kılavuz WordPress Hummingbird, GTMetrix ve Google PagePeed Insights gibi site hızını optimize etmek, performansı iyileştirmek için görüntülerin ölçeklendirilmesini önerecektir. GTMetrix, görüntünüz çok büyükse ve yavaşlarsa “akıntı görüntüsü sun” diyecektir. sayfalar, servis
SRCSET ve Boyut özelliği değişen görüntü boyutunu işlemeli mi? Evet ve hayır. Zirve optimizasyonu istiyorsun değil mi? SRCSET, SRCSET ve Boyut, ideal görüntü boyutuna yakın olmanıza yardımcı olur, ancak her zaman ihtiyacınız olan doğru boyutu vermezse ve en büyük boyutta avantajları azaltmaz. SRCSET öznitelikleri, görüntüler için URL sağlayarak ve daha sonra çeşitli boyutlarda seçilecek bir tarayıcı görüntü listesi sağlayarak çalışır. Daha önce bahsettiğim cep telefonu selfie’leri için kaynaklardan oluşan bir koleksiyon şöyle görünecek: srcset = “selfie-100×100.png 100w, selfie-200×200.png 200w, selfie-400×400.png 400w” Yukarıda, WordPress tarayıcıya söyler, kullanıcılar hakkında benden daha fazla bilgi edersiniz, bu 3 farklı boyutta istediğiniz görüntüdür, 3 farklı boyutta istediğiniz görüntü, En iyisini işleyecek olanı seçin. Tarayıcının yorumların yanındaki 75px x 75px gravatarını görüntülemesi gerektiğinde, tarayıcı koleksiyondaki ilk seçeneği seçecek ve boyutunu biraz değiştirecektir. Kullanıcının bir retina cihazı varsa, ikinci seçeneği seçecektir. Bu biraz atık azaltır, ancak ölçek biraz ekstra performans elde etmenizi sağlar. WordPress’te bir ölçek görüntüsü nasıl sunulur, başlamak için, sitenizde kullanılacak görüntünün boyutlarını bilmeniz gerekir. Banner görüntüleri, kahramanlar, blog yazısı resimleri, gravatar vb. Hakkında konuşuyorum. WordPress’te yanlış görüntü boyutunun nasıl algılanacağına dair kısa öğreticimizi izleyin. Her resmin en büyük boyutunun ne görüntüleneceğini bilmek istiyoruz çünkü bu eşiğin üzerindeki her şeyin işe yaramaz olduğunu biliyoruz. Örneğin, sitem ana sayfamda deniz fotoğrafı kullanmak istiyorum. Değişmeyen bir durumdaki görüntü 4534px x 3023px’dir.
Fotoğrafın boyutunu değiştirmek için hiçbir şey yapmadım … Henüz blog yazısı gövdesindeki görüntüler için değil, 600px-960px genişliğine sahip görüntüler ve masaüstü bilgisayar ekran genişliğine sahip üstün görüntüler için sunmanız gerekebilir. , 1600 piksel genişliğe sahip bir şeye bakıyorsunuz. Ayrıca retina ekranını karşılamak için bu boyutu iki katına çıkarmanız gerektiğini unutmayın. 1600px resminin ihtiyaç duyduğu en büyük boyut 3200 pikseldir. Görüntünün ihtiyaç duyduğu boyutu mükemmel bir şekilde bulmak için, sitede görüntüleri arayacağız ve bir tarayıcı geliştiricisi açacağız. Chrome kullanıyorsanız, görüntüye sağa tıklayın ve inceleyin. Firefox’ta öğeyi inceleyin. Ctrl + Shift + i’yi de kullanabilirsiniz
Chrome’da, imleci görüntü için URL’ye yönlendirdiğinizde, parantezlerde orijinal “doğal” görüntü boyutuyla görüntülenen görüntünün boyutunu göreceksiniz. Büyük resim dosyası ziyaretçileriniz tarafından indirilir.
3000’den fazla pikselin resmi çok büyük, çok kötü. Bu Firefox’ta benzer. Elemanları kontrol ettikten sonra, resmin yanındaki boyutlar olduğunu göreceksiniz. Bu bize ihtiyacımız olan görüntünün boyutunu anlatıyor
Artık ihtiyacımız olan görüntünün boyutunu bildiğimize göre, görüntünün boyutunu WordPress’te birkaç farklı şekilde değiştirebiliriz. Medya kitaplığındaki resimleri manuel olarak kesmek için, medya> kütüphaneyi açmak ve kesmek istediğiniz görüntüyü tıklayın. Ardından, düzenleme arabirimini açmak için Resim Düzenle düğmesini tıklayın.
Görüntü ekinin ayrıntılarına bakın, ardından Görüntü Düzenleme düğmesini tıklayın. Sağdaki uygun seçeneği kullanarak görüntüyü ölçeklendirin veya kesin. Görüntüyü ihtiyacınız olan genişliğe uyacak şekilde dağıtırsanız, yüksekliğin temanızda belirtilen boyuttan daha kısa veya daha uzun olabileceğini unutmayın. Görüntünüzü dağıtmayı seçerseniz, orijinal görüntüye kıyasla doğru oranda kalır. Öte yandan, görüntünüzü kesmeye karar verirseniz, seçtiğiniz boyutlara bağlı olarak orantılı olarak düzenlenmesi gerekmeyebilir. İstediğiniz genişliği ve yüksekliği yazarak görüntünüzü dağıtabilirsiniz, ardından ölçek düğmesini tıklatabilirsiniz. Resminizi kesmeyi tercih edin, farenizi resmin üzerine tıklayıp sürükleyerek ve görmek istediğiniz alanı seçerek yapabilirsiniz. Ardından, seçiminizi ifade etmek için fare tıklamanızı serbest bırakın. 9 WordPress Media Kütüphanesinde Gizli Özellikler Yalnızca, genişlik ve yükseklikte gerekli ayarlamaları yapmak için kenarları ve yandaki kutuyu tıklayıp sürükleyebileceğinizi bilen yetenekli kullanıcılar veya sağda seçilen düzlemin içine girebilirsiniz. . Resim için istenen en boy oranını girme seçeneğiniz de var:
En boy oranı genişlik ve yükseklik arasındaki ilişkidir. Seçtiğiniz boyutu değiştirirken kaydırma düğmesini basılı tutarak özellik oranını koruyabilirsiniz. Örnek 1: 1 (kare), 4: 3, 16: 9, vb.
Ayrıca, görmek istediğiniz doğru alana taşımak için seçilen alanı tıklayıp sürükleyebilirsiniz. Görüntünüzü farenizle seçerek keserseniz, resminizin üzerindeki kesim simgesini tıklayın. Bala veya temanız tarafından belirtilen boyuta uyacak şekilde görüntünüzü kesin. Ardından, değişikliklerinizin küçük görüntü ayarları altında uygulanmasını istediğiniz önceden belirlenmiş görüntü boyutunu seçin. Küçük resimleri korurken resimleri düzenlemek istiyorsanız bu seçenek yardımcı olabilir.
Örneğin, yalnızca bazı görüntüleri görüntüleyen kare mini bir görüntüye sahip olmak isteyebilirsiniz. Değişiklikleri tamamladıktan sonra, resminizin altındaki Kaydet düğmesini tıklayın.
Boyutu değiştirmek için uygulamak istediğiniz görüntünün boyutunu seçin, ardından Kaydet’i tıklayın.
Düzenleyicideki Medya düğmesini tıklayarak yayın veya sayfayı düzenlerken görüntünün boyutunu manuel olarak da değiştirebilirsiniz. Ardından, Medya Kütüphanesi sekmesini tıklayın ve kayıtlı resimlerden birini seçin. Ardından, yukarıda belirtilen aynı düzenleme arabirimine erişmek için sağdaki resim düzenleme bağlantısını tıklayın.
Mesajları veya sayfaları düzenlerken görüntünün boyutunu manuel olarak da değiştirebilirsiniz. WordPress, ortam ayarlarıyla görüntünün boyutunu nasıl değiştirir? Boyutu manuel olarak değiştirmek için ihtiyacınız olan görüntü WordPress tarafından yapılan varsayılan boyutsa, Yönetici Dashboard Media ayarlarınız aracılığıyla düzenlemeyi deneyebilirsiniz. Varsayılan WordPress görüntüsünün boyutu, mini, orta, büyük ve tam boyutlu bir görüntüdür, ancak tam boyut yüklenen görüntünün orijinal boyutlarını ifade eder ve medya ayarlarında değiştirilemez. Orijinal görüntüyü düzenlemek için yukarıdaki ayrıntılara bakın. Varsayılan görüntünün boyutunu manuel olarak değiştirmek için, Ayarlar> Ortam’ı açın ve uygun alanda değiştirmek istediğiniz geçerli görüntü boyutu için ihtiyacınız olan maksimum ve maksimum yüksekliği girin. Küçük resim boyutunu değiştirmeniz gerekiyorsa, küçük resimleri belirttiğiniz doğru boyutlara kesmek için isteğe bağlı olarak onay kutusunun seçilmesine izin verebilirsiniz. Genellikle, küçük resimler otomatik olarak düzenlenir. Bittiğinde, sayfanın altındaki değişiklikleri kaydet’i tıklayın. Medya ayarları aracılığıyla WordPress varsayılan görüntünün boyutunu düzenleyebilirsiniz.
Bu boyutun temanızdaki birçok yerde kullanılabileceğini unutmayın, böylece boyut olarak değiştirilmek istemeyen görüntüleri düzenleyebilirsiniz. WordPress’e özel bir boyut da ekleyebilirsiniz. Değişikliklerinizi kaydettikten sonra, yeni ayarladığınız yeni boyutlara uymak için daha önce yüklediğiniz görüntünün boyutunu değiştirmek için Rejenere Küçük Resim eklentisini yükleyin ve etkinleştirin. Dosyayı Boya Düzenle Görüntünüzü boya, Adobe Photoshop veya görüntü düzenleyicisi seçiminize açın. Geliştiricide yaptığımız boyutları kullanacağız.
Boyadaki görüntünün boyutu nasıl değiştirilir
Boyada, Ana Sayfa sekmesindeki boyutu değiştirmek için açık. Yeni bir boyut girmenizi sağlayan bir kutu açılacaktır. Pixel Radyo düğmesini seçin ve ardından Yatay Boyutu düzenleyin. Onay kutusu seçilen en boy oranını korursa dikey boyut otomatik olarak değiştirilecektir. İstediğimiz bu. Kutu kontrol edilmezse, kendinizi saymalısınız. Boyutları tamamladıktan sonra Tamam’ı tıklatın. Ardından dosyayı boyaya kaydedebilir, WordPress’e yükleyebilir ve görüntüyü yeni bir dosya ile değiştirebilirsiniz. Smush Smush ve Smush Pro ile görüntüleri optimize etmek, görüntüleri optimize etmeye başladığınızda çok zaman kazandırabilir. Hem Smush ve Smush Pro’nun yanlış boyutun tespit edilmesi, eklenti ayarlarında yanlış boyutu tespit etme seçeneğine sahiptir. Benim gibi iseniz ve ara sıra resminizin boyutunu değiştirmeyi unutursanız, bu özellik sitenizi hangi görüntülerin yavaşladığını görmenize yardımcı olacaktır. Sitenizi ziyaret ettiğinizde, çok büyük veya çok küçük görüntüler sarı bir çizgi ile görünecektir. Bilgi sekmesini açtığınızda (sarı simgeye bkz. “I”?) Smush size görüntünün boyutunda neyin yanlış olduğunu söyleyecektir. Teşekkürler Smush! Sadece yönetici resimlerin ve hata mesajlarının önemli noktalarını görecekBu özelliği Smush ve Smush Pro’da etkinleştirmek için eklenti menünüzü açın ve araç bölümünde algılamayı etkinleştirin ve yanlış boyutta görüntüyü görüntüleyin. Ardından, ayarlarınızı güncellemek ve sitenizin önündeki yanlış görüntü boyutunu görün. Bu özellik Smush’ın ücretsiz versiyonunda mevcuttur
Otomatik görüntünün boyutunu değiştirin Kendinizi ve başkalarını çok büyük bir resim yüklememek için tutmak ister, böylece barındırma depolama alanınızı çok fazla harcamayacaksınız? Smush ve Smush Pro yardımcı olabilir. Smush eklentisi yığın smush ayarlarında, görüntü yeniden boyutlandırma bölümünü açın ve tam boyutlu görüntülerimi yeniden boyutlandırın. Görüntü medya kütüphanenize yüklenmeden önce, Smush boyutunu belirttiğiniz genişliğe ve yüksekliğe uyacak şekilde değiştirecektir. Smush’ın size sitenizdeki en büyük görüntü boyutunun nasıl söylediğine dikkat edin ve daha sonra retina cihazı için çoğaltın. Smush ayrıca orijinal görüntünün bir kopyasını kaydetme seçeneği sunar.
Resminizi bozma konusunda gergin misiniz? Orijinali korumak Bu özellik temel olarak en büyük görüntünüzün avantajlarını azaltır. Biri aşağı, yüzlerce daha. Peki ya yüklediğiniz tüm görüntüleri yukarıdaki adımlardan geçip her resmi manuel olarak dağıtmadan mükemmel bir önlem haline gelmek istiyorsanız ne olur? Kolay, WPMU Dev üyesi olun ve Lightning Smush Pro kadar hızlı CDN’ye erişin (veya kendi Smush Pro’nuzu alın). Ev sahibiniz, sitenizin performansını artırmak için barındırma hesabınızla bir CDN içerebilse de, CDN Smush Pro, görüntülerin optimizasyonu dikkate alınarak özel olarak tasarlanmıştır. Smush Pro CDN, görüntülerinizi sadece yıldırım kadar hızlı bir şekilde göndermekle kalmayacak, aynı zamanda CDN’imiz de kullanıcılarınız için mükemmel boyutta görüntüler sunacaktır. Başka bir deyişle, kafa derisini bize gönderin!
Smush Pro CDN’yi birkaç basit adımla yapılandırmanız gerekiyor CDN Smush Pro, Google PagePeed’den ‘Doğru Görüntü’ önerisiyle ilgili sorunlar yaşarsanız size yardımcı olabilir. Başlat düğmesine bastıktan sonra CDN yapılandırma ayarlarına ulaşacaksınız.
Sadece otomatik boyutu değiştirme seçeneğini etkinleştirin ve CDN, orijinal görüntünüzün dokunulmamasını sağlarken sizin için doğru boyutta görüntüyü sağlayacaktır. Bu nasıl havalı? Görüntülerin ölçeklendirilmesi görebileceğiniz gibi çözülür, WordPress’te görüntüleri doğru bir şekilde ölçmenin birkaç yolu vardır, ancak birçok görüntüye sahip bir yetişkin siteniz varsa bu sıkıcı bir işlem olabilir. Elinizi yükseltmek ve “Ah, bu bir kullanıcı sorunu” demek ve görüntünüzü olduğu gibi bırakın, beş gün değil, beş dakika içinde problemleri çözmek için Smush gibi bir eklenti kullanmanızı öneririm. Ayrıca Free Smush Pro’yu da deneyebilirsiniz. Kullanıcınız minnettar olacak. Ve daha düşük bir barındırma maliyeti görebilirsiniz, çünkü fazla alana ihtiyacınız yoktur. Bu kazan-kazan. Smush’u bir süredir görmediyseniz, tekrar ziyaret etme zamanı. Birçok yeni özellik ekledik ve Smush Pro öncekinden çok daha güçlü. Smush Pro, önde gelen bir görüntüyü optimize eden bir eklenti haline geldi, bu çok şey ifade ediyor. Kontrol edin, hayal kırıklığına uğramayacaksınız. Boyutu değiştirmek ve görüntünüzü sıkıştırmak için hangi hile kullanıyorsunuz? Görüntünüzü dağıtmak için WP Smush Pro’yu denediniz mi? İpuçlarınızı aşağıdaki yorumlarda paylaşın.
Etiket: kompres
sinek kuşları Görüntüler
göstermek Boyutu değiştir
smuş WP Smush Pro
