WordPress için Görüntüler Nasıl İyileştirilir ve Optimize Edilir

Görüntüler İnternet üzerinden yüklenemeyecek kadar büyük bir şey olmayalı uzun zaman oldu. Bugün, web siteleri onlarsız var olamaz. İnternet hızları yıllar içinde önemli ölçüde artmış olsa da, blogunuzdaki resimlere dikkat etmeniz çok önemlidir.

Sitenize resim yüklemek kolay olduğu için, bunu herhangi bir hazırlık yapmadan yapmanız gerektiği anlamına gelmez. Optimize edilmemiş görseller aslında sitenize birçok yönden zarar verebilir; ziyaretçilerin sizi düşünme şeklini etkilemekten web sitenizin hızına ve SEO sıralamalarına kadar. Bunu hala düşünmediyseniz, size WordPress'teki görüntüleri iyileştirmenin birkaç yolunu göstermek için buradayız.

Sitenizi hızlandırmak ve SEO'yu geliştirmek için görüntüleri WordPress için nasıl optimize edersiniz

Görüntüleri neden WordPress için optimize etmelisiniz? Bir çaba gösterirseniz, aşağıdakileri bekleyebilirsiniz:

• Daha hızlı site
• Daha İyi SEO
• Daha küçük yedeklemeler
• Daha az bant genişliği kullanımı
• Daha mutlu kullanıcılar

Ayrıca görüntüleri optimize edebileceğiniz farklı aşamalar olduğunu da bilmelisiniz. Resimleri bir bloga yüklemeden önce bile halledebilirsiniz veya bunu yükledikten sonra yapabilirsiniz.

Sitenizdeki görüntüleri hızla test edin

Optimizasyon üzerinde çalışmaya başlamadan önce sitenizi hız ve performans açısından hızlıca kontrol edebilirsiniz. Listedeki araçlardan herhangi birini kullanarak, sitenizdeki resimlerin ne şekilde olduğunu çabucak öğreneceksiniz.

Size sitenizin daha yavaş yüklenmesine neden olan resimleri tam olarak gösterecek olan GTmetrix kullanmayı seviyoruz.

Yüklemeden önce görüntüleri WordPress için optimize edin

Blog yazarken çoğu insan görsellerini optimize etmek için gerekli tüm adımları atmaz. Genellikle insanlar kameralarından veya akıllı telefonlarından bir fotoğraf çeker, İnternet'ten bir fotoğraf indirir veya bilgisayar yazılımı kullanarak bir fotoğraf oluştururdu.

Biçimleri, görüntü boyutlarını veya dosya adlarını düşünmezler. Resim iyi görünüyorsa, İnternet için hazır olduğunu varsayıyorlar. Resimlerinizi kontrol etmezseniz, bir felakete doğru ilerliyorsunuz.

Resimleri yeniden boyutlandır

Her resmin genişliğini ve yüksekliğini kontrol etmeden WordPress web sitenize resim yüklemeyin. Örneğin, görüntüleri maksimum 700 pikselde görüntülerseniz, daha geniş bir resim yüklemeye gerçekten gerek yoktur. Bunu yaparsanız, çıktı aynı olurken sitenizi yavaşlatacak daha büyük bir dosyanız olur. WordPress ek boyut oluşturacaktır, ancak bu, görüntüleri yüklemeden önce hazırlamamanın bahanesi değildir.

Görüntüleri yeniden boyutlandırmak hızlı ve kolaydır. Bu konuda size yardımcı olacak Microsoft Paint gibi birçok ücretsiz araç var. Easy Resize gibi resimleri yeniden boyutlandırmak için ücretsiz çevrimiçi araçlar bile bulabilirsiniz.

Görsel boyutları temadan temaya değişiklik gösterecektir. Hangisini kullanmanız gerektiğinden emin değilseniz, WordPress temanıza daha yakından bakın ve resimleri inceleyin, belgeleri arayın veya yardım için destek isteyin.

Kaliteyi değiştir

Boyutları değiştirdikten sonra, görüntülerin kalitesini değiştirmeyi düşünmelisiniz. Yazılıma bağlı olarak, resimlerin kalitesini değiştirmenin farklı yolları vardır. Örneğin, her zaman popüler olan Photoshop, görüntüleri web için kaydetmenize olanak tanır. Bu seçenek, görüntüleri daha düşük kalitede kaydetmenize olanak tanır, ancak bunlar siteniz için optimize edilecektir.

Ayrıca, bir resmi JPEG olarak kaydetmeyi seçerseniz, Photoshop sizden kalite seviyesini seçmenizi isteyecektir. Bu durumda, kaliteyi 12'den sadece 8'e düşürmek, bir görüntünün boyutunu önemli ölçüde azaltırken kalite farkı o kadar büyük olmaz.

Hala resimlerinizin kalitesini değiştirmek için herhangi bir yazılım kullanmıyorsanız, ücretsiz çevrimiçi Tiny PNG aracını deneyebilirsiniz. Sadece bir resim yükleyin ve ne fark yaratabileceğini görün.

Doğru formatı seçin

Boyut ve kalitedeki değişikliklerden sonra bile formatı değiştirmeyi düşünmelisiniz. Yeni başlayanlar için, sadece doğru formatı seçerek, bir görüntüden daha fazla değilse birkaç kilobayt çıkartabilirsiniz.

Genel kural çok basittir. Bir fotoğrafınız varsa, JPEG yapın. Bir logonuz, vektör resminiz veya bilgisayar tarafından oluşturulmuş çok basit bir grafiğiniz varsa PNG ile devam edin. Degradesiz gerçekten küçük bir görüntünüz varsa veya yukarıda gösterilen gibi basit bir animasyon göstermek istiyorsanız, GIF kullanabilirsiniz. Genellikle PNG görüntüleri JPEG olanlardan oldukça büyük olacaktır ve formatı değiştirmekten yararlanabilirsiniz.

Çoğu durumda, görüntüleri yeniden biçimlendirmek önemli kalite farkları yaratmazken, boyutta bir fark bekleyebilirsiniz. Bir dahaki sefere bir PNG fotoğrafı yüklemeden önce, bir şans verin ve farkı görmek için JPEG olarak kaydetmeyi deneyin. Daha ayrıntılı bir açıklama için lütfen PNG, JPEG, GIF ve SVG arasındaki farkı kontrol edin.

Dosya adlarına dikkat edin

Dosya adı önemsiz gibi görünse de, aslında çok farkında olmanız gereken bir şeydir. Resim dosyanızın adı SEO için değerli bir bilgi içerir. Başkalarının görselinizi Google'da ve diğer arama motorlarında bulmasını istiyorsanız, ona uygun bir ad vermelisiniz.

Görüntüleri boşluk kullanmadan adlandırmanızı öneririz. Sayfanın ve resmin sıralanmasını istiyorsanız anahtar kelimeleri eklemeyi unutmayın. Örneğin, Ferrari California'nın bir resmini yüklüyorsanız, dosya adı “ferrari-california.jpg” olmalıdır. WordPress için bir SEO eklentisi kullanıyorsanız, alt etiketlerinizi anahtar kelimeler için kontrol ettiğini zaten biliyorsunuzdur. Evet, uygun bir görüntü adına sahip olmak gerçekten çok önemlidir.

Yüklemeden sonra görüntüleri WordPress için optimize edin

Görüntüleri bilgisayarınızda hazırladıktan sonra yükleme işlemine geçebilirsiniz. Umarım, resimleriniz doğru boyutta ve kalitededir. Biçim ve dosya adının doğru olduğundan emin oldunuz. Yüklemeden sonra WordPress sizden ek bilgi isteyecektir. Meta bilgileri atlamayın; Görsellerinizi kolayca düzenleyebilmeniz ve SEO'ya hazırlanabilmeniz için görsellerinizle ilgili ayrıntıları doldurun.

Başlık, açıklama, alternatif metin ve başlık

Tekniklerle ilgilenirken SEO'yu da unutmamalısınız. Medyanıza her zaman başlığı ve açıklamayı ekleyin. Bu, WordPress medya yönetiminde size yardımcı olacak ve daha iyi SEO için de çalışacaktır. Ayrıca, resminizi düzgün göremeyen ziyaretçiler için gösterilecek alt etiketini de unutmayın. Bu sadece kullanıcılarınız için değil, aynı zamanda SEO konusunda da size yardımcı olacaktır. Sayfanız daha iyi sıralanacak ve kullanıcılar yeni resimlerinizi daha kolay bulabilecek.

Altyazılara her zaman ihtiyacınız olmayacak olsa da, ek açıklamalar gerektiren resimler (örneğin ekran görüntüleri) için altyazı eklediğinizden emin olun.

WordPress ile görüntüleri düzenleyin

Bir resmin hala daha fazla düzenlemeye ihtiyacı olduğunu fark ederseniz, dosyayı yükledikten sonra bile WordPress'in bunu yapmanıza izin verdiğini bilmelisiniz. Yüklediğiniz resimleri döndürmeyi, kırpmayı ve ölçeklendirmeyi değiştirin . Hatta yalnızca bir küçük resmi veya diğer tüm boyutları düzenleyebilirsiniz. WordPress'in yerel düzenleyicisi çok basittir, ancak zaman zaman tasarruf edebilirsiniz.

Tüm küçük resimleri yeniden oluştur

Önceki tekniklerin çoğu, henüz yüklemek üzere olduğunuz yeni görüntü dosyalarında size yardımcı olacaktır. Peki ya WordPress sitenize yüklenmiş binlerce dosyanız olmasa da yüzlerce dosyanız varsa? Merak etme; yine de bu görüntüleri optimize edebilir ve boyutlarını değiştirebilirsiniz.

Hızlı bir düzeltme için, bir milyondan fazla kullanıcı tarafından kullanılan ücretsiz Küçük Resimleri Yeniden Oluştur eklentisi ilginizi çekebilir. Görüntüler üzerinde daha fazla kontrol istiyorsanız, bu makalenin sonraki satırlarında size göstereceğimiz görüntü optimizasyonu için en iyi WordPress eklentilerinden bazılarına göz atmalısınız.

WordPress eklentilerini kullanın

Elbette sitenizdeki görselleri optimize etmenize yardımcı olabilecek düzinelerce WordPress eklentisi var. Görüntüleri optimize etmek için en iyi WordPress eklentilerini görmek için aşağı kaydırın.

Lazy Load görüntüleri gerektiğinde

Bazen resimlerin kalitesi, boyutlarından çok daha önemli olabilir. Bu, çoğunlukla fotoğraflarının birinci sınıf olmasını isteyen fotoğrafçılar için geçerlidir. Dosyaların boyutunu ve kalitesini düşürme riskini alamazlar. Yine de bu, optimizasyonu unutmanız gerektiği anlamına gelmez. Bu durumda WordPress için görüntüleri optimize etmek için tembel yüklemeyi düşünmelisiniz.

Tembel yükleme, görüntüleri yalnızca kullanıcılar ihtiyaç duyduğunda yükleyen bir tekniktir ( üzerlerine ilerleyin). Örneğin, bir makaleye yirmi adet yüksek kaliteli fotoğraf yüklediyseniz, sitenizi inanılmaz derecede yavaşlatırlar. Ancak görüntüleri tembelce yüklerseniz, makale şimşek hızında olur ve fotoğraflar yalnızca gerektiğinde - bir kullanıcı onlara ulaştığı anda - yüklenir.

Duyarlı resimlere sahip olun

WordPress temalarının çoğu duyarlı olsa da, bu mutlaka resimlerinizin de duyarlı olduğu anlamına gelmez. Küçük bir ekrana büyük bir resim yüklenmesini istemediğiniz için siteniz için ek resim boyutları kaydetmeniz gerekecektir. Temanız duyarlı görseller kullanmıyorsa, bu iş için bir profesyoneli işe almayı düşünün - göründüğü kadar kolay değildir.

Sosyal medya için görüntüleri optimize edin

Görsellerinizin sosyal medyada iyi göründüğünden emin olmak istiyorsanız, fazladan bir adım atmanız ve meta etiketleri ve şema işaretlemesini optimize etmeniz gerekecektir.

Yoast gibi bir SEO eklentisi kullanıyorsanız ayarları kontrol etmeyi unutmayın. Örneğin Yoast, sosyal medya ile ilgili birkaç şey ayarlamanıza izin verecek. Bu nedenle, SEO -> Sosyal'e gidin ve Facebook, Twitter, Google+ ve Pinterest'teki bilgileri girin.

Daha fazlasını istiyorsanız ve ek sosyal medya web siteleri için görüntüleri optimize etmek istiyorsanız, WPSSO – Doğru Meta Etiketler + Sosyal Paylaşım Optimizasyonu ve SEO eklentisi için Şema İşaretleme'ye göz atın.

WordPress'in JPEG görüntülerini sıkıştırma şeklini değiştirin

WordPress web sitenize bir sürü JPEG resim yüklüyorsanız, orijinal kalitelerini kaybettiklerini fark etmiş olabilirsiniz. WordPress'in suçlu olup olmadığını merak ettiyseniz, şimdi cevabınızı alacaksınız - evet, öyle!

Bir görüntüyü JPEG formatında yüklediğinizde, WordPress sıkıştırmayı otomatik olarak değiştirir ve görüntünün kalitesini kaybetmesini istediğinize karar verir. Daha açık olmak gerekirse, WP, JPGE'lerinizde %90 sıkıştırma kullanır. Resimleriniz yalnızca küçük resimler olarak kullanılmak veya bir gönderide gösterilmek için oradaysa bu harika, ancak fotoğraflarınızı yüklüyorsanız, mümkün olduğunca iyi olmalarını istiyorsunuz, değil mi?

Neyse ki, bunu değiştirmek için yalnızca bir kod satırına ihtiyacınız olacak.

JPEG görüntü sıkıştırmasını durdurun:

JPEG resimlerinizin sıkıştırılmasını istemiyorsanız, aşağıdaki kodu kopyalayıp function.php dosyanıza yapıştırmanız yeterlidir:

 add_filter('jpeg_quality', function($arg){return 100;});

Değişiklikleri kaydetmeyi unutmayın ve yeni resimler yüklemeye hazırsınız.

Öte yandan, görüntüler sizin için o kadar büyük bir anlaşma olmayabilir. Bu nedenle, bunların daha da sıkıştırılmasını ve sitenizi yüklerken size zaman kazandırmasını isteyebilirsiniz. Bu kod satırındaki son numarayı değiştirirseniz, yeni yüklenen resimlerin kalitesini değiştirmiş olursunuz.

JPEG görüntülerini daha da sıkıştırın:

Sayı ne kadar düşük olursa, o kadar fazla görüntü sıkıştırılır. Örneğin, bu JPEG'leri daha da sıkıştırmak için şu koda ihtiyacınız olacak:

 add_filter('jpeg_quality', function($arg){return 80;});

unutma; varsayılan sıkıştırma seviyesi 90'dır.

WordPress için en popüler görüntü optimizasyon eklentileri

Bu makalenin başında, sitenizi hızlandırmanız ve SEO'yu geliştirmeniz için görüntüleri WordPress için nasıl optimize edebileceğinizden bahsettik. Gördüğünüz gibi, kullanabileceğiniz birkaç farklı yöntem var. Blogunuza yüklemeden önce bile resimlerle ilgilenmek önemlidir. Ancak resimler sitede zaten varken, her bir resmi ayrı ayrı yeniden optimize etmek ve sonra tekrar yüklemek imkansız hale gelebilir.

Merak etme; ilk etapta kimse senden bunu beklemiyor. Size WordPress için en popüler görüntü optimizasyon eklentilerini göstermek üzere olduğumuz için önümüzdeki dakikalarda bizimle kalın.

Görüntüleri optimize etmek için listeden eklentiyi seçmeniz yeterli olacaktır. Bunu yapılandırmanız ve eklentinin sizin için yapacağı şeyleri seçmeniz gerekecek. Bundan sonra, medya dosyalarınızı düzenlemeye başlayabilirken, rahatlayabilir ve işi seçtiğiniz eklentiye devredebilirsiniz.

Aşağıdaki eklentiler, sahip olduğunuz herhangi bir WordPress sitesindeki resimleri sıkıştırmanıza yardımcı olacaktır. Sitenin daha hızlı yüklenmesini sağlayacak ve sonuçta SEO'yu geliştirmenize yardımcı olacaklardır.

WP Smush eklentisi

FİYAT: Ücretsiz

700.000'den fazla aktif yükleme ile WP Smush, WordPress için en iyi görüntü optimizasyon eklentilerinden biri olmalıdır. Farklı sıkıştırma teknikleri kullanarak görüntüleri hızla optimize edebilir. WP Smush ile görüntüleri sıkıştırmanın en güzel yanı, görüntülerin kalitesinden bir şey kaybetmemesidir. Bize inanmıyor musun? Eklentiyi test edin.

WordPress için resim hazırlamaktan bahsettiğimizde, yeniden boyutlandırmanın optimizasyon sürecinin çok önemli bir parçası olduğundan bahsetmiştik. Bu eklenti ile, WP Smush maksimum boyutları ayarlamanıza izin verdiği için bunun için endişelenmenize gerek kalmayacak. Bunu yaptıktan sonra, tüm büyük resimler, siz onları kitaplığa eklemeden önce otomatik olarak küçülür.

Bu harika eklenti JPEG, GIF ve PNG dosyalarıyla çalışabilir. Tüm dizinlerinizle çalışır, eklerle otomatik olarak ilgilenir ve hatta çoklu sitede çalışır. Her görüntü üzerinde manuel olarak çalışabilir veya elli tanesini toplu olarak düzenleyebilirsiniz. Daha da iyi sonuçlar ve daha fazla seçenek istiyorsanız, WP Smush PRO'ya göz atın.

EWWW Görüntü Optimize Edici eklentisi

FİYAT: Ücretsiz

Komik ismin arkasında, WordPress için en popüler görüntü optimizasyon eklentilerinden biri var. Tıpkı daha önce bahsedilen gibi, EWWW Image Optimizer, görüntülerinizi kalitelerini etkilemeden sıkıştırabilir. Eklentinin sitenizi saniyeler içinde hızlandırabileceğini düşündüğünüzde, onu indirme yolunda olacaksınız. Bunu yaptığınızda, görüntüleri toplu olarak optimize edebileceksiniz ve GRAND FlaGallery, NextCellent ve NextGEN gibi galeriler kendi Toplu Optimize sayfalarına bile sahip olacaklar.

WordPress'te WP_Image_Editor sınıfını kullanan tüm resimler otomatik olarak optimize edilirken, sihri diğerlerinde manuel olarak çalıştırabilirsiniz. Optimize etmek istediğiniz klasörleri seçmenizi seviyoruz. Bununla ilgili daha fazla ayrıntı ve sınıfı hangi eklentilerin kullandığı için lütfen WordPress deposundaki resmi EWWW Image Optimizer sayfasını açın.

JPEG ve PNG resimlerini sıkıştır eklentisi

FİYAT: Ücretsiz

WordPress logosunu tutan sevimli küçük panda, bu eklenti hakkında daha fazla bilgi edinmek istemenizi sağlamıyorsa, ne yapacağını bilmiyoruz. Ve panda tanıdık geliyorsa, bunun nedeni TinyPNG web sitesinde görüntüleri sıkıştırmanıza yardımcı olanla aynı olmasıdır. Evet, görünüşe göre hayvan düşündüğümüzden daha çok yönlü. Ama eklentiye odaklanalım.

Bu eklentiyi kullanırsanız, Panda resimlerinizi otomatik olarak optimize edecektir. Her yenisini yüklediğinizde, eklenti devralacak ve işini yapacak. Yine de, tek tek resimleri optimize edebilir veya bunu yalnızca medya kitaplığına giderek toplu olarak yapabilirsiniz.

Sıkıştırılmış JPEG ve PNG görüntüleri, animasyonlu PNG'leri bile destekler, çoklu sitede mükemmel çalışır, WooComerce uyumludur ve WP Offload S3 ile sorun yaşamaz.

Eklentinin en güzel yanı, tüm resimler için maksimum genişlik ve yükseklik niteliklerini ayarlamanıza izin vermesidir. Meta verileri ne yapacağı konusunda endişeleniyorsanız, endişelenmeyin; panda tüm bilgileri olduğu gibi tutacaktır.

Dosya boyutu sınırı yoktur, bir pano widget'ı ayarlayabilirsiniz ve WordPress mobil uygulamasıyla bile çalışır. Tüm bunlardan dolayı, JPEG ve PNG görüntüleri sıkıştır 100.000'den fazla etkin yüklemeye sahiptir ve WordPress için en iyi görüntü optimizasyon eklentileri listesinde bir yeri hak eder.

Imsanity eklentisi

FİYAT: Ücretsiz

Bu eklentinin kapak resmi sizi korkutup kaçırsa da, bir saniye ayırın ve Imsanity'nin tüm özelliklerine bakın. Oh, eklentinin adı bile kulağa çılgınca geliyor, değil mi? Eklentinin adını anladığınızda, sunabileceği çok şey olduğunu göreceksiniz.

Imsanity, görüntüleri otomatik olarak ölçekleyebilir, maksimum boyutları ayarlamanıza olanak tanır ve hatta toplu yeniden boyutlandırma seçeneği sunar. Blogunuzda optimizasyon gerektiren yüzlerce resminiz varsa bu önemlidir.

Bu ücretsiz eklenti, eklenti ayarlarıyla çok fazla uğraşmak istemiyorsanız harika bir seçenektir. Tek yapmanız gereken Imsanity'yi kurmak ve etkinleştirmek, birkaç seçenek belirlemek ve bunu unutabilirsiniz; görüntü optimizasyonuna doğru kendi yolunu yönetecektir.

BMP görüntülerini JPG'ye dönüştürmenize izin veren seçeneği sevdik. Bir süre önce yanlışlıkla yüklediğiniz çok sayıda BMP dosyanız varsa, bu bir cankurtaran olacaktır.

ShortPixel Image Optimizer eklentisi

FİYAT: Ücretsiz

30.000'den fazla etkin yükleme ile ShortPixel Image, WordPress için hala en popüler görüntü optimizasyon eklentilerinden biridir. Eklenti özelliklerle doludur ve optimize edilecek çok sayıda görseli olan siteler için olmazsa olmazlardan olacaktır.

ShortPixel Image Optimizer yalnızca sizin için JPG, PNG, GIF ve PDF belgelerini optimize etmekle kalmaz, aynı zamanda herhangi bir JPEG, PNG veya GIF görüntüsünü WebP'ye dönüştürmenize de izin verir. Eklenti, diğer galeri eklentileriyle iyi çalışır ve sitenizin HTTP veya HTTPS kullanması önemli değildir. Görüntülerden EXIF ​​verilerini kaldırmanıza izin verir (fotoğrafçıların sahip olmayı seveceği bir şey).

Eklenti, önceden optimize edilmiş görüntüleri tanır, böylece gerektiğinde bunları atlar. Otomatik optimizasyona izin verebilir veya vermeyebilir ve bu harika eklentiyle çok daha fazlasını yapabilirsiniz. Tüm özellikleri görmek için depodaki resmi sayfaya göz atın.

Optimus – WordPress Görüntü Optimize Edici

FİYAT: Ücretsiz

Daha önce bahsedilen eklenti gibi, Optimus da resimlerinizi WordPress için optimize edecek ve bunu resimlerinizin kalitesini etkilemeden yapacaktır. Eklentinin işleri otomatik olarak yapmasına izin verebilir veya seçeneği kapatabilir ve yalnızca gerektiğinde görüntüleri optimize edebilirsiniz.

Optimus çoklu sitede çalışır, WordPress e-ticaret sitelerine yabancı değildir ve WordPress Mobil Uygulamaları ve Windows Live Writer için tamamen optimize edilmiştir. Bir kod satırına dokunmanıza gerek kalmadan sitenizi hızlandıracaktır. Eklenti çok daha fazlasını sunuyor, ancak premium sürüme kaydolmanız gerekecek. Daha fazlasını görmek için lütfen WordPress eklentileri deposundaki resmi sayfaya gidin.

WordPress'te videolarınız ve resimleriniz için tembel yükleme ekleyin

Web sitenize çok sayıda video ve resim materyali eklemeye başladığınızda, daha yavaş yüklenmeye başlayacağı açıktır. Nereden gelirlerse gelsinler, videolar ve büyük resimler sitenizde ağır bir yük görevi görecek ve ziyaretçilerinizin tüm içeriği yüklemek için gerekenden çok daha uzun süre beklemesine neden olacaktır. WordPress ile bu çok önemli olmamalı ve durumu nasıl kolayca düzeltebileceğiniz aşağıda açıklanmıştır.

PHP'yi nasıl kullanacağınızı biliyorsanız, Zarif Temalar'da meslektaşlarımız tarafından yazılan sonsuz kaydırma ve resimler için tembel yükleme ekleme hakkında harika bir makale var.

Değilse, önümüzdeki birkaç satırda sitenizin daha hızlı yüklenmesini sağlayacak en popüler tembel yükleme eklentilerinden bazılarından bahsedeceğiz. Ve bir eklenti yüklemek ve birkaç hızlı adımda kurmak dışında fazla bir şey yapmanıza bile gerek kalmayacak.

Videolar için Tembel Yükleme

FİYAT: Ücretsiz

Çok fazla Youtube ve Vimeo videonuz varsa, bu eklentiyi kurmayı düşünmelisiniz. Eklentiyi kurduktan sonra, videonuza bir resim yerleştirecek ve bu nedenle web siteniz çok daha hızlı yüklenecektir. Bir ziyaretçi bir videoyu kaydırdığında, bu resim üzerinde bir "oynat" düğmesi ile gösterilecektir. Bir tıklamanın ardından video yüklenmeye ve oynatılmaya başlayacaktır. Geliştiricinin sitesinde basit bir demo görüntülenebilir.

WP YouTube Lyte

FİYAT: Ücretsiz

Bu eklenti işini hızlı ve kolay bir şekilde yapacak. Yükledikten sonra, Youtube videonuza bir bağlantı ekleyin veya bir tane eklemek için bir kısa kod kullanın. Normal bir video, oynatma listesi veya yalnızca seçilen videodan ses ekleme arasında seçim yapabilirsiniz. Bundan sonra, Youtube videolarınız üzerinde tembel yüklemeyi sağlayacak bir görüntü alacak. Videonuzu veya sesinizi başlatmak için resme tıklamanız yeterlidir.
Geliştiricinin sitesinde bir demo görün.

a3 Tembel Yük

FİYAT: Ücretsiz

Bu, mobil sitenize adanmıştır. Mobil cihazlarda ziyaretçilerinize göstermek istediğiniz çok sayıda görsel ve/veya videonuz varsa a3 Lazy Load'a bir göz atmalısınız. Resimlerinize ve videolarınıza tembel yükleme eklemenize izin verecek ve eklenti, kullanıcılara yüklenen içerikte gezinirken görünecek geçiş efektlerini seçmenize bile izin verecek.

Yönetici alanında, tembel yüklemek istediğiniz içeriği kolayca açıp kapatabilirsiniz. Açık olanlar için içerik, yalnızca bir ziyaretçi içeriğin o bölümüne kaydırdığında yüklenir.
1000 resim içeren güzel bir demo var - her biri yalnızca siz ona kaydırdığınızda yüklenir. Bu eklenti tembel videoları da yüklediğinden, yukarıdaki bağlantıya tıklayarak görebileceğiniz bir video demosu var.

bj tembel yük

FİYAT: Ücretsiz

Videolar için desteğe ihtiyacınız yoksa ve yalnızca resimlerinizin tembelce yüklenmesini istiyorsanız, bu WP eklentisine göz atmalısınız. Kurulduktan ve ayarlandıktan sonra, resimlerinizi, küçük resimlerinizi, Gravatar resimlerinizi ve hatta iframe'lerinizi bir yer tutucu ile değiştirir. Daha önce bahsedilen bir eklentiye benzer şekilde, içeriği yalnızca bir kullanıcı ona geldiğinde yükler.

Tembelce yüklemek istediğiniz resimler veya videolar olsun, yukarıda belirtilen eklentilerden biri size birkaç saniye içinde yardımcı olacaktır. Hepsi ücretsizdir, bu nedenle eklentilerden en az birini denememek ve omuzlarınızın ne kadar ağırlığını alacağını görmek için hiçbir mazeret yoktur. Tabii ki, aynı işleve sahip başka birçok eklenti var ve hepsine göz atıp denemekte özgürsünüz.

Çekici bir şekilde önce ve sonra görüntüleri görüntüleyin

Eminiz ki daha önce/sonra resimlerinin birçok örneğini görmüşsünüzdür. Sizi bilmem ama “öncesi ve sonrası” ibaresini gördüğümüzde aklımıza gelen ilk şey, insanların bir antrenman programından önce ve sonra vücutlarını gösterdikleri fitness antrenman programıdır.

Bunu düşünürseniz, çoğu web sitesi farklılıkları göstermek için basit bir yaklaşım kullanır - her iki görüntüyü de alır ve bunları yan yana, hatta üst üste yerleştirir. Aynı sonucu istiyorsanız, bunu nasıl yapacağınızı zaten bildiğiniz için bu makaleyi okumazsınız.

Peki ya bu sorunu önce/sonrasında çözmenin görsel olarak çarpıcı bir yolu olduğunu ve bu sorunun hemen elinizin altında olduğunu söylesek? Pekala, bir kurulum var ve bir kurulumdan sonra geliştiricileri öveceksiniz çünkü nihai sonuç gerçekten çok harika.

Yirmi yirmi

FİYAT: Ücretsiz

Twenty Twenty, WordPress eklenti deposundan ücretsiz olarak indirebileceğiniz bu harika eklentinin adıdır.

Eklenti, bir görüntüyü diğerinin üzerine yerleştirmenize ve bir kaydırıcıyla oynamanıza izin vererek görüntüyü gizleyip/açığa çıkarabilmenizi sağlar. Lütfen demoya bakın ve neden bahsettiğimizi göreceksiniz.

Tamam, şimdi bu küçük eklentiye bağımlı olduğunuzda, bu çarpıcı efekti nasıl oluşturacağınızı görelim. Demo efektini yeniden oluşturmak nispeten kolay olsa da, yine de temel HTML'de yolunuzu bilmeniz gerekecek. Hadi gidelim:

1. Yeni bir gönderi oluşturun veya mevcut olanı açın
2. Gönderiye iki resim ekleyin. Bir Görsel Düzenleyicide çalışıyorsanız, resmi üst üste görmelisiniz. Bir Metin Düzenleyicide çalışıyorsanız, buna benzer bir kod görmelisiniz:

 <a href="image1.jpg"><img kaynak=
"http://www.loactionoftheimage.com"width="700" 
yükseklik="200" /></a>

<a href="image2.jpg"><img kaynak=
"http://www.loactionoftheimage.com"width="700" 
yükseklik="200" /></a>

3. İlk görüntüden önce [twentytwenty] etiketini girin
4. İkincisinden sonra [/twentytwenty] etiketini girin

Metin Düzenleyicinizde buna benzer bir şey bulmalısınız:

5. En iyi sonuçları elde etmek için resimlerinizin aynı boyutta olduğundan emin olun.
6. Gönderinizi önizleyin veya yayınlayın ve görsel olarak çarpıcı öncesi ve sonrası resimlerinizin keyfini çıkarın

Etkileşimli görüntüler nasıl oluşturulur - çizin, açıklamalar ve bağlantılar ekleyin

Bugün, multimedya olmadan bir web sitesi çalıştırmak zor. Resimler, videolar ve müzik hemen hemen her web sitesinin bir parçasıdır. Ortalama bir İnternet kullanıcısı görsel uyaranlara büyük ölçüde bağımlıdır, bu nedenle sitenizin görsel ve etkileşimli bölümleriyle ilgilenmeniz gerekir. Resimli makaleler, resimsiz olanlara göre %94 daha fazla görüntüleniyor. Ayrıca, web sitelerindeki multimedyanın içerik pazarlama yatırım getirisini artırabileceği zaten bilinen bir gerçektir.

Sizi sitenizdeki resimlerle ilgilenmeye ikna etmeye gerek olmadığını umuyoruz. Makalelerde görsel kullanmasanız bile (ki bunu yapmalısınız), öne çıkan görselleri kullanıyorsunuz, değil mi? WordPress sitenizdeki resimleri yönetmenize yardımcı olabilecek pek çok galeri eklentisi vardır, fotoğrafçılıkla ilgili temalara sahip olabilir, Instagram'ı WordPress sitenize bağlayabilir ve çok daha fazlasını yapabilirsiniz. Peki ya daha etkileşimli içerik oluşturmak isteseydiniz?

Yeni başlayanlar için, kullanıcılarınızın seveceği bir öncesi-sonrası görüntü efekti eklemek ilginizi çekebilir. Automattic'in VR'yi WordPress.com'a getirmesinden sonra daha popüler hale gelen WordPress'teki Sanal Gerçekliği unutmayın. Yine de bir şeyler eksik. Tıklanabilir parçalarla etkileşimli görüntüler yapmak mümkün müdür? Evet, bu mümkün ve size bunun ne kadar eğlenceli ve kolay olduğunu göstermek üzereyiz.

Dikkat çekmek

FİYAT: Ücretsiz

Bu eklentiyle ilgili beğeneceğiniz ilk şey, tamamen ücretsiz olmasıdır! Tıpkı WordPress deposundaki diğer eklentilerde olduğu gibi, birkaç dakika içinde indirebilir, yükleyebilir ve etkinleştirebilirsiniz. Ücretsiz sürüm, tek bir etkileşimli görüntü ile çalışmanıza izin verecektir. Daha fazlasını istiyorsanız, PRO sürümünü seçmeniz gerekecek, ancak bunun hakkında daha sonra konuşacağız.

Eklenti duyarlıdır ve etkileşimli görüntülerin herhangi bir cihazda düzgün bir şekilde görüntülenmesi konusunda endişelenmenize gerek yoktur. Görüntünün yalnızca ekran boyutuna göre ölçeklenmesi değil, aynı zamanda çoğu modern ve eski tarayıcıda (masaüstü ve mobil) çalışacaktır. Draw Attention, yeni tarayıcılarda görüntülendiğinde tuval öğelerini kullanır, ancak daha eski bir tarayıcıya yüklerseniz görüntü haritalarına geri döner.

Özellikleri

Size bu basit eklentinin ne kadar güçlü olduğunu gösterecek bir örneğe geçmeden önce, Draw Attention'dan ne bekleyeceğinize bir bakalım:

• Çiz - Bir resim yükledikten sonra üzerine şekiller çizme şansınız olacak. Resminizin seçilebilir/tıklanabilir hale gelecek herhangi bir bölümünü seçin
• Renkler – Sıcak noktaları site tasarımınıza uygun hale getirmek için renkleri özelleştirin
• Fareyle üzerine gelindiğinde vurgula – Bir kullanıcı fareyle seçilen bölümün üzerine gelirse görüntünün başka bir bölümünü gösterin
• Daha fazla bilgi göster – Resmin seçilen kısmı hakkında daha fazla bilgi göster
• URL'ye git - Seçimi tıklarlarsa kullanıcıları herhangi bir URL'ye yönlendirin

Örnek – Etkileşimli Hawaii haritası

Draw Attention ile tam olarak neler yapabileceğinizi size göstermek için demo sitesindeki örneği kullanacağız. Öyleyse, eklentiyle oluşturulduğunda etkileşimli bir Hawaii haritasının nasıl göründüğünü görelim.

Yapmanız gereken ilk şey Hawaii adalarının bir görüntüsünü bulmak. Dikkat Çek -> Resmi Düzenle'ye gittikten sonra, resmi sağ kenar çubuğundaki alana yüklemelisiniz. Görüntü yüklendikten sonra eğlence başlayabilir.

Burada vurgulamalar için renkleri (renk, kenarlık, opaklık vb.) seçebilir, “daha ​​fazla bilgi kutusu”nu (resim, başlık, metin rengi vb.) şekillendirebilirsiniz. Görüntü için her rengi manuel olarak seçmek istemiyorsanız, sağ kenar çubuğundan hızlıca bir renk şeması seçebilirsiniz.

En büyülü kısım, Hotspot Areas ayarları ekranında gerçekleşir. Burada resminizin tam boyutta yüklenmesini sağlayabilirsiniz. Şimdi tek yapmanız gereken çizime başlamak ve yeni bir etkin nokta oluşturmak. İstediğiniz kadar puan ekleyebilirsiniz, yani istediğiniz kadar kapsamlı seçimler oluşturabilirsiniz. Çok sayıda etkin nokta oluşturabilirsiniz ve her birinin kendi ayarları olabilir.

Yani bu örnekte adalardan birini seçmelisiniz. Ada için bir başlık seçin, bir açıklama ve bir kullanıcı etkin noktanın üzerine geldiğinde gösterilecek fazladan bir resim ekleyin (yukarıda gösterilen GIF resminin sağ kısmı).

Etkileşimli olmasını istediğiniz adaların her biri için işlemi tekrarlamalısınız. Bağlantı noktalarınızı hazır hale getirdikten sonra, sağ taraftaki kısa kodu kopyalamanız yeterlidir. Kısa kodu bir gönderiye, sayfaya, widget'a veya yeni etkileşimli haritanızı göstermek istediğiniz yere yapıştırın ve işiniz bitti! Kullanıcıları seçimlere tıkladıktan sonra başka bir sayfaya yönlendirmek istiyorsanız, açıklama yerine URL'yi seçmeniz yeterlidir. Bu kadar kolay!

Profesyonel sürüm

Ücretsiz sürüm, yalnızca bir görüntüye ihtiyacınız varsa mükemmel olsa da, PRO sürümü sitenizde istediğiniz kadar etkileşimli görüntüye sahip olmanızı sağlar. Bu dikkate alınması gereken en önemli şey olsa da, PRO sürümü size birden fazla görüntüden daha fazlasını sağlayacaktır.

Düzen Seçenekleri özelliği, resmin seçilen bölümleri hakkında daha fazla bilgi göstermenizi sağlar. Örneğin, bilgileri bir ışık kutusunda veya kullanıcı fareyle görüntünün seçilen bölümünün üzerine getirdikten sonra açılan basit bir araç çubuğunda gösterebilirsiniz.

Ayrıca önceden tanımlanmış yirmi renk paleti vardır, böylece her rengi manuel olarak özelleştirmeniz gerekmez. PRO sürümü, tek bir site lisansı için 74 dolara mal olacak, ancak birden fazla etkileşimli görüntüye ihtiyacınız varsa, bu hiç de zahmetsiz olacaktır.

Ek görüntü boyutları nasıl yeniden oluşturulur

WordPress temanıza yeni resim boyutlarını kaydetmek nispeten kolaydır. Sisteminize resimlerinizin ne kadar büyük olması gerektiğini söyledikten, isimlendirdikten ve nasıl kırpılacağına karar verdikten sonra, resimleri istediğiniz yere dağıtmakta özgürsünüz. Peki ya eski görüntüler?

Size gösterdiğimiz tekniklerden birini kullandıysanız, çimi yeni görüntülere hazırladınız. İster küçük resimler için yeni kayıt resim boyutlarını kullanın ister yazarların bunları gönderilerde kullanmasına izin verin, yeni kurallar sadece function.php dosyasında değişiklik yaptıktan sonra yüklenen resimler için geçerlidir . Eski görüntüleri değiştirmek için Küçük Resimleri Yeniden Oluştur eklentisini kullanmanızı öneririz.

Küçük Resimleri Yeniden Oluştur:

FİYAT: Ücretsiz

1. Eklentiler->Yeni Ekle'ye gidin
2. “Küçük Resimleri Yeniden Oluştur” için arama yapın
3. Eklentiyi kurun ve etkinleştirin
4. Araçlar->Yeniden Oluştur.Küçük Resimler'e gidin

Tüm resimlerinizi yeniden boyutlandırmak istiyorsanız, “Tüm Küçük Resimleri Yeniden Oluştur” düğmesine tıklayın ve eklentinin zor işi yapmasını bekleyin.

Yeniden boyutlandırılacak görüntüleri görmek istiyorsanız veya yalnızca bazı görüntüleri yeniden boyutlandırmak istiyorsanız, “Toplu İşlemler” altında yeni bir seçenek ve her bir resmin yanında bir tane bulacağınız Medya Kitaplığınıza gidin. galeri.

Eklentinin iyi yanı, orijinal resimlerinizi silmemesidir. Yalnızca temanızda kullanabileceğiniz yeni resim boyutları oluşturacak, orijinal olanları daha sonra kullanmanız için bırakılacak veya ihtiyacınız olmadığına karar verirseniz manuel olarak sileceksiniz.

Bu kadar. Yeni küçük resimlerinizin keyfini çıkarın veya aynı şeyi yapabilen Simple Image Sizes eklentisine göz atın.

jQuery ile genişlik ve yükseklik görüntü özelliklerini kaldırın

Bir WordPress gönderisine resim eklerken, sistem otomatik olarak yükseklik ve genişlik özelliklerini resme ekler. That's usually a good thing, but there are times when you won't like the fact that every image gets those attributes.

If you want to strip the attributes right at the point of upload, you can do that through a simple function which we showed you last time.

But if you read the article or tried the function yourself, you've noticed that it only affects images uploaded after the function was installed into your WP system. If you already have a database full of posts with inserted images, the aforementioned function won't help you much with your old image attributes.

Since you probably can't go through each and every image manually and delete width and height one by one, you are probably in a need of another function which will strip those attributes for all existing images embedded in your posts. In that case, you're in the right spot 'cause we're about to show you a simple way of automatically removing width and height image attributes with few lines of jQuery code. Don't get scared with the previous phrase – you don't even have to know what jQuery is, just follow the next three steps and you'll be done in a jiffy.

Remove width and height image attributes:

1. Open header.php file from your theme folder
2. Copy and paste this code anywhere between <head> and </head> tags:

 <script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
$('img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
});
});
</script>

3. Değişiklikleri Kaydet

Ve işin bitti! The code will do its magic after you open a post which contains an image and will remove width and height tags from it.

How to create custom image sizes in Media Uploader

If you are using Media Uploader to deal with images in WordPress, you have probably seen numerous options for images. Between many, you are able to choose an image size which you can send to your article.

There are the thumbnail, medium, large and full-size options to choose from, but all those options have predefined values. So, if you're using a custom theme, more often than not you are stuck with changing width and height for each image over and over again.

Actually, you don't have to do that. There is a neat little function called add_image_size() which is a great tool for developers. And after this article, you will find it useful as well.

Let's say your theme has a custom width and you want to easily embed images to fit in there perfectly. Let's say that width is 666px (we won't go into why you have set the width to this number, it's your choice). To do that, you need to add an extra radio button to Media Uploader. With the code below, you'll be adding one more size which is the half size of the original one.

1. Functions.php dosyanızı açın
2. Copy and paste this piece of code:

 function custom_image_sizes() {
add_image_size( 'one-size', 333, 333, true );
add_image_size( 'another-size', 666, 666, true );
}

add_action( 'init', 'custom_image_sizes' );

function show_image_sizes($sizes) {
$sizes['one-size'] = __( 'Custom Size 1', 'isitwp' );
$sizes['another-size'] = __( 'Custom Size 2', '
isitwp' );
return $sizes;
}

add_filter('image_size_names_choose', 
'show_image_sizes');

3. Değişiklikleri Kaydet
4. Try adding an image from your Media Uploader where you should see your new size options under the “Attachment Display Settings”

Create automatic screenshot of any website and publish it as image in your post

If you want to display a thumbnail of a website, you would have to go to the website, print screen it or take a screenshot with a program or a browser add-on. Then you would need to modify the image, cut it to the right size and upload it to your WordPress so that you can use the screenshot in a post.

If you don't have to take that snapshot every now and then, it won't be a problem, but if you're using screenshots of different websites more often, you will be happy to hear that there is an awesome function which will save you time and your nerves.

In this part of the guide, we are about to show you the complete function which creates a shortcode that you can use for taking snapshots of any web page you want.

Create automatic screenshot:

1. Functions.php'yi açın
2. Aşağıdaki kodu kopyalayıp yapıştırın:

 function wp_webscreen($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://www.firstsiteguide.com',
"alt" => 'wploop',
"w" => '600', // width
"h" => '450' // height
), $atts));

$img = '<img alt="' . $alt . '" src="' . $snap . 
'' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
return $img;
}
add_shortcode("screen", "wp_webscreen");

3. Change default variables in the array
4. Değişiklikleri Kaydet

This function creates a shortcode that you can easily use anywhere on your WordPress website. Whether you want to use the screenshot of a web page in a post, sidebar widget or your footer, for example, simply c/p the shortcode in the right spot:

[screen url=”http://www.firstsiteguide.com” alt=”fsg” w=”600″ h=”450″]

What's great about this function is that it saves the image as dynamic URL which means that once you create a snapshot with the shortcode, it will automatically refresh itself in the future and always show the current looks of the website specified in the shortcode.

Note that you can change the parameters of the shortcode directly from it. You don't have to modify the code in the functions.php file if you want to take the snapshot of another URL or to take the snapshot in a different dimension.

Example:

Let's say that you want to take a screenshot of Google and make it 200×400 pixels big:

[screen url=”http://www.google.com” alt=”Google” w=”200″ h=”400″]

You can make everything even easier by saving the shortcode into a button so that you can insert it into a post with a single click of a button.

Çözüm

You don't have to install all plugins and functions we mentioned in order to improve the images on your WordPress site. But we hope that you have found at least a few tips that will help you to optimize images or make them better in any way.