WordPress’i yavaşlatmayan bir retina hazır görüntü nasıl yapılır
Sitemdeki resim iyi görünüyor ve hızlı bir şekilde yayınlanıyor. Bence bu yeterli. Sonra onu hazırlamak için zaman harcadım ve Wowza, yükseltilmiş fotoğraflar olağanüstü görünüyordu! Şimdi geri dönebilmemin bir yolu yok. Retina cihazı inç başına daha fazla piksele sahiptir, bu nedenle ekstra piksel doldurmak için yüksek çözünürlüklü görüntüler gerektirir. Ancak Apple cihazı tek piksel içen değil. Yüzey tabletleri, Android telefonlar, iPhone’lar, tüm retinayı destekleyen görüntülere ihtiyaç duyar. Bu yazıda, Retina cihazları için WordPress’te nasıl yüksek çözünürlüklü görüntüler yaptığımı göstereceğim. Size bundan nasıl fotoğraf çekeceğinizi öğreteceğim …
…bunun için… … Yapabileceğiniz en uygun dosyayı göndermenizi sağlarken, bu güzel yüksek tanımlı görüntü çok büyüktür ve düzgün bir şekilde sunulmazsa sitenizi yavaşlatacaktır. PS Yukarıdaki resim aynı görünüyorsa, bunun nedeni cihazınızın yüksek tanımlı görüntüleri desteklememesi, ancak görüntü daha popüler hale gelir, bu nedenle yüksek çözünürlüklü ekranları optimize etmek için zaman ayırmanız gerekir. Retina ekran görüntüsünüz için WordPress kılavuzu binlerce (belki de büyük bir ekranınız varsa milyonlarca) Pixel adlı küçük bir kutudan oluşur. Görüntü oluşturmak için, görüntü dosyalarının ekranınızdaki her piksel için görüntüler üretmek için hangi rengin gerekli olduğunu söyleyen talimatları vardır.Görüntü çözünürlüğü, görüntünüzün ekranda görüntülenmesini büyük ölçüde etkiler, ancak düşündüğünüz gibi değil. Ekrandaki çözünürlüğü kağıt üzerindeki çözünürlükle aynı şekilde çalıştırdığını düşünüyoruz, ancak görünüşe göre değil. Öyleyse, varsayımlarınızı bir pop sınavı ile test edelim! 1. Hangi çözünürlük en küçük dosya boyutunu üretir? A) 72 dpi b) 150 dpi c) 300 dpi d) Yukarıdakilerin tümü 2. Web’de yüksek kalitede görünmek için hangi çözünürlükte görüntüleri saklamanız gerekir? A) 72 dpi b) 150 dpi c) 300 dpi D. kimin umurunda? İki sorunun cevabı D.’dir. Yol boyunca bir yerlerde, 72 dpi’nin web için standart bir çözüm olduğunu biliyorum. Resimimin retina ekranında iyi görünmesini istiyorsam, bu sayıyı iki katına çıkarmam gerektiğini varsayıyorum. 150 DPI seçtim çünkü bana biraz ekstra veren iyi bir tur numaraydı, bu yüzden sitemdeki tüm görüntüleri 150DPI’da kaydetmeye başladım. Şimdi gerçekten yanlış olduğumu biliyorum. İlk olarak, DPI sitenizdeki görüntünün görünümünü etkilemez. DPI, kağıt üzerinde inç başına nokta kısaltmasıdır. Aslında olan buydu. Farklı DPI’da depolanan bu üç görüntüyü görün:
72 dpi, 149kb 150 dpi, 149kb 300 dpi, 149kb Hepsi aynı görünüyor ve hepsi aynı dosya boyutuna sahip. İnanmıyorsanız Photoshop’ta indirin ve açın. Her şey aynı dosya boyutuna sahiptir, çünkü her şey aynı sayıda piksel için aynı talimatlara sahiptir. Ekranınız DPI’yı gerçekten umursamıyor, ancak yazıcınız bunu yapıyor. DPI, yazıcınıza kağıt üzerine görüntüleri yazdırırken ekranda pikselleri ne kadar sağlam bir şekilde paketleyeceğini söyler.
Bunlar yazdırdığım üç resim:
Tüm görüntüler, görüntü verilerinin görüntülenmesini ne kadar sağlam istediğinizi bildiren bir sayfa kağıt çözümüne yazdırılır. 100 piksel zaman 100 piksel görüntüserim varsa, 10.000 piksel için verilerim var. Yüksek çözünürlüklü görüntülerde, verileri daha küçük bir alana paketleyerek daha fazla ayrıntı üretiyorum.
Düşük çözünürlüklü görüntüler için verileri daha geniş bir alana yaydım.
Görüntü çözünürlüğü görüntüdeki veri miktarını değiştirmez, yalnızca verilerin ne kadar sağlam göründüğü. İnç başına MISS-ISS-I-PPI PPI veya piksel, bir inçte kaç pikselin bir ekran görüntülenebileceğinin bir ölçüsüdür.
Retina ekranı iki kez daha fazla piksele sahiptir, dikey ve yatay olarak, bir zamanlar bir piksel tarafından işgal edilen alan, şimdi dört pikseldir! Yukarıdan bildiğimiz gibi, tüm bu yeni piksellere talimatlar vermek için yeterli verimiz yok. Bu yüzden retina ekranındaki olağan görüntü çok bulanık görünüyor. Bu yine hata.
Retina, 398kb
Retina obvi değil Retina ekranı, detayları kalıplarda olduğu gibi korumak için güzel ama küçük görüntüler sunmak yerine verileri yaymaya çalışır. Kendi verileri olmayan talihsiz pikseller, bir grup Joker gibi hangi renkleri bulmak için etraflarındaki piksellerden verileri kullanmaya çalışın. Ellerinden geleni yapıyorlar, ama dürüst olmak gerekirse, kötü işler yapıyorlar. Bunu düzeltmek için WordPress’e daha yoğun bir görüntü sunmamız gerekir, böylece kullanılması yeterli veri vardır. Bu bizi nasıl bir retina görüntüsü yapacağımıza götürür, Adım 1 … Adım 1: En iyi uygulamayı takip ederseniz, siteniz için sitenizin çift boyutuna sahip görüntüler üretmeniz gerekir, o zaman dağılmanız gerektiğini bilirsiniz. Yüklemeden önce doğru boyutta görüntü. WordPress’te her piksel için yeterli veri içeren bir retina görüntüsü üretmek için, yüklediğiniz her görüntü için piksel boyutunu iki katına çıkarmanız gerekir. 1600 piksel ve 400px yüksekliğinde büyük bir kahraman görüntüsünüz varsa, 3200 piksel ve 800 piksel genişlik. Blog genişliğiniz 800 piksel ise, blog yayınınızın resminin 1600 piksel genişliğe sahip olması gerekir. Görüntünüzün görüntülenmesini sağlayan en büyük boyut için yalnızca piksel boyutlarını ikiye katlamanız gerekir. Olası her duyarlı boyut için çift boyuta sahip bir görüntü yapmanıza gerek yoktur. Görüntünüzü dosya uzantısından önce dosya adına @2x ile kaydedebilirsiniz, ancak bu gerekli değildir, çünkü aşağıdaki eklenti bunu sizin için yapacaktır.
Yüklediğim görüntü için nasıl retina görüntüsü yaparım?Sitenizi oluşturmak, zaten çok fazla içeriğe sahip bir siteniz varsa, zaman alıcı bir işlem olabilir, çünkü web sitenizden veya kameranızdan indirdiğiniz ve uygun boyutta ürettiğiniz orijinal resme geri dönmeniz gerekir.Sadece görüntüyü indirip Photoshop’ta büyütemezsiniz, aksi takdirde aynı opak sonuçları elde edersiniz.Görüntüyü azarlamaz ve büyük resimler yüklemezseniz, resim yeterince büyükse şanslı olabilirsiniz.Tüm resimleriniz için büyük bir resim (2000px x 800px) yüklerseniz, görüntü yalnızca blog gövdesinde 800 pikselde görünse de, büyük bir yedek yüklemeniz gerekmez.Boyut oldukça büyük olmasına rağmen zaten yeterli veriye sahip görüntüleriniz var;Ancak, performans avantajları için ihtiyacınız olan doğru boyutu üretirseniz bu en iyi uygulamadır.
Adım 2: Retina görüntülerini retina cihazlarına servis edin. Bunu yapmanın birçok farklı yolu vardır.Sana ikisini göstereceğim.İlk olarak, kodlarınız neler olduğunu görebilmeniz için manuel yolu göstereceğim.Ardından, size tüm kod nefretlerine hızlı ve kolay bir yol göstereceğim;) Seçenek 1: SRCSET’i WordPress’te manuel olarak değiştir bir retina görüntüsünü sunmanın daha iyi yollarından biri SRCSET özniteliklerini kullanmaktır.İşte böyle çalışıyor.Bir görüntüyü paylaşmak için SRC özniteliklerini kullanmak yerine, aralarından seçim yapabileceğiniz görüntüyü listelemek için bir tarayıcı verirsiniz.Tarayıcı daha sonra indirmeyi seçer ve ziyaretçi cihazları için en uygun resmi görüntüler.Bu sadece retina görüntüleri için işlev görmez, aynı zamanda farklı görüntü boyutları veya farklı formatlar sunmak için kullanabilirsiniz.
Retina görüntülerine odaklanacağız, bu nedenle SRCSET özelliklerimizde, Retina olmayan cihazlar için sıradan görüntüler ve retina cihazları için retina görüntüleri eklememiz gerekiyor. Retina olmayan ekranda büyük görüntüleri indirmek ve sunmak için zaman kaybetmek istemezsiniz, bu nedenle her ikisini de eklemeniz gerekir. Ayrıca, henüz SRCSET’i desteklemeyen bir tarayıcı için sıradan bir SRC etiketi eklemeniz gerekir. Bu şöyle görünecek: bkz. 1x ve 2x? Bu, tarayıcının hangi görüntülerin normal sürümler olduğunu ve hangilerinin retina sürümü olduğunu belirlemesine yardımcı olur. Kullanıcının bir retina cihazı varsa, tarayıcı 2x görüntü sunar. Değilse, 1x sürümüne hizmet edecektir. Tarayıcı SRCSET’i desteklemezse, tarayıcı SRC özelliğindeki olanı kullanır. Kolay, değil mi? Resimler eklediğinizde HTML koduna SRCSET öznitelikleri eklediğiniz ve asla bu kadar kolay olmadığı sürece bir retina görüntüsü sunabilirsiniz. Sorun, daha küçük cihazlar için daha küçük bir tarayıcı görüntüsü sağlamamanızdır. Başka bir deyişle, yukarıdaki kod duyarlı görüntüler üretmez. 4G üzerinden küçük bir iPhone’da büyük bir retina fotoğrafı sunabilirsiniz. Burası karmaşık olabileceği yerdir, çünkü tarayıcıya vermek istediğiniz tüm farklı seçenekleri ayarlamak için daha fazla özellik eklemeniz gerekir. İlk olarak, html5 öğesine geçmelisiniz. Element gerçekleşen daha fazla şey var:
nasıl
öğesinde yuva? öğesinde belirtilen görüntüye geri döner. Aslında, bir gerekliliktir (veya görüntü oluşturulamaz) ve en son görünmelidir. Ancak öğesinin en havalı kısmı, içine sıkışmış öğe. Element Medya özelliklerinde medya sorgularına izin verir. Farklı bir duyarlı görüntü seçeneği tarayıcısı vermek için, öğesine birkaç öğeyi girecek ve tarayıcıya, medya öznitelikleriyle doğru zamanı kullandığınız zaman anlatacaksınız. Daha sonra öğesindeki SRCSET özniteliğine bir retina görüntüsü ve sıradan görüntüler ekleyeceksiniz. Başlayalım çünkü çok sayıda var. D42F64209472C970B30ECFD9AF239D14’ün özünü belirtin
Şey … çabucak arttı. Ve bir WebP görüntü seçeneği eklediğinizde ne kadar daha uzun süre bilmek istemezsiniz. Tüm bu ek kodları manuel olarak girmek için tüm resimlerinizi değiştirmenizi önermeyeceğim. HTML’nizi değiştirmek için bu işlemi veya eklentiyi otomatikleştirmek için kesinlikle bir araç kullanmak istersiniz. Bu da bizi 2x Retina WP eklentisine götürüyor. Seçenek 2: WordPress Retina 2x WP Retina 2x eklentisini yükleyin ve yapılandırın, WordPress deposunda Pro sürümüyle ücretsiz bir eklentidir. Ücretsiz sürüm bu öğretici için yeterlidir.
Retina WP eklentisi 2x
WordPress Retina 2x neden iş için en iyi eklenti?
Eklenti, WordPress’te retina görüntüsünüzü nasıl sunacağınıza dair bazı seçenekler sunar, bu nedenle bir yöntem sitenize uymuyorsa, diğer yöntemlere geçebilirsiniz.
Bu smush ve smush profesyonel ile iyi entegre edilmiş
WP Retina 2x Pro’ya yükseltme, yükleme işlemini hızlandırmak ve mevcut birçok görüntüyü değiştirmek için ek araçlar verecektir.
Son nedene odaklanalım çünkü retina görüntüleri ile çalışırken görüntü optimizasyonu daha önemli hale geliyor. Yukarıdaki Beetle fotoğrafı ile, retina görüntü dosyası boyutunun normal görüntüden iki kat daha büyük olduğunu görebilirsiniz. Sayfa başına çok fazla görüntünüz varsa, bu sitenizi büyük ölçüde yavaşlatacaktır. Smush, görüntünüzü optimize etmenize yardımcı olabilir, ancak Smush Pro size ekstra avantaj sağlayacaktır. Smush Pro CDN, resimlerinizi otomatik olarak JPEG ve karşılaştırılabilir PNG’den çok daha küçük olan WebP dosyalarına dönüştürebilir. Smush Pro CDN ayrıca görüntünüzün boyutunu otomatik olarak değiştirir, bu nedenle medya kitaplığınızda çok büyük görüntüler varsa, Smush Pro CDN doğru boyutu sunacaktır. Burada ücretsiz Smush Pro’yu deneyin. 2x Retina WordPress eklentisini nasıl yapılandırılır Retina ekranı için görüntüler oluşturmak için 2x Retina WordPress eklentisinde bulunan bazı ayarları tartışalım. Temel ayarlarDisabled boyutları, disk alanından tasarruf etmek için belirli görüntü boyutunun retinaya dönüştürülmesini önlemenizi sağlar. Retina kalitesi, JPEG için sıkıştırma kalitesini düzenlemenizi sağlar. Bu sayfadaki önemli ayarlar yöntemlerdir. Bir retina görüntüsü sunmak için birkaç seçeneğiniz var.
Bir yöntem düzeltmek için çalışmazsa, başka bir tane seçin.
Resim dolgu görüntü içeriği, retina görüntüleri sunmak için önerilen yöntemlerdir. WordPress’te SRCSET özniteliklerini kullanmak için görüntüleri yüklemek veya HTML’yi yeniden yazmak için Polyilfill JS kullanır. Duyarlı görüntüler Duyarlı görüntü yöntemlerini kullanmak için, WordPress’te otomatik olarak SRCSET özniteliklerini kullanan WordPress 4.4 veya daha yeni kullanmanız gerekir. Eklenti, kaynak kümeye bir retina görüntüsü ekler. Retina.js Bu yöntem tamamen JavaScript’e bağlıdır. HTML her iki normal görüntü içerir, daha sonra retina desteği algılanırsa, iki görüntü dosyası indirilir, böylece bir retina görüntüsü içerir. Retina cihazı algılandığında html yazma html SRC etiketlerini değiştirme yazma, ancak birkaç önbellek eklentisiyle kullanıldığında sorunları deneyimleme potansiyeline sahiptir. Retina -retina görüntü yöntemi görüntüleri, uygun dosyayı sunmak için .htaccess dosyanızı değiştirir. CDN Smush Pro gibi CDN kullanırsanız bu yöntem çalışmaz. Gelişmiş Ayarlar Gelişmiş Ayarlar bölümünde, yeni yüklemeler otomatik olarak retina dosyasını oluşturacak şekilde otomatik oluşturma etkinleştirmelisiniz. Ardından, mavi düğmeye basarak ayarlarınızı kaydedin. Sonuç, burada önemli bir ayardır
Adım 3: Retina görüntüsünüzü WordPress’e yükleyin ve bir retina görüntüsü oluşturduktan ve eklentiyi yapılandırdıktan sonra sitenizde kullanın, sitenize yükleme zamanı. Yükleme işlemi, site ayarlarınızı ayarlamanız gerekebilse de aynıdır, böylece medya kitaplığınıza büyük dosyaları yükleyebilirsiniz. Görüntünün 1200 piksel genişliği var, ancak retinanın kalitesini elde etmek için 600 piksel sürümü kullanmam gerekiyor
Sitenizdeki resimleri kullanacağınız zaman, yarı genişliğinde ve tam boy yüksekliğinde çeşitli görüntüler kullanmak isteyeceksiniz. Eklenti yalnızca medya kitaplığı aracılığıyla yapılan görüntüleri tanır. Eklenti tarafından tanınmayan görüntüler için, tema simgesi ve logo gibi, .png veya .jpeg uzantısından önce dosya adına @2x eklemeniz gerekir. Ardından, bir retina dosyası olarak tanımak ve uyumlu bir cihazda sunmak için dosyayı 2x Retina WP eklentisi için orijinaliyle aynı yere yükleyin. Örneğin, Icon.png adıyla 200 x 200px’i ölçen bir site simgeniz varsa, 400 x 400px sürümü ve icon.png adını [e -posta korumalı] yapacaksınız ve FTP veya SFTP üzerinden aynı klasöre yükleyeceksiniz. icon.png simgesi. Eklenti gerisini halleder. Daha önce de belirttiğim gibi, birçok görüntüye sahip bir sitede çalışıyorsanız, WP Retina 2x Pro eklentisi, mevcut görüntüleri yükleme ve değiştirme işlemini kolaylaştırmak için birkaç zaman tasarrufu araçlarına sahiptir. Retina WP 2X ile ilgili olası sorunlar, uyumlu olmayan belirli bir slayt gösterisi eklentisi veya CDN kullanıyorsanız Retina WP eklentisini 2x kullanırken sorun yaşayabileceğinizi bilin. Örneğin CDN WP motorunun sorunlara neden olduğu bilinmektedir, bu nedenle WP motor ayarlarınızda, burada talimatları yeniden yazma kurallarını değiştirmeniz gerekir. Amazon S3 kullanıyorsanız, Retina WP 2X’i hiç kullanamazsınız. Yalnızca Retina WP 2X ile çalışan ve WordPress’i yavaşlatmayan bir CDN arıyorsanız, Smush’u denemenizi tavsiye edebilir miyim? Görüntülerinizi optimize etmek ve geliştirmek için ücretsiz sürümü kullanabilirsiniz, ancak CDN’ye erişmek ve ağır retina görüntü yükünü gerçekten azaltmak için Smush Pro size ihtiyacınız olanı verecektir. Ücretsiz bir Smush Pro denemesi için kaydolabilirsiniz. Smush Pro CDN’yi etkinleştirmek için Smush Pro eklentisini yükleyin. Ardından Smush ayarlarında CDN bölümünü açın ve Başlangıç’a basın. CDN’yi etkinleştirdikten sonra WebP dönüşümünü etkinleştirmenizi öneririm. WebP görüntü dosyaları çok daha küçüktür, böylece görüntünüzü dönüştürmek sayfanızı daha hızlı yükleyecektir. Buradaki avantajlar hakkında tüm ayrıntıları alabilirsiniz.
Smush Pro ile resimlerinizi daha verimli dosya türlerine dönüştürün Ayrıca otomatik görüntü boyutundaki değişikliği de etkinleştirmek istersiniz. Bu şekilde çok büyük bir resminiz varsa, ihtiyacınız olandan daha büyük görüntüleri sunmak için çok fazla dosya alanı kullanmayacaksınız. CDN Smush Pro ayarlarında görüntemin değişen boyutunu otomatik olarak etkinleştirmek için anahtarı çevirin.
WordPress’i hızlandırmak için resmimin otomatik boyutunu etkinleştirmek için anahtarı çevirin CDN Smush, sitenizi yavaşlatan sigara içmeden istediğiniz kaliteyi alabilmeniz için en verimli retina görüntüsünü sunmanıza izin verecektir. Smush Pro CDN ve Retina 2x WP eklentisi kullanmak, WordPress’te retina görüntülerinin çoğunu sunmanın en iyi yolu olsa bile, SVG görüntüleri de düz logolar ve simgeler gibi basit grafikler için bir seçenektir. Bu karmaşık dosya türü hakkında daha fazla bilgi edinebilirsiniz. Retina görüntüleri sadece nitelikli cihazlara sahip ziyaretçilere sunulur, diğer ziyaretçiler performansta değişiklikler yaşamayacaktır. Retina WP eklentisi 2x ile, yükseltilene kadar her zamanki gibi aynı resmi alacaklar. Retina cihazları daha popüler hale gelir, böylece sitenizi güncellemeye başlamanız gerekir. Başlamak için en iyi yer, sitenize eklediğiniz tüm yeni görüntülerin retinaya hazır olduğundan emin olmaktır. Ardından, bir retina versiyonu oluşturarak ve mevcut görüntüleri değiştirerek sitenizdeki en büyük ve en etkileyici görüntüyü görsel olarak değiştirin. Ardından, blog yayınlama gövdesinde kalan tüm büyük görüntülerin ve neyin olmadığını keşfedin ve ölçeklendirin. Farkına varmadan önce harika fotoğraflarla güzel bir siteniz olacak. Retinaya hazır olmak için sitenizdeki tüm resimleri güncellemeye çalıştınız mı? Süreç sizin için nasıl? Retina yolculuğuna başlayacak başkalarıyla paylaşmak için ipuçlarınız var mı?
Etiket:
arka fon Görüntüler
retina
öğesinde yuva? öğesinde belirtilen görüntüye geri döner. Aslında, bir gerekliliktir (veya görüntü oluşturulamaz) ve en son görünmelidir. Ancak öğesinin en havalı kısmı, içine sıkışmış öğe. Element Medya özelliklerinde medya sorgularına izin verir. Farklı bir duyarlı görüntü seçeneği tarayıcısı vermek için, öğesine birkaç öğeyi girecek ve tarayıcıya, medya öznitelikleriyle doğru zamanı kullandığınız zaman anlatacaksınız. Daha sonra öğesindeki SRCSET özniteliğine bir retina görüntüsü ve sıradan görüntüler ekleyeceksiniz. Başlayalım çünkü çok sayıda var. D42F64209472C970B30ECFD9AF239D14’ün özünü belirtin
Şey … çabucak arttı. Ve bir WebP görüntü seçeneği eklediğinizde ne kadar daha uzun süre bilmek istemezsiniz. Tüm bu ek kodları manuel olarak girmek için tüm resimlerinizi değiştirmenizi önermeyeceğim. HTML’nizi değiştirmek için bu işlemi veya eklentiyi otomatikleştirmek için kesinlikle bir araç kullanmak istersiniz. Bu da bizi 2x Retina WP eklentisine götürüyor. Seçenek 2: WordPress Retina 2x WP Retina 2x eklentisini yükleyin ve yapılandırın, WordPress deposunda Pro sürümüyle ücretsiz bir eklentidir. Ücretsiz sürüm bu öğretici için yeterlidir.
Retina WP eklentisi 2x
WordPress Retina 2x neden iş için en iyi eklenti?
Bir retina görüntü eklemek için html kodunu manuel olarak düzenlemenize gerek yok
Diğer bazı retina eklentilerinden farklı olarak, WordPress Retina 2x, bunları retina görüntüleri olarak tanımlamak için @2x ile tüm görüntülerinizin adını değiştirmenizi gerektirmez. Tüm retina eklentileri için söylenemeyen önbellek eklentileriyle uyumlu Retina 2x WordPress.
Eklenti, WordPress’te retina görüntüsünüzü nasıl sunacağınıza dair bazı seçenekler sunar, bu nedenle bir yöntem sitenize uymuyorsa, diğer yöntemlere geçebilirsiniz.
Bu smush ve smush profesyonel ile iyi entegre edilmiş
WP Retina 2x Pro’ya yükseltme, yükleme işlemini hızlandırmak ve mevcut birçok görüntüyü değiştirmek için ek araçlar verecektir.
Son nedene odaklanalım çünkü retina görüntüleri ile çalışırken görüntü optimizasyonu daha önemli hale geliyor. Yukarıdaki Beetle fotoğrafı ile, retina görüntü dosyası boyutunun normal görüntüden iki kat daha büyük olduğunu görebilirsiniz. Sayfa başına çok fazla görüntünüz varsa, bu sitenizi büyük ölçüde yavaşlatacaktır. Smush, görüntünüzü optimize etmenize yardımcı olabilir, ancak Smush Pro size ekstra avantaj sağlayacaktır. Smush Pro CDN, resimlerinizi otomatik olarak JPEG ve karşılaştırılabilir PNG’den çok daha küçük olan WebP dosyalarına dönüştürebilir. Smush Pro CDN ayrıca görüntünüzün boyutunu otomatik olarak değiştirir, bu nedenle medya kitaplığınızda çok büyük görüntüler varsa, Smush Pro CDN doğru boyutu sunacaktır. Burada ücretsiz Smush Pro’yu deneyin. 2x Retina WordPress eklentisini nasıl yapılandırılır Retina ekranı için görüntüler oluşturmak için 2x Retina WordPress eklentisinde bulunan bazı ayarları tartışalım. Temel ayarlarDisabled boyutları, disk alanından tasarruf etmek için belirli görüntü boyutunun retinaya dönüştürülmesini önlemenizi sağlar. Retina kalitesi, JPEG için sıkıştırma kalitesini düzenlemenizi sağlar. Bu sayfadaki önemli ayarlar yöntemlerdir. Bir retina görüntüsü sunmak için birkaç seçeneğiniz var.
Bir yöntem düzeltmek için çalışmazsa, başka bir tane seçin.
Resim dolgu görüntü içeriği, retina görüntüleri sunmak için önerilen yöntemlerdir. WordPress’te SRCSET özniteliklerini kullanmak için görüntüleri yüklemek veya HTML’yi yeniden yazmak için Polyilfill JS kullanır. Duyarlı görüntüler Duyarlı görüntü yöntemlerini kullanmak için, WordPress’te otomatik olarak SRCSET özniteliklerini kullanan WordPress 4.4 veya daha yeni kullanmanız gerekir. Eklenti, kaynak kümeye bir retina görüntüsü ekler. Retina.js Bu yöntem tamamen JavaScript’e bağlıdır. HTML her iki normal görüntü içerir, daha sonra retina desteği algılanırsa, iki görüntü dosyası indirilir, böylece bir retina görüntüsü içerir. Retina cihazı algılandığında html yazma html SRC etiketlerini değiştirme yazma, ancak birkaç önbellek eklentisiyle kullanıldığında sorunları deneyimleme potansiyeline sahiptir. Retina -retina görüntü yöntemi görüntüleri, uygun dosyayı sunmak için .htaccess dosyanızı değiştirir. CDN Smush Pro gibi CDN kullanırsanız bu yöntem çalışmaz. Gelişmiş Ayarlar Gelişmiş Ayarlar bölümünde, yeni yüklemeler otomatik olarak retina dosyasını oluşturacak şekilde otomatik oluşturma etkinleştirmelisiniz. Ardından, mavi düğmeye basarak ayarlarınızı kaydedin. Sonuç, burada önemli bir ayardır
Adım 3: Retina görüntüsünüzü WordPress’e yükleyin ve bir retina görüntüsü oluşturduktan ve eklentiyi yapılandırdıktan sonra sitenizde kullanın, sitenize yükleme zamanı. Yükleme işlemi, site ayarlarınızı ayarlamanız gerekebilse de aynıdır, böylece medya kitaplığınıza büyük dosyaları yükleyebilirsiniz. Görüntünün 1200 piksel genişliği var, ancak retinanın kalitesini elde etmek için 600 piksel sürümü kullanmam gerekiyor
Sitenizdeki resimleri kullanacağınız zaman, yarı genişliğinde ve tam boy yüksekliğinde çeşitli görüntüler kullanmak isteyeceksiniz. Eklenti yalnızca medya kitaplığı aracılığıyla yapılan görüntüleri tanır. Eklenti tarafından tanınmayan görüntüler için, tema simgesi ve logo gibi, .png veya .jpeg uzantısından önce dosya adına @2x eklemeniz gerekir. Ardından, bir retina dosyası olarak tanımak ve uyumlu bir cihazda sunmak için dosyayı 2x Retina WP eklentisi için orijinaliyle aynı yere yükleyin. Örneğin, Icon.png adıyla 200 x 200px’i ölçen bir site simgeniz varsa, 400 x 400px sürümü ve icon.png adını [e -posta korumalı] yapacaksınız ve FTP veya SFTP üzerinden aynı klasöre yükleyeceksiniz. icon.png simgesi. Eklenti gerisini halleder. Daha önce de belirttiğim gibi, birçok görüntüye sahip bir sitede çalışıyorsanız, WP Retina 2x Pro eklentisi, mevcut görüntüleri yükleme ve değiştirme işlemini kolaylaştırmak için birkaç zaman tasarrufu araçlarına sahiptir. Retina WP 2X ile ilgili olası sorunlar, uyumlu olmayan belirli bir slayt gösterisi eklentisi veya CDN kullanıyorsanız Retina WP eklentisini 2x kullanırken sorun yaşayabileceğinizi bilin. Örneğin CDN WP motorunun sorunlara neden olduğu bilinmektedir, bu nedenle WP motor ayarlarınızda, burada talimatları yeniden yazma kurallarını değiştirmeniz gerekir. Amazon S3 kullanıyorsanız, Retina WP 2X’i hiç kullanamazsınız. Yalnızca Retina WP 2X ile çalışan ve WordPress’i yavaşlatmayan bir CDN arıyorsanız, Smush’u denemenizi tavsiye edebilir miyim? Görüntülerinizi optimize etmek ve geliştirmek için ücretsiz sürümü kullanabilirsiniz, ancak CDN’ye erişmek ve ağır retina görüntü yükünü gerçekten azaltmak için Smush Pro size ihtiyacınız olanı verecektir. Ücretsiz bir Smush Pro denemesi için kaydolabilirsiniz. Smush Pro CDN’yi etkinleştirmek için Smush Pro eklentisini yükleyin. Ardından Smush ayarlarında CDN bölümünü açın ve Başlangıç’a basın. CDN’yi etkinleştirdikten sonra WebP dönüşümünü etkinleştirmenizi öneririm. WebP görüntü dosyaları çok daha küçüktür, böylece görüntünüzü dönüştürmek sayfanızı daha hızlı yükleyecektir. Buradaki avantajlar hakkında tüm ayrıntıları alabilirsiniz.
Smush Pro ile resimlerinizi daha verimli dosya türlerine dönüştürün Ayrıca otomatik görüntü boyutundaki değişikliği de etkinleştirmek istersiniz. Bu şekilde çok büyük bir resminiz varsa, ihtiyacınız olandan daha büyük görüntüleri sunmak için çok fazla dosya alanı kullanmayacaksınız. CDN Smush Pro ayarlarında görüntemin değişen boyutunu otomatik olarak etkinleştirmek için anahtarı çevirin.
WordPress’i hızlandırmak için resmimin otomatik boyutunu etkinleştirmek için anahtarı çevirin CDN Smush, sitenizi yavaşlatan sigara içmeden istediğiniz kaliteyi alabilmeniz için en verimli retina görüntüsünü sunmanıza izin verecektir. Smush Pro CDN ve Retina 2x WP eklentisi kullanmak, WordPress’te retina görüntülerinin çoğunu sunmanın en iyi yolu olsa bile, SVG görüntüleri de düz logolar ve simgeler gibi basit grafikler için bir seçenektir. Bu karmaşık dosya türü hakkında daha fazla bilgi edinebilirsiniz. Retina görüntüleri sadece nitelikli cihazlara sahip ziyaretçilere sunulur, diğer ziyaretçiler performansta değişiklikler yaşamayacaktır. Retina WP eklentisi 2x ile, yükseltilene kadar her zamanki gibi aynı resmi alacaklar. Retina cihazları daha popüler hale gelir, böylece sitenizi güncellemeye başlamanız gerekir. Başlamak için en iyi yer, sitenize eklediğiniz tüm yeni görüntülerin retinaya hazır olduğundan emin olmaktır. Ardından, bir retina versiyonu oluşturarak ve mevcut görüntüleri değiştirerek sitenizdeki en büyük ve en etkileyici görüntüyü görsel olarak değiştirin. Ardından, blog yayınlama gövdesinde kalan tüm büyük görüntülerin ve neyin olmadığını keşfedin ve ölçeklendirin. Farkına varmadan önce harika fotoğraflarla güzel bir siteniz olacak. Retinaya hazır olmak için sitenizdeki tüm resimleri güncellemeye çalıştınız mı? Süreç sizin için nasıl? Retina yolculuğuna başlayacak başkalarıyla paylaşmak için ipuçlarınız var mı?
Etiket:
arka fon Görüntüler
retina
