Sayfaya Resim Ekleme ve Otomatik Optimizasyon

Web sitenizin gövde alanına ve modüllere JPG, GIF ve PNG formatında görseller yükleyebilirsiniz. Kullanacağınız resim formatını seçerken; Gerçek dünyadan alınmış, bir fotoğraf makinesiyle çekilmiş tüm renkleri içeren görseller için JPG formatını, çizim ve bilgisayar ortamında yaratılmış, gerçek dünyaya oranla daha az renk içeren grafik çalışmalar için PNG formatını, hareketli resimler yüklemek için ise GİF formatını kullanmalısınız.

Bulutpress ile ürettiğiniz tüm web sitelerinde, görselleriniz sitenize yükleme esnasında gelişmiş resim sıkıştırma algoritmaları kullanılarak görüntü kalitesi bozulmadan olabilecek en düşük dosya boyutuna kadar sıkıştırılır.

Bulutpress'i rakiplerinden ayıran en üstün özelliklerinden biri olan bu sıkıştırma teknolojisi, ciddi anlamda bant genişliği avantajı yaratır. Resim optimizasyonu yavaş mobil ağlarda web sitelerinin ve görsellerin çok hızlı yüklenmesini sağlar. Bu sıkıştırma algoritması da çok önemli bir SEO avantajı sunar. Başta Google olmak üzere tüm arama motorları, hızlı açılan web sitelerini yüksek sıralama ile ödüllendirmektedir. Ayrıca yavaş açılan bir web tasarımı da ziyaretçiyi kolayca web sitenizden uzaklaştırmaktadır. Bilgisayarınızda bulunan resimleri kolayca editöre ekleyebilirsiniz.

1. Adım: Editörünüzdeki Resim & Dosya Yükle düğmesine tıklayın.

1 resim ve dosya yükle düğmesine basın

2. Adım: Açılan dosya yöneticisi penceresindeki Dosya Yükle düğmesine basın.

2 dosya yükle düğmesine basın

3. Adım: Bilgisayarınızdan yüklemek istediğiniz resim dosyalarını seçin.

3. bilgisayarınızdan yüklenecek resimleri seçin

4. Adım: Eklemek istediğiniz görselin üzerine gelin ve editörünüze ekleyin.

4 eklemek istediğiniz görselin üzerine gelin ve sayfaya ek

Resimleri Boyutlandırma ve Hizalama

BulutPress web tasarım bayilik sisteminin güçlü özelliklerinden biri, resimlerin editör içinde yeniden boyutlandırılması halinde, fiziksel olarak optimize edilmesi ve boyutlandırdığınız son haline göre yeniden oluşturulmasıdır. Bu işlemi canlı kırpma ya da canlı (on the fly) fiziksel boyutlandırma olarak düşünebilirsiniz. Web tasarım editörlerinde genellikle resimler köşesinden tutup çekilerek sözde küçültülmüş olur. Ancak bu küçültme yalnızca sözde olur. Özde bir küçültme gerçekleşmez. Yani resim dosyasının gerçek boyutu değiştirilmemiş olur. Bu yüzden görüntüde çok az yer kaplayan bir resim dosyası aslında fiziksel olarak aşırı miktarda yer kaplıyor olabilir. Bu yüzden web siteleri yavaş yüklenir, ücretli mobil ağlarda kullanıcılara gereksiz bekleme ve gereksiz maliyet oluşturur. Bu durumu bilen arama motorları da web sitenizin puanını düşürerek cezalandırır.

Ancak BulutPress web tasarım platformunun geliştirdiği teknoloji sayesinde, köşesinden tutup küçülttüğünüz görseller, sunucuda yeniden fiziksel olarak boyutlandırılır. Eski büyük dosya sunucudan silinir ve tüm resimler gerçekte olduğu ve göründüğü kadar yer kaplar. Web siteniz oldukça hızlı açılır. Ziyaretçileriniz beklemez ve gereksiz mobil ağ masrafına katlanmış olmaz. Bu özellik, arama motorları tarafından da yüksek sıralama ile ödüllendirilmenizi sağlar. Bu eğitim videomuzda, BulutPress web tasarım yönetim paneli içinde görselleri nasıl yeniden boyutlandıracağınızı ve hizalayacağınızı anlatıyoruz.

BulutPress Resimlerinizi Otomatik Olarak Optimize Eder

Resimler Yüklenirken Optimize Edilir

Web sitenize eklediğiniz tüm resimler, bilinen en yüksek sıkıştırma algoritmasıyla sıkıştırılır yani optimize edilir. Web siteniz çok hızlı açılır ve ziyaretçileriniz mutlu olur.

