Web Sitesinde Logo ve Görseller Bulanık Görünüyor: Neden ve Nasıl Düzelir?

Biz Talha Aslan ve ekibi olarak bu şikâyeti en sık şu cümleyle duyuyoruz: bilgisayarda düzgün, telefonda bulanık. Ancak sorun telefonda değil, dosyanın ekran için yetersiz kalmasındadır. Bu yazıda tek bir soruna odaklanıyoruz: logo ve görsellerin sitede neden net görünmediği ve bunu adım adım nasıl düzelteceğiniz. Genel görsel sıkıştırma konusunu ise ayrı rehberimizde anlattık.

Cihaz piksel oranı nedir ve neden önemlidir?

Cihaz piksel oranı (device pixel ratio, DPR), ekranın fiziksel piksel sayısının CSS piksel sayısına oranıdır. MDN belgesine göre değeri 1 olan ekran klasik masaüstü ekranıdır; 2 değeri Retina gibi yüksek yoğunluklu ekranlarda yaygındır, bazı telefonlar ise 2'nin üstüne çıkar.

Yani siz tasarımda logoya 200 piksel genişlik verdiğinizde, 2 oranlı bir telefon o alanı 400 fiziksel pikselle çizer. Dosyanız yalnızca 200 piksel genişliğindeyse tarayıcı eksik pikselleri tahmin ederek doldurur. Sonuç olarak harf kenarları yumuşar, ince çizgiler grileşir. Logo bulanık durduğunda ziyaretçi bunu teknik bir ayrıntı olarak değil, özensizlik olarak algılar.

Üstelik sayfa yakınlaştırması da bu oranı değiştirir. Bu nedenle tek bir ekranda yaptığınız test yeterli değildir; en az bir yüksek yoğunluklu telefonda ve bir standart masaüstü ekranında kontrol edin. Kısacası cihaz piksel oranı, aynı dosyanın farklı ekranlarda neden farklı göründüğünü açıklayan temel kavramdır. Teknik ayrıntı için MDN devicePixelRatio sayfası iyi bir başlangıçtır.

Logo bulanık görünüyorsa ilk beş dakikada ne kontrol etmelisiniz?

Panik yapmadan önce şu sırayla bakın. Çoğu durumda sebep ilk üç adımda ortaya çıkar.

1. Logoyu tarayıcıda sağ tıklayıp yeni sekmede açın ve dosyanın gerçek piksel genişliğini not edin.
2. Aynı logonun sayfada kaç CSS pikseli genişliğinde durduğunu geliştirici araçlarıyla ölçün.
3. Gerçek genişlik, görünen genişliğin en az iki katı mı, bakın. Değilse sorunu buldunuz.
4. Dosya adının sonunda boyut eki olan bir küçük kopya mı, yoksa orijinal mi yüklendiğini kontrol edin.
5. Dosya biçimine bakın: logo JPG ise sıkıştırma izi büyük ihtimalle oradan gelir.

Örneğin ekranda 180 piksel duran bir logo için en az 360 piksel genişliğinde dosya gerekir. Ayrıca bu kontrolü yaptıktan sonra hangi çözümün size uyduğunu aşağıdaki bölümlerden seçebilirsiniz.

Logo için neden SVG en güvenli seçimdir?

SVG, şekilleri piksel yerine matematiksel çizgilerle tanımlayan vektör biçimidir. Bu yüzden ekran yoğunluğu ne olursa olsun tarayıcı logoyu o ekran için yeniden çizer ve kenarlar keskin kalır. Tek dosya hem masaüstünde hem iPhone'da aynı netliği verir. Üstelik SVG logolar çoğu zaman piksel tabanlı karşılıklarından daha küçük dosya boyutuna sahiptir; dolayısıyla netlik kazanırken hızdan da taviz vermezsiniz.

Ancak her SVG temiz değildir. Bazı tasarım programları dışa aktarırken içine piksel tabanlı bir resim gömer; bu durumda dosya uzantısı SVG olsa bile bulanıklık sürer. Ayrıca yazı tipini çizgiye dönüştürmeden aktarılan logolarda font eksik olunca tarayıcı harfleri başka bir yazı tipiyle çizer.

• Logoyu tasarımcınızdan vektör kaynak dosyasıyla birlikte isteyin.
• Dışa aktarmada yazıları çizgiye dönüştürün.
• SVG içinde gömülü resim olmadığını kontrol edin.
• Kullanıcıların dosya yükleyebildiği alanlarda SVG yüklemeyi güvenlik açısından sınırlayın; logoyu yalnız yönetici eklesin.

Logonun farklı boyutlarda nasıl sadeleşeceğini merak ediyorsanız responsive logo ve logo varyasyonları yazımıza bakabilirsiniz.

SVG kullanamıyorsanız PNG logoyu hangi boyutta yüklemelisiniz?

Elinizde yalnız PNG varsa kural basittir: dosyayı ekranda göründüğü genişliğin en az iki katı, tercihen üç katı yükleyin. Böylece 2 ve 3 oranlı ekranlar eksik piksel tahmin etmek zorunda kalmaz.

Örnek hesap: masaüstü menüde logo 160 CSS pikseli genişliğinde duruyorsa 320 piksellik dosya 2 oranlı ekranı, 480 piksellik dosya 3 oranlı ekranı karşılar. Dosyayı ise CSS ile 160 piksele sabitlersiniz. Bu fark dosya boyutunu artırır, fakat logo gibi küçük ve sade görsellerde artış genellikle makul kalır.

Öte yandan logoyu JPG olarak kaydetmeyin. JPG keskin renk geçişlerinde, yani harf kenarlarında, sıkıştırma izi bırakır. Şeffaf arka plan gerekiyorsa PNG ya da kayıpsız WebP kullanın. Dönüşüm için PNG WebP çevirme aracımızı deneyebilirsiniz.

Tema logoyu CSS ile büyütüyorsa ne olur?

Bulanıklığın sık görülen ikinci sebebi CSS ile büyütmedir. Tema, logo alanına belirli bir yükseklik ya da genişlik verir; siz daha küçük dosya yüklediğinizde tarayıcı dosyayı o alana sığdırmak için büyütür. Böylece masaüstünde bile yumuşama görürsünüz.

Ayrıca bazı temalar mobilde logoyu ayrı bir kutuya yerleştirir ve oranını bozar. Genişlik ile yükseklik orantısız değişince logo hem bulanık hem basık kalır. Bu nedenle tema ayarlarında logo için verilen azami yükseklik değerine ve mobil başlık ayarına bakın.

Pratik kural şudur: dosyanın doğal genişliği, CSS ile verilen genişliğin altında kalmasın. Kalıyorsa ya daha büyük dosya yükleyin ya da tema ayarındaki logo boyutunu dosyanıza göre küçültün. Kendi başınıza tema dosyasına girmek istemiyorsanız profesyonel web tasarım desteği, logo alanını tüm ekran yoğunlukları için baştan doğru kurmanın en kısa yoludur.

srcset ve sizes görselleri nasıl netleştirir?

srcset, tarayıcıya aynı görselin farklı boyutlu kopyalarını listeleyen bir HTML özniteliğidir. web.dev rehberine göre src özniteliğini değiştirmez, onun yanında çalışır; tarayıcı ekran için uygun olanı seçer ve büyük dosyayı yalnız gerektiğinde indirir. Yani masaüstü ziyaretçisi gereksiz büyük dosya indirmez, telefon kullanıcısı ise bulanık kopyayla karşılaşmaz.

İki tür tanımlayıcı vardır: yoğunluk için x, genişlik için w. Logo gibi sabit genişlikli görsellerde 1x, 2x ve 3x yeterlidir. Ancak içerik genişliğine göre esneyen fotoğraflarda w tanımlayıcısını kullanırsınız; bu durumda sizes özniteliği zorunludur, çünkü tarayıcı görselin sayfada ne kadar yer kaplayacağını sayfa düzenini çizmeden önce bilmek ister.

• Aynı srcset içinde x ve w tanımlayıcılarını karıştırmayın.
• sizes değerini gerçek düzene göre yazın; yanlış değer tarayıcıyı küçük dosyaya yönlendirir.
• width ve height özniteliklerini her görselde verin; böylece sayfa yüklenirken kaymaz.

Ayrıntılı anlatım için web.dev duyarlı görseller rehberi resmi ve güncel kaynaktır.

Yanlış sizes değeri neden bulanıklık yaratır?

En sinsi hatalardan biri budur. sizes değeri görselin ekranın üçte birini kapladığını söylüyorsa, ama görsel aslında tam genişlikte duruyorsa, tarayıcı küçük kopyayı seçer ve büyütür. Dolayısıyla srcset kurulu olduğu hâlde fotoğraflar yumuşak kalır.

Örnek senaryo: blog kapağı mobilde ekranı tam kaplıyor, fakat tema sizes değerini masaüstü kenar çubuğuna göre ayarlamış. Telefon küçük kopyayı indiriyor ve 2 oranla büyütüyor. Kullanıcı ise yalnız bulanık bir kapak görüyor.

Kontrol için geliştirici araçlarında görsele tıklayıp hangi dosyanın gerçekten yüklendiğine bakın. Yüklenen dosyanın genişliği, görünen genişlik çarpı cihaz piksel oranından küçükse sizes değeri ya da kopya listesi eksiktir. Bu kontrolü yaptıktan sonra tema ya da eklenti ayarından düzeltmeyi istersiniz.

CMS yüklediğiniz görseli yeniden sıkıştırıyor mu?

Evet, birçok içerik yönetim sistemi bunu varsayılan olarak yapar. Siz yüksek kaliteli dosya yüklersiniz; sistem farklı boyutlarda kopyalar üretir ve bunları kendi kalite ayarıyla yeniden kaydeder. Sayfa da orijinal yerine bu kopyalardan birini gösterir.

WordPress örneğinde ortam kitaplığı yüklemede ara boyutlar oluşturur ve tema bu boyutlardan birini çağırır. Tema gereğinden küçük bir boyut çağırıyorsa, ya da bir optimizasyon eklentisi kaliteyi çok düşürmüşse, net dosya yüklemiş olmanız sonucu değiştirmez.

• Sayfada görünen dosyanın adına bakın; sonunda boyut eki varsa ara kopya kullanılıyordur.
• Optimizasyon eklentisinin kalite ayarını gözden geçirin.
• Logo için ara kopya yerine orijinal dosyanın çağrıldığından emin olun.
• Ayar değiştirdikten sonra eski kopyaları yeniden oluşturun ve önbelleği temizleyin.

Sıkıştırma ile kalite arasındaki genel dengeyi web sitesi görsel optimizasyonu yazımızda anlattık; burada tekrar etmiyoruz.

WebP ve AVIF kalite ayarı ne kadar olmalı?

Kesin bir sayı yoktur, çünkü kalite ayarı görselin türüne göre farklı sonuç verir. Fotoğraf yüksek sıkıştırmayı daha iyi saklar; logo, metin ve keskin kenarlı grafikler ise aynı ayarda bozulmayı hemen gösterir.

Bu nedenle tek bir kalite değerini tüm siteye uygulamak yerine iki grup oluşturun. Fotoğraflarda daha agresif sıkıştırma kabul edilebilir. Logo, ikon ve üzerinde yazı olan görsellerde ise kayıpsız ya da yüksek kaliteli kayıt tercih edin. Böylece hem hızdan hem netlikten taviz vermezsiniz.

Ayrıca dönüştürme işlemini bir kez yapın. Sıkıştırma geçirmiş bir JPG'yi WebP'ye, sonra tekrar başka bir biçime çevirmek kaliteyi her adımda biraz daha düşürür. Her zaman en temiz kaynak dosyadan dönüştürün ve sonucu yüksek yoğunluklu bir telefonda gözle kontrol edin. Örneğin bir logoyu kayıplı ayarla kaydettiyseniz, harflerin çevresinde ince bir halka ya da renk lekesi görürsünüz; bu, kaliteyi yükseltmeniz ya da kayıpsız kayda geçmeniz gerektiğinin işaretidir.

Logo bulanık görünüyor ama sadece iPhone'da mı?

Bu durum genellikle yoğunlukla ilgilidir. iPhone ekranları yüksek piksel oranıyla çalışır; masaüstünde 1 oranlı ekranda yeterli görünen dosya telefonda yetersiz kalır. Yani sorun Safari'de değil, dosyanın tek katlı olmasındadır.

Öte yandan iPhone'da yalnız bulanıklık değil, kayma ya da taşma da görüyorsanız sebep başka olabilir. Bu tür düzen sorunlarını web sitesi iPhone Safari'de bozuk görünüyor rehberimizde ayrıca ele aldık.

Ayrıca aynı sayfayı bir Android telefonda da açın; iki cihazda da sorun varsa sebep neredeyse kesin olarak dosya boyutudur. Kontrol için iPhone'da logoyu uzun basıp görseli açın ve yakınlaştırın. Kenarlar yakınlaştırmadan önce de yumuşaksa dosya küçüktür. Kenarlar keskin ama sayfada yumuşaksa CSS ölçeklemesi ya da yanlış kopya seçimi devrededir.

Faviconu neden ayrı ele almalısınız?

Favicon, tarayıcı sekmesinde ve arama sonuçlarında görünen küçük site simgesidir. Ana logonuzu doğrudan favicon olarak kullanmak çoğu zaman bulanık ve okunması zor bir sonuç verir, çünkü yatay bir logoyu kare küçük alana sıkıştırırsınız.

Google Arama Merkezi belgesine göre favicon kare olmalı, yani en boy oranı 1:1 olmalıdır; belge daha iyi görünüm için 48 pikselden büyük bir dosya önerir. Ayrıntıyı Google favicon yönergelerinde görebilirsiniz.

• Favicon için logonun sade bir işaret sürümünü kullanın.
• Kare ve yüksek çözünürlüklü bir kaynak hazırlayın.
• Küçük boyutta okunmayan ince yazıları çıkarın.

Arama sonuçlarında simge hiç görünmüyorsa konu netlik değil, teknik erişimdir; bunun için Google'da favicon görünmüyor yazımıza bakın.

Netlik ile sayfa hızını nasıl dengelersiniz?

Her görseli üç katı boyutta yüklemek sayfayı ağırlaştırır. Bu nedenle denge kurmanız gerekir. Aşağıdaki tablo, görsel türüne göre önerdiğimiz başlangıç yaklaşımını gösterir; saha tecrübesine dayalı bir başlangıçtır, garanti değildir.

Kısacası netlik için en büyük kazanç logoda ve ikonlarda vektöre geçmektir. Fotoğraflarda ise doğru srcset kurulumu, telefonun ihtiyacından fazla dosya indirmesini engeller. Sayfa hızının sıralamaya etkisini site hızı ve SEO yazımızda anlattık.

Hangi görsel ölçüsünü yüklemeniz gerektiğini nasıl bulursunuz?

Basit bir formül kullanın: görünen CSS genişliği çarpı hedeflediğiniz en yüksek cihaz piksel oranı. Örnek hesap: içerik alanında 720 piksel duran bir görsel için 2 oranlı ekranlarda 1440 piksellik kopya yeterlidir.

Ancak slider ve tam genişlik banner gibi alanlar ekran genişliğine göre değişir. Bu alanlar için tek bir sayı yerine birkaç kopya hazırlarsınız ve srcset ile tarayıcıya bırakırsınız. Hangi alan için kaç piksel gerektiğini web sitesi görsel ölçüleri rehberimizde tablo hâlinde topladık.

Üstelik ölçüyü doğru bulmak tek başına yetmez. Dosyayı yükledikten sonra sayfada gerçekten o kopyanın çağrıldığını kontrol edin; aksi hâlde tema yine küçük bir ara boyutu seçebilir.

Üzerinde yazı olan görseller neden daha çabuk bulanıklaşır?

Göz, harf kenarındaki küçük bozulmayı fotoğraftaki bozulmadan çok daha kolay fark eder. Bu yüzden kampanya afişi gibi metin içeren görseller, aynı sıkıştırma ayarında fotoğraftan daha kötü durur.

Mümkünse yazıyı görselin içine gömmeyin; metni HTML olarak görselin üstüne yerleştirin. Böylece metin her ekranda keskin kalır, arama motorları ve ekran okuyucular da onu okur. Gömmek zorundaysanız görseli yüksek kaliteyle kaydedin ve görünen genişliğin iki katı boyutta yükleyin. Ayrıca aynı bilgiyi sayfa metninde de verin; böylece görseli göremeyen ziyaretçi de mesajı kaçırmaz.

Örneğin mobilde dar bir alana sığan bir afişte küçük puntolu yazılar bulanıklaşmaya en açık kısımdır. Mobil için yazısı daha büyük ayrı bir sürüm hazırlamak çoğu zaman en temiz çözümdür.

Önbellek ve CDN eski bulanık dosyayı göstermeye devam edebilir mi?

Evet. Yeni ve net logoyu yüklediniz ama hâlâ eskisini görüyorsanız sebep büyük ihtimalle önbellektir. Tarayıcı, eklenti önbelleği ya da içerik dağıtım ağı (CDN) eski kopyayı bir süre sunmaya devam eder.

1. Önce sitenizdeki önbellek eklentisinin temizleme seçeneğini kullanın.
2. CDN kullanıyorsanız kendi panelinde ilgili dosyayı temizleyin.
3. Tarayıcıda gizli pencere açıp sayfayı yeniden kontrol edin.
4. Gerekirse dosyayı farklı bir adla yükleyin; böylece hiçbir katman eski kopyayı kullanamaz.

Dosya adını değiştirmek en sağlam yoldur, çünkü yeni ad tüm katmanlar için yeni bir dosya anlamına gelir. Ardından tema ayarında logoyu yeni dosyayla değiştirmeyi unutmayın.

Logo bulanık görünüyorsa adım adım nasıl düzeltirsiniz?

Aşağıdaki sıra, sorunu en hızlı çözen yolu izler. Her adımdan sonra yüksek yoğunluklu bir telefonda kontrol edin.

1. Logonun vektör kaynağını bulun ve SVG olarak dışa aktarın.
2. SVG mümkün değilse görünen genişliğin iki ila üç katı genişlikte PNG ya da kayıpsız WebP hazırlayın.
3. Tema ayarında logo alanının ölçüsünü dosya oranına uygun hâle getirin.
4. Optimizasyon eklentisinin logoyu yeniden sıkıştırmadığından emin olun.
5. Fotoğraflar için srcset ve sizes değerlerinin gerçek düzene uyduğunu kontrol edin.
6. Faviconu sade, kare bir işaretle ayrıca hazırlayın.
7. Önbelleği temizleyin ve sonucu masaüstü ile telefonda karşılaştırın.

Dolayısıyla çoğu sitede tek bir dosya değişikliği sorunu çözer. Ancak tema logoyu sabit kodla çağırıyorsa ya da düzen her sayfada farklıysa işi kalıcı çözmek için tema düzeyinde müdahale gerekir. Bu noktada değişikliği önce bir test ortamında denemek, canlı sitede beklenmedik bir düzen bozulmasını önler.

Logo bulanık kalıyorsa hangi yaygın hatalara bakmalısınız?

Sahada en sık karşılaştığımız hataları bir liste hâlinde topladık. Logo bulanık kalıyorsa önce bu listeyi tarayın, çünkü sebep çoğu zaman bunlardan biridir.

• Logoyu yalnız tek katlı, küçük bir PNG olarak yüklemek.
• Logoyu JPG biçiminde kaydetmek.
• Temanın logo yüksekliğini dosyadan büyük ayarlamak.
• Optimizasyon eklentisinin logoyu da sıkıştırmasına izin vermek.
• Mobil başlık için ayrı logo alanını boş bırakmak.
• Favicon yerine yatay ana logoyu kullanmak.
• Değişiklikten sonra önbelleği temizlemeyi unutmak.

Bu hataların çoğunu birkaç dakikada düzeltirsiniz. Ancak birden fazlası aynı anda varsa, her birini tek tek giderip araya test koymak hangi değişikliğin işe yaradığını görmenizi sağlar. Böylece aynı hataya bir sonraki tasarım değişikliğinde düşmezsiniz.

Mobil ve masaüstü için ayrı logo kullanmak mantıklı mı?

Çoğu durumda evet. Masaüstü başlıkta geniş bir yatay logo rahatça sığar; mobil başlıkta ise alan dardır. Aynı yatay logoyu mobilde küçültmek yazıları okunmaz hâle getirir ve kullanıcı bunu çoğu zaman bulanıklık olarak algılar.

Bu nedenle mobil için daha kompakt bir sürüm, örneğin yalnız işaret ya da kısaltılmış yazı, hazırlamak işe yarar. Birçok tema mobil logo için ayrı bir alan sunar; bu alanı doldurduğunuzda tema her ekranda uygun sürümü gösterir.

Öte yandan iki ayrı dosya kullanıyorsanız ikisini de aynı netlik kurallarıyla hazırlayın. Mobil logo da SVG olmalı ya da en az iki katı boyutta yüklenmeli. Yoksa masaüstünde çözdüğünüz sorun mobilde geri döner ve logo bulanık kalmaya devam eder.

Arka plan görseli ve CSS ile eklenen görseller neden ayrı sorun çıkarır?

Bazı temalar logoyu ya da başlık görselini HTML görsel etiketiyle değil, CSS arka planı olarak ekler. Bu durumda srcset çalışmaz, çünkü srcset yalnız görsel etiketine ait bir özniteliktir. Tarayıcı tek bir dosyayı indirir ve alanı doldurmak için büyütür.

Ayrıca temalar arka plan görsellerini genellikle alanı kaplayacak biçimde ayarlar. Ekran oranı değişince tarayıcı görselin bir kısmını keser, kalan kısmı ise büyütür. Bu yüzden telefonda hem kırpılmış hem yumuşak bir başlık görürsünüz.

Çözüm olarak CSS tarafında yoğunluğa göre farklı dosya sunan image-set işlevini kullanabilirsiniz; MDN bu işlevi ayrıntılı anlatır. Öte yandan logo gibi önemli bir öğeyi arka plan yerine gerçek görsel etiketiyle eklemek hem netlik hem erişilebilirlik açısından daha doğrudur, çünkü alternatif metin de ancak böyle eklenir.

Ekran görüntüsü ve kırpılmış görseller neden net çıkmaz?

Bulanıklığın gözden kaçan bir kaynağı da görselin kendisidir. Telefonda aldığınız bir ekran görüntüsünü kırpıp büyüttüğünüzde, ya da sosyal medyadan indirilen sıkıştırılmış bir dosyayı sitede kullandığınızda kayıp zaten yaşanmıştır. Hiçbir ayar o kaybı geri getirmez.

• Görseli her zaman en büyük ve en az sıkıştırma görmüş kaynaktan alın.
• Mesajlaşma uygulamalarından gelen dosyaları kaynak olarak kullanmayın; bu uygulamalar görseli küçültür.
• Kırpma işlemini yaptıktan sonra genişliğin hedef ölçünün altına düşmediğini kontrol edin.
• Logoyu ekran görüntüsünden kesmeyin; tasarımcıdan kaynak dosyayı isteyin.

Kısacası kaynak ne kadar temizse sonuç da o kadar nettir. Sitede kullanmadan önce dosyanın piksel ölçüsüne bakmak, sonradan çıkacak sorunların çoğunu baştan önler.

Yapay zeka ile büyütme bulanık logoyu kurtarır mı?

Kısmen. Görsel büyütme araçları eksik pikselleri tahminle doldurur ve fotoğraflarda bazen kabul edilebilir sonuç verir. Ancak logo için sağlam bir çözüm değildir, çünkü araç harf biçimlerini ve marka renklerini değiştirebilir.

Örneğin ince bir yazı tipindeki harfler büyütme sonrasında kalınlaşabilir ya da köşeler yuvarlanabilir. Bu küçük farklar marka tutarlılığını bozar. Bu nedenle logonuzun kaynak dosyası yoksa, onu vektör olarak yeniden çizdirmek uzun vadede daha sağlam bir yoldur.

Fotoğraflarda ise büyütme aracını kullanacaksanız sonucu mutlaka gerçek boyutta inceleyin. Yüzlerde, metinlerde ve desenlerde yapay görünen ayrıntılar oluşabilir; böyle bir sonucu yayına almak yerine daha iyi bir kaynak bulmayı tercih edin.

Netliği hangi cihazlarda ve nasıl test etmelisiniz?

Tek ekranda yapılan test yanıltıcıdır. Bu yüzden kontrolü en az üç ortamda yapın: standart bir masaüstü ekranı, yüksek yoğunluklu bir dizüstü ya da iPhone ve orta seviye bir Android telefon.

1. Her cihazda ana sayfayı ve en az bir iç sayfayı açın.
2. Logoyu, menü ikonlarını ve kapak görsellerini yakından inceleyin.
3. Geliştirici araçlarında cihaz piksel oranını değiştirerek simülasyon yapın.
4. Yüklenen dosyanın genişliğini görünen genişlikle karşılaştırın.
5. Sonucu not alın ve değişiklikten sonra aynı testi tekrarlayın.

Böylece sorunun hangi cihaz grubunda ortaya çıktığını net olarak görürsünüz. Üstelik test notlarınız, sonradan tema güncellemesi yaptığınızda aynı kontrolü hızla tekrarlamanızı sağlar. Özellikle tema ya da eklenti güncellemelerinden sonra bu kısa testi tekrarlamak, fark edilmeden geri gelen bulanıklığı erken yakalamanın en kolay yoludur.

Bu sorunu ne zaman profesyonele bırakmalısınız?

Logo dosyasını değiştirmek çoğu kişinin kendi başına yapabileceği bir iştir. Öte yandan tema srcset değerlerini yanlış üretiyorsa, birden fazla eklenti görselleri üst üste sıkıştırıyorsa ya da kaynak logo hiç yoksa iş teknik bilgi ister.

Ayrıca görsellerinizin başka sitelerde izinsiz yer aldığını fark ettiyseniz bu ayrı bir konudur; web sitesi görsellerim başka sitede kullanılıyor yazımız ne yapacağınızı anlatıyor. Benzer şekilde formdan e-posta gelmiyorsa iletişim formundan mail gelmiyor rehberine göz atabilirsiniz.

Biz projelerde logo, ikon ve fotoğraf hattını en baştan yoğunluğa göre kuruyoruz; böylece yeni ekranlar çıktığında da görseller net kalıyor. Ayrıca logo, ikon ve fotoğraf için ayrı kalite kuralları belirliyor, ekibinizin yeni içerik yüklerken aynı hataya düşmemesi için kısa bir yükleme kılavuzu hazırlıyoruz. Sitenizi bu düzende yeniden ele almak isterseniz web tasarım sayfamızda nasıl çalıştığımızı bulabilirsiniz.

Kısaca: netlik için akılda tutmanız gerekenler

• Bulanıklığın ana sebebi, dosyanın ekran yoğunluğu için küçük kalmasıdır.
• Logoda SVG kullanın; yoksa iki ila üç katı boyutta PNG yükleyin.
• Logoyu JPG olarak kaydetmeyin.
• Fotoğraflarda srcset ve doğru sizes kullanın.
• CMS ve eklentilerin yeniden sıkıştırmasını kontrol edin.
• Faviconu ayrı ve kare hazırlayın.
• Değişiklikten sonra önbelleği temizleyin.

Bu listeyi uyguladığınızda logo bulanık görünüyor şikâyeti büyük ölçüde ortadan kalkar. Yine de her site farklıdır; sonucu mutlaka gerçek cihazda kontrol edin.