WordPress ile yeni nesil formatta görüntüler nasıl sunulur
Herkes WebP görüntülerinin tamamlandığını düşündüğünde, büyük bir şekilde geri döner. WebP görüntüleri geri dönüş hikayelerinin ortasında, şimdi Firefox ve Microsoft Edge yakın zamanda WebP görüntülerini desteklemeye başladı. WebP nedir? Bu, hiç kimse tarafından hiç duyulmamış en iyi görüntü formatıdır, ancak yakında değişecektir. Bu yazıda, WordPress sitenizde WebP resimlerini nasıl kullanmaya başlayacağınızı göstereceğim. Resimlerinizi WebP’ye nasıl dönüştüreceğinizi ve bunları uyumlu tarayıcılar için nasıl sunacağınızı tartışacağız. Site kodunuzu girmek istemiyorsanız, Smush Pro’nun bunu sizin için nasıl ele alabileceğini de göstereceğim.
Yeni nesil resim nedir? GIF 1987’de keşfedildi. İlk JPEG Standardı 1992’de yayınlandı ve PNG Ekim 1996’da bir W3C tavsiyesiydi. 90’ların daha önce böyle hissetmediğini biliyorum, ancak neredeyse 30 yıldı ve hala aynı görüntü formatını kullanıyorduk ! Yükseltme zamanı değil mi? Yeni nesil görüntü formatını girin. JPEG 2000, JPEG XR ve WebP, üstün sıkıştırma özelliklerine sahip ve web kullanıcılarını memnun etmek için olağanüstü kaliteye sahip modern görüntü formatlarıdır. Bu, çok daha küçük bir görüntü dosyası ürettikleri anlamına gelir, böylece yeni nesil formatını kullanarak sayfanızın hızını büyük ölçüde artırabilirsiniz.
WebP daha ince ve genellikle JPEG ve JPEG 2000’den% 30 daha fazla sıkıştırmaya ulaşıyor, bu yüzden bugün odaklanacağımız biçim. WebP nedir? WebP, Google’ın açık kaynaklı resim biçimidir. .Webp dosya uzantısını kullanıyorlar, biri kayıplı sıkıştırma kullanan ve JPEG görüntüleri ile karşılaştırılabilir, ancak% 25-34 daha küçük bir dosya boyutu olan birkaç WebP görüntüsü varyasyonu vardır. Kayıp WebP görüntüsü ayrıca JPEG tarafından yapılamayan şeffaflığı da destekler. Diğeri, PNG görüntü formatına benzer, ancak% 26 daha küçük dosya boyutuna sahip olan kayıpsız WebP biçimidir. WebP görüntüleri de GIF, JPEG ve PNG özelliklerine sahip oldukları için çok yönlüdür. Optimize edebilecek ve basitleştirebileceksiniz. Eğer bu neşeyi tetiklemezse, kimse olmaz.
Aşağıda hızlı işlevselliğin özeti
Animasyon
Kayıpsız Sıkıştırma
Kayıplı Sıkıştırma
Alfa kanalı şeffaflığı
Bu, performansın avantajlarından yararlanmak için PNG, GIF ve JPEG’yi rahat bir formata dönüştürebileceğiniz anlamına gelir. Çeşitli dosya formatlarının kafa kafaya karşılaştırılması için bu gönderiye bakın. Yaptığınızda indirilebilecek bir hile sayfası almayı unutmayın.
Ücretsiz webp şimdi kötü haber. Tüm tarayıcılar WebP resimlerini desteklemez. Ama bu bir geri dönüş hikayesi hatırlıyor musunuz? Mozilla Aralık 2018’de sadece birkaç ay önce katıldı ve WebP görüntülerine ihtiyaç duyulan bir ivme kazandırdı. Android için Internet Explorer ve Firefox da WebP’yi desteklemiyor olsa da, Safari’de daha fazla bekliyoruz. Ancak, Google gibi bir dev, web’i daha hızlı hale getirmeye ve projeyi desteklemeye kararlı bir dev ile, WebP görüntülerinin gelecek olması oldukça güvenli bir bahis.
Aslında, yakın zamanda Google PagePeed Insights’ı kullandıysanız, “yeni nesil formatta mevcut görüntüler” fırsatının şansına dikkat etmiş olabilirsiniz. Google bu şekilde WebP resimlerini benimsemeye teşvik eder. (Google PagePeed Insights’da “Doğru Görüntü Boyutu” mesajını alırsanız, resminizi ölçeklendirmeyi deneyin.) WebP görüntüleri nasıl eklenir WordPress ilk kullanıcı olmak ve WordPress’te bir WebP resmi kullanmak istiyorsanız, WordPress Media kitaplığının WebP resimlerini güvenlik nedeniyle yüklemenize izin vermediğini de göreceksiniz. Seni korkutmasına izin verme. Bu bir SVG durumu değil. WordPress.com WebP görüntülerine izin verir ve bu özelliği kendiniz gönderilen WordPress sitesinde de etkinleştirebilirsiniz.
Üzgünüm, pişman olma
WebP görüntülerini kullanmaya başlayabilmeniz için WordPress’te bu ilk evlat edinme sorununun üstesinden gelmenin birkaç yolu vardır. Bunu yapmak için: Medya kitaplığınızdaki resimleri WebP’ye dönüştürmek ve gelecekte yüklemek için bir WebP Dönüştürücü kullanın
Ziyaretçinin tarayıcısının desteklendiğinde WebP görüntüsü WebP görüntülerini destekleyip desteklemediğini veya PNG veya JPEG gibi eski dosya biçimlerini destekleyip desteklemediğini belirleyebilir.
Spoiler uyarıları, tüm bu adımlardan geçmek ve site dosyalarınızı değiştirmek ve resimlerinizi optimize etmekte zorluk çekiyorsanız, Smush Pro, görüntülerinizi WebP’ye dönüştürebilen ve çevirerek uyumlu bir tarayıcıya servis edebilen eksiksiz bir çözümdür. birkaç anahtar. Performansın avantajlarını burada test edebilmeniz için ücretsiz bir deneme alabilirsiniz.
WordPress için görüntüleri WordPress için WebP’ye dönüştürmek, WordPress medya kitaplığına yüklemeden önce görüntüleri yeni nesil formata dönüştürebilseniz de, birçok resminiz varsa bu pratik değildir. Rotayı almanız gerekiyorsa (belki de çeşitli görüntü türlerinin performansını test etmek istiyorsanız), image.online-cert.com/convert to-webp gibi bir webp dönüştürücü kullanabilirsiniz. JPEG, PNG veya GIF dosyalarınızı yükleyin, bir webp oluşturmak için bekleyin, ardından yeni resminizi indirin.
Bir aşağı, bin
Adobe Photoshop varsayılan olarak WebP’ye dosyaları dışa aktarmaz, ancak bu işlevi eklentilerle ekleyebilirsiniz. Bu WordPress eklentisi ile aynı değildir. Bu, bilgisayarınızdaki Adobe Photoshop klasörüne indirdiğiniz ve eklediğiniz eklentidir.
Ayrıca Webponize for Mac veya WebPConv Windows için indirebilir ve yükleyebilirsiniz. Her ikisi de JPEG’yi WebP’ye veya PNG’yi WebP’ye dönüştürebilir. WordPress WebP görüntüleri için, WebP dosyalarını doğrudan yüklenen klasöre yüklemek için SFTP’yi kullanabilirsiniz, böylece medya kitaplığını geçmek. Kolaylık sağlamak için, sitenizin işlev dosyasını değiştirerek WordPress medya kitaplığındaki WebP’ye de izin verebilirsiniz. WordPress için toplu olarak webp görüntüleri sohbet etmek, dönüştürülecek birçok görüntüye sahip bir yetişkin siteniz varsa, daha iyi bir araca ihtiyacınız olacak, böylece görüntüleri yeni nesil formata dönüştürebilirsiniz. CDN ile tüm resminiz. Smush, görüntü göndermeden önce orijinal görüntünüzü el değmemiş ve dönüşüm bırakır. Bu, Smush Pro CDN’nin görüntünüzü doğrudan değiştirmediği veya hiçbir şekilde onlara zarar vermediği anlamına gelir. WebP dönüştürme seçeneğini kapatırsanız, sunucu artık görüntünüzü WebP’ye dönüştürmez ve siteniz yüklendiğinde orijinal dosya biçimini kullanmak için geri döner. Smush Pro, örneğin arka plan ve görüntü simgenizi optimize edebilmeniz için diğer klasörlerdeki görüntüleri de dönüştürme seçeneği sunar.
Smush Pro CDN’nin bu yazıda nasıl yapılandırılacağını tartışacağız. Komut satırını da kullanabilirsiniz. Bu öğreticiye bakın. Görüntüler Yeni Normda Nasıl Sunulur Bazı görüntü optimizasyon eklentileri yalnızca görüntülerinizi WebP formatına dönüştürür, ancak doğru görüntüleri ziyaretçilerinize sunmaktan sorumlu değildir. Bunun için, ek bir eklenti kullanmanız veya aşağıdaki adımlardan birini almanız gerekebilir. Smush Pro, her ikisini de işleyerek, WordPress’te WebP formatına dönüştürmek ve tüm bu saçmalıklardan geçebilmeniz için uyumlu bir tarayıcıya hizmet vermek. 1. WebP için desteği algılamak için JavaScript kullanın, WebP görüntü kodunu kırmaya çalışan kendi özel kodunuzu yazarak yapabilirsiniz. Test başarılı olursa, ek webp görüntüleri gönderebilirsiniz. Bunu yapmanın bir yolu. WebP desteğini neredeyse aynı şekilde algılayan modernizatörler gibi JavaScript kitaplıklarını da kullanabilirsiniz. Tarayıcının gerçek özelliklerini test etmek de ek işler kaydeder, çünkü uygun olmayan bir tarayıcı WebP’yi desteklemeye başladıktan sonra kodunuzu yeniden yazmak zorundadırlar. Örneğin, Safari WebP görüntüsünüzü destekledikten ve WebP kod çözme testinizi geçtikten sonra, Safari kullanıcıları Safari’yi dahil etmek için kod mantığınızı yeniden yazmak zorunda kalmadan WebP resimleri alacaktır. 2. Üstbilgiyi kullanın Tarayıcı Tarayıcı ziyaretçisini “Al” İstek Başlığı “nı gönderir.
Web sunucusundan (Love, Firefox) hangi görüntü formatının alınacağını gösterir. Daha önce bir arkadaşınızla yemek sipariş ettiyseniz, onlardan size birkaç macun getirmelerini istediğinizde aynı şeyi yaptınız, ancak alerjiniz olduğu için karidesle değil. Bu benzetmede, arkadaşınız bir sunucudur ve ne alacağınızı belirleyen bir tarayıcısınız. Tarayıcı WebP resimleri alacağını gösteriyorsa, web sunucusu WebP’yi güvenli bir şekilde gönderebileceğini bilir. Bu, Smush Pro CDN tarafından hangi tarayıcının WebP görüntülerini alacağını tespit etmek için kullanılan yöntemdir. 3. WordPress’teki Köprü Metni Erişim (.htaccess) dosyasını .htaccess dosyanızda değiştirin kök dizininizde bulunur ve bu birkaç nedenden dolayı benzersiz bir dosyadır: bir nokta (.) İle başlar, yani gizli bir dosyadır. Gizli bir dosyayı görünür yapmadıysanız görmeyeceksiniz
Bir dosya uzantısı yok
Düzenlerken bir hata yaparsanız, sunucunuz ciddi arızalar yaşayabilir, bu nedenle yalnızca ne yaptığınızı biliyorsanız düzenleyin!
WordPress’te, bu dosya genellikle URL’yi yeniden yazmak için kullanılır. Bu durumda, görüntü URL’si değiştirilir ve .Webp uzantısı eklenir.
Bu genellikle WordPress gibi .htaccess dosyasıdır
Örneğin GitHub’daki Vincent Ortback kodunda .htaccess dosyası değiştirilir. Aynı klasörde bir WebP sürümü varsa ve tarayıcı WebP’yi destekliyorsa JPEG ve PNG görüntü URL’si değiştirilir. Doğru görüntüyü sunma sorumluluğu, bu durumda Apache Web sunucusundadır. 4. HTML 5 ile çeşitli boyutlar ve formatlar sunun WebP görüntüleri sunmanın daha iyi yollarından biri, en iyi görüntüleri seçmek için tarayıcılara güvenmek ve tarayıcı tarafından seçilecek çeşitli görüntüleri iletmek için html5 öğesini kullanmaktır. Sadece farklı görüntü formatları sunmak için öğesini değil, aynı zamanda mobil ve retina cihazları için farklı boyutlar da kullanabilirsiniz. Bu komik örneğe bakın. Bir görüntünün HTML’si şöyle görünürken:
bir gerekliliktir (veya görüntü oluşturulamaz) ve en son görünmelidir. Smush Pro’yu kullanarak yeni nesil görüntülerin nasıl sunulması Bu kafanızın üzerindeyse, görüntülerinizi WebP’ye dönüştürmenin ve Smush Pro kullanarak uyumlu bir tarayıcıya sunmanın daha kolay bir yolu vardır. İlk olarak, CDN Smush Pro’yu etkinleştirmelisiniz. Smush ayarlarında, CDN bölümünü açın ve başlangıç düğmesine basın. CDN Smush, Smush Pro’ya dahildir.
CDN’yi etkinleştirdikten sonra, CDN ayarlarında WebP dönüşümüne gidin ve etkinleştirin.
Şimdi kolay İşte burada! Smush Pro’yu risksiz denemek istiyorsanız, ücretsiz denemeler için listeleyin. Öncü olmak zorluksuz değildir, bu yüzden tüm dramalar olmadan WebP’yi başlatmayı kolaylaştırırız. WebP görüntülerinin norm haline gelmesinden sadece zaman meselesi, bu yüzden başlamalısınız. Şişmiş görüntüler genellikle sayfa hızınızı aşağı sürüklemekten sorumludur. Ziyaretçileriniz büyük retina cihazlarında net bir resim bekliyor ve aynı zamanda anında yüklenmelerini istiyor. WebP görüntüleri bu yüksek standardı karşılamanıza yardımcı olabilir. Resimleri optimize etmek için yardıma ihtiyacınız varsa, doğru görüntü formatını ve görüntü ölçeklendirmesini seçme hakkındaki diğer yayınlarımıza bakın. Ve eğer yapmadıysanız kesinlikle Smush Pro’yu deneyin. Görüntü optimizasyonunun ön saflarında kalabilmeniz için WebP desteği gibi birçok yeni özellik ekledik.
Sitenizdeki WebP resimlerini denediniz mi? Sizin için nasıl çalıştığı hakkında daha fazla bilgi verin.
Etiket: Cdn
galeri Görüntüler