BulutPress ekibi olarak sizlere kusursuz bir müşteri deneyimi sunabilmek için tutkuyla çalışıyoruz. Web sitenizin açılış hızları konusunda ne kadar takıntılı olduğumuzu biliyorsunuz. Sitenin açılış hızını etkileyen en önemli faktörlerden biri de yüklediğiniz her görselin türüne göre bir sıkıştırma algoritmasına tabi tutularak görüntü kalitesinden taviz vermeden boyutu düşürmektir.

Görüntüleri Optimize Etmek Ne Anlama Geliyor?

Sıkıştırmanın görüntülere ne yaptığını anlamak önemlidir. Daha hızlı yükleme ve performans için görüntülerin boyutunu küçültmek için sıkıştırma algoritmaları kullanılır. Bir görüntüyü sıkıştırdığınızda, algoritma görüntünün hangi bölümlerinin kaldırılabileceğini veya düz arka plan rengi veya siyah beyaz çizgiler gibi daha basit bir şeyle değiştirilebileceğini belirler. Kullandığımız en modern resim sıkıştırma teknikleri sayesinde internet hızı düşük olan ziyaretçiler uzun süre beklemeden web sitenizdeki görselleri görebilir. Sayfayı terk etme oranı düşer. Resimleri optimize edilmiş olan web sitelerin google pagespeed hız puanı da çok yüksek olur. Bu da yüksek SEO başarısı ve daha fazla kazanç anlamına gelir.

Büyük görüntüler web sayfalarınızı yavaşlatır ve bu da kötü bir kullanıcı deneyimine neden olur. Görüntüleri optimize etmek, bir eklenti veya komut dosyası kullanarak dosya boyutlarını azaltma işlemidir, bu da sayfanın yükleme süresini hızlandırır. Kayıplı ve kayıpsız sıkıştırma yaygın olarak kullanılan iki yöntemdir. Çok şükür ki BulutPress, resim optimizasyonu işini sizin yerinize otomatik olarak yapar.

Resimlerinizi Biçimlendirmenin Faydaları

İlk olarak, resimlerinizi neden biçimlendirmeniz gerekiyor? Faydaları nelerdir? Görüntülerinizi performans için optimize etmenin sayısız faydası vardır. HTTP Arşivi'ne göre, Kasım 2018 itibariyle, görüntüler toplam web sayfasının ağırlığının ortalama% 21'ini oluşturuyor. Yani web sitenizi optimize etmeye gelince, video içeriğinden sonra, görüntüler başlamanız gereken ilk yer! Komut dosyalarından ve yazı tiplerinden daha önemlidir. Ve ironik olarak, iyi bir görüntü optimizasyonu iş akışı, uygulanması en kolay şeylerden biridir, ancak birçok web sitesi sahibi bunu gözden kaçırıyor.

  • Sayfa yükleme hızınızı artıracaktır (hızınızı ne kadar etkilediğini öğrenmek için aşağıdaki örnek olay incelememize bakın). Sayfanızın yüklenmesi çok uzun sürerse ziyaretçileriniz beklemekten yorulabilir ve başka bir şeye geçebilir.
  • SEO Başarınıza katkı sağlar. Siteniz arama motoru sonuçlarında daha üst sıralarda yer alır. Büyük dosyalar sitenizi yavaşlatır ve arama motorları yavaş sitelerden nefret eder. Google görsel araması için resimlerinizi daha hızlı tarayıp dizine ekleme olasılığını da artırır. Trafiğinizin yüzde kaçının Google görsel aramadan geldiğini merak ediyor musunuz? Google görsel arama trafiğini kontrol etmek için bir Google Analytics kullanabilirsiniz.
  • Yedekleme oluşturmak daha hızlı olacaktır.
  • Daha küçük görüntü dosyası boyutları daha az bant genişliği kullanır. Ağlar ve tarayıcılar için iyi bir avantaj sağlar.
  • Sunucunuzda daha az depolama alanı gerektirir.

Resimlerinizi Biçimlendirmenin Birincil Amacı

Resimleri optimize etmekteki birincil amacımız, en düşük dosya boyutu ile kabul edilebilir bir kalite arasındaki dengeyi bulmaktır. Bu optimizasyonların neredeyse tamamını gerçekleştirmenin birden fazla yolu var. Siz şanslı bir BulutPress kullanıcısı olduğunuz için optimizasyon ile uğraşmanıza gerek yok.

Dikkate alınması gereken iki temel nokta, kullandığınız dosya biçimi ve sıkıştırma türüdür. Dosya formatı ve sıkıştırma türünün doğru kombinasyonunu seçerek görüntü boyutunuzu 5 kata kadar azaltabilirsiniz. En iyi neyin işe yaradığını görmek için her bir görüntü veya dosya formatını denemeniz gerekir. Tüm karmaşık hesaplamaları, en doğru sıkıştırma algoritmasının hangisi olduğunu BulutPress sizin yerinize tespit eder ve gerekeni yapar.

Kayıplı ve Kayıpsız Optimizasyon

Kayıplı (lossy) - bu, bazı verileri ortadan kaldıran bir filtredir. Görüntüyü biraz bozar, bu nedenle görüntüyü ne kadar azaltacağınıza dikkat etmeniz gerekir. Dosya boyutu büyük miktarda azaltılabilir. Görüntünün kalite ayarlarını yapmak için Adobe Photoshop, Affinity Photo veya diğer görüntü düzenleyicileri gibi araçları kullanabilirsiniz.

Kayıpsız (lossless) - bu, verileri sıkıştıran bir filtredir. Bu yöntem kaliteyi fazla düşürmez, ancak görüntülerin oluşturulmadan önce sıkıştırılmamasını gerektirir. Eğer BulutPress kullanmıyorsanız, Photoshop, FileOptimizer veya ImageOptim gibi araçları kullanarak masaüstünüzde kayıpsız bir sıkıştırma gerçekleştirebilirsiniz. Ancak BulutPress kullanıcısı iseniz, bunları düşünmenize gerek yok.

Her görüntü veya format için neyin en iyi sonucu verdiğini görmek için sıkıştırma tekniklerinizi denemek en iyisidir. Araçlarınızda seçenek varsa, görüntüyü web için kaydettiğinizden emin olun. Bu, bir çok görüntü düzenleyicisinde var olan bir seçenektir ve size en uygun sıkıştırmayı gerçekleştirebilmeniz için kalite ayarlamaları verecektir. Kalitenin bir kısmını kaybedeceksiniz, bu yüzden görüntüleri çirkin hale getirmeden yapabileceğiniz en iyi dengeyi bulmak için deneyin.

BulutPress'in Kullandığı Görüntü Optimizasyon Araçları ve Programları

Resimlerinizi optimize etmek için kullanabileceğiniz bir sürü ücretli ve ücretsiz araç bulunuyor. BulutPress görüntü işleme sunucularımızda aşağıdaki uygulamaları kullanıyoruz: GIFsicle, JPEGtran, OptiPNG, pngquant ve ImageOptim

Yüklediğiniz Resimler Artık Photoshop Kalitesinde

Web Sitenize Eklediğiniz Görseller Cam Netliğinde İşlenir

Uzman photoshop kullanıcıları bilirler, bir görseli düzenleyip web için kaydettiğimizde, yeniden boyutlandırırken "bilinear interpolation" adında bir boyutlandırma algoritması (motoru) kullanılır. Bu işlem yapılırken bilgisayarınız biraz yorulur ama buna değer. Ancak internet tarayıcıları resimleri boyutlandırırken "nearest neighbor interpolation" algoritmasını kullanır. Boyutlandırma hızlıdır, bilgisayarı fazla yormaz ama görüntü kalitesi biraz düşer. Bu sebeple photoshop ile boyutlandırsanız bile, web sitenize yüklerken eğer tarayıcı üzerinde boyutlandırma yapıyorsanız (ki genelde yapıyorsunuz, örneğin animasyona resim yüklerken ya da resim galerisi oluştururken) görüntü kalitesi kaçınılmaz olarak düşüyor(du).

bulutpress gorsel boyutlandirma teknolojisi

Son yaptığımız güncelleme ile web sitenize yüklerken boyutlandırdığınız görselleriniz optimize edilirken gerçeğine en yakın kristal netliğini koruduğu gibi, aynı zamanda gelişmiş sıkıştırma algoritmamız ile olabilecek en düşük dosya boyutuna sahip olacak. Bu sayede web siteniz en yüksek hızda açılırken, görselleriniz göz doldurmaya devam edecek.

Görsel İçeriklerle Ziyaretçi Bağlılığını Arttırmanın 7 Yolu

çılgın görsellerle ziyaretçilerinizi etkileyin

Kullanıcılarınızda gerçekten kalıcı bir etki bırakmak istiyorsanız, onlarla duygusal bağ kurmak zorundasınız. Çevrimiçi dünyada, içeriklerin görsel elemanlarla - özellikle de resimlerle- zenginleştirilmesinin, beğenileri ve paylaşlımları arttırdığı kanıtlandı. Yalnızca bu değil, görsel içerkler, hedef kitlenizi web sitenizde çok daha fazla kalmaya zorluyor.

1. Sosyal Medya Bağlılığı İçin Blogunuzda Görsel Veriler Kullanın

web sitenizde sosyal medya görselleri yüklemek

Blog yazıları, hedef kitlenizi içeriğinize bağlamanıza yardımcı olan en popüler parçalardır. Her nasılsa, bu etkileri paylaşma değerleri olmalarından kaynaklanıyor. Eğer kullanıcılarınızı blogunuza bağlamak istiyorsanız, içeriklerinizin sosyal medyada paylaşılabilir olmalarını sağlamalısınız. Bu sayede blogunuz ihtiyacı olan ünü yakalayacaktır. Buna ek olarak, içeriğinizi, ilgili hedef kitlenize göre uyarlama ve içeriğinizi okuyan, yorum yapan insanlarla iletişim kurma imkanı yakalayacaksınız.

Bir çalışmaya göre, görsel destekli içerikler, yalnızca yazıların bulunduğu içeriklere göre %650 daha fazla bağlılık getiriyor. Blogunuzda görsel içeriklere yer vermeniz yalnızca hedef kitlenizin, mesajınızı daha hızlı anlamasını sağlamıyor, aynı zamanda verdiğiniz bilgilerin daha akılda kalıcı olmasına yardımcı oluyor. Konu çok miktarda bilgiyi akılda tutmaya gelince, yalnızca kelimelerden oluşmuş içeriklerden ziyade, görsel destekli olanları aklımızda tutmaya daha yatkınız. Ayrıca çoğu blogdan hedef kitlenize, hatırlayacakları bilgiler sunmasını bekleriz. Resim formatında görsel içerikler, videolar ve bilgi grafikleri (infographics) kulllanmak size bu konuda yardımcı olabilir.

2. Bırakın Görselleriniz Kendileri İçin Konuşsunlar

Kimse metin ağırlıklı içerikleri sevmez. Görsel içeriklerin anlaşılması daha kolaydır. Sayfanın ne anlatmak istediğini açıklayan görseller kullanarak, kullanıcılarınızın, markanızın mesajını çok daha iyi anlayıp kabul etmelerini sağlayabilirsiniz. Görsel içerikler, bilgiyi daha düzenli ve hızlı bir şekilde verme konusunda çok etkililer. Kelimeler yerine ilgili görseller kullanmak, sizi kullanıcı bağlılığında çok daha ilerilere taşır. Aslında, görünenin tersi olarak, iletilerinizi 250 karakterin altında tutmak bağlılığı %60 oranında arttıracak bir düzenlemedir.

Çekici görsel içeriklerin kendi kendilerini ifade etmelerine izin vermek en iyisi. Tanıtıcı bir paragraf ve metinin sonuna eylem çağrısı (call to action) ekleyebilirsiniz, ama işleri biraz ilginçleştirmek adına resimler, videolar veya slaytlar kullanmayı da unutmayın.

3. Hedef Kitlenizle Olan İletişiminizi Duygusal Bir Seviyede Tutun

Kullanıcılarınızda gerçekten kalıcı bir etki bırakmak istiyorsanız, onlarla duygusal bağ kurmak zorundasınız. Eğer onlar için doğru bir noktaya parmak basabilirseniz, içeriğinizi beğenmek ve yorum yapmak hoşlarına gidecektir. Görseller bu konuda harikla bir iş çıkarıyorlar. Doğal olarak, insanlar kendileriyle ilgili bir nokta yakaladıklarında daha olumlu tepkiler vermeye yatkındırlar. Eğer kullanıcılarınız içeriğinizde kendilerinden bir parça bulabilirlerse, markanız onlarda sadakat ve güven hissi uyandırır.

Web tasarımında Renk, yazı tipi, büyük kelimeler, kullanışlılık, okunaklılık, stil ve yapı gibi genel görsel elemanlar insanlarda kolaylıkla negatif veya pozitif etkiler yaratabilir. Örneğin, kırmızı, turuncu ve sarı gibi sıcak renkler insanlarda optimizm ve mutluluk hissi uyandırırlar. Simetrik elemanlar içeren fotoğraflar, düzeni çağrıştırır. Aynı şekilde asimetrik elemanlar içeren görseller rahatsızlık ve kaos hissettirebilir. Yine bir çalışma gösteriyor ki; sosyal medya paylaşımlarını en çok etkileyen şey mutluluktur.

4. Görsellerinizi Arama Motoru (SEO) İçin Optimize Edin

arama motoru optimizasyonuna uygun resim yüklemek

Görsellerin arama motoru optimizasyonundaki rolünün ne kadar büyük olduğunu biliyor muydunuz? Çoğu insan fotoğrafların arama motorları için optimize edilebildiğini bilmiyorlar. Bu gerçekten çok kolay bir şey. Yapmanız gereken tek şey görselinizin; ismi, dosya adı, sayfa açıklaması ve alternatif metin için belirli anahtar kelimeler kullanmak. Görsel boyutlarının, görselinizin ölçekleriyle uyuştuğundan emin olmalsınız. Ayrıca, hızlı yüklenmesi için dosya boyutunu küçük tutmalı ve sayfada kolay gezinebilinmesi adına resim altı yazısı (caption) eklemelisiniz.

Bunlar sosyal medya platformlarında veya web sitenizde görüntülenmeyecek olsa bile, arama motorları tarafından okunabilirler. Bu da arama motoru sıralamalarınızı etkileyen bir faktör.

5. Konu İle Alakalı Resimleri Doğru Boyutlarda Kullanın

Web sitenizin görüntüsünü olumlu etkileyecek, profesyonel ellerden çıkmış fotoğraflar kullandığınız gibi, kendiniz de fotoğraf çekip kullanabilirsiniz. Yalnızca temiz ve düzgün göründüklerinden emin olmalısınız. Stok fotoğraf olduğu çok belli olan görseller yerine daha gerçek görünüşlü fotoğraflar kullanmak akla daha yatkın. Dahası, çok detaylı fotoğraflar kullanmaktan kaçınmalısınız çünkü bunlar çok dikkat çekici olabiliyorlar. Kafa karıştırıcı veya yanlış anlaşılmaya müsait fotoğraflar kullanmamaya dikkat etmelisiniz. Yalnızca markanızın kişiliğiyle ilişki fotoğraflar kullanmaya çalışın.

Size uygun olmasının yanında, görsellerinizin doğru boyutlarda olması gerekiyor. Web tasarımında çok büyük görseller kullanmak sayfanızın yüklenme süresini arttırır, ki bu çok büyük bir problemdir. Gerekliyse, görsellerinizi yüklemeden önce yeniden boyutlandırın. Böylece uygun bir şekilde görüntüleneceklerdir.

6. Görselleri Kullanmak İçin Yetki Alın ve Bunu Gösterin

Blogunuzda veya web sitenizde, sizin tarafınızdan hazırlanmış görselleri kullanmak en iyisidir. Sizin için görsel hazırlayacak bir profesyonelle de anlaşabilirsiniz. Eğer internetten bir görsel kullanmaya karar verdiyseniz, bunu yapmak için yetkiniz olduğuna emin olun. Çoğumuz için kendi görsellerimizi kullanmak çok mümkün olmayabiliyor. Çoğu durumda, CC0 lisanslı -ücretsiz- görselleri kullanabilirsiniz.

Bunun dışında, kullanıcılarınızın görsellerinizi kullanmalarına ve paylaşmalarına izin verin. Bunu, web sitenizin/blogunuzun "hüküm ve koşullar (terms and conditions)" kısmında belirtebilirsiniz. Bunlar görsellerinizin viral olmasına olanak verir.

7. Farklı Kitlelere Hitap Edebilmek İçin Farklı Görsel İçerikler Kullanın

hedef kitlenize uygun görselleri yükleyin

İnsanlar birbirinden çok farklılar. Aynı görsel içeriğe, farklı kitleler farklı tepkiler verir. Bu yüzden nasıl bir içeriğin kitlenizde en iyi tepkiyi oluşturacağını öğrenmeniz gerekir.

Bunu öğrenmek için resimler, bilgi grafikleri, GIF'ler, alıntı kartları, grafiksel veriler, karikatürler, videolar ve slaytlar gibi farklı görsel içerikler kullanmayı ve bunları farklı sosyal ağlarda yayımlamayı deneyebilirsiniz. Verdikleri tepkilere göre, hangi çeriğin hedef kitlenizde daha iyi çalıştığını anlayabilirsiniz.

İçeriğinizin video, resim, GIF veya diğer ilginç görsel içeriklerden biri olması fark etmez, her biri sosyal medya platformlarında sıklıkla kullanılan ve popüler olan içerikler. Bunların yardımıyla, görsel içerik kullanarak ziyaretçilerinizin size olan bağlılığını arttırabilirsiniz.