Web sitemdeki görsellerin renkleri neden farklı görünüyor?

Aynı görselin üç sürümünü karşılaştırın

Bir fotoğraf düzenleme programında doğru görünürken web sitenizde renkleri değişebilir. Fotoğrafı aydınlatmak veya renkleri canlandırmak isteyebilirsiniz. Önce sorunun görselde mi, sayfada mı, yoksa ekranda mı olduğunu kontrol edin.

Orijinali, web sitesi için kaydettiğiniz kopyayı ve sitenin gerçekten gösterdiği görseli karşılaştırın. Düzenleme programından tamamlanmış bir kopya kaydetmeye genellikle dışa aktarma denir. Site daha sonra kendi küçültülmüş veya sıkıştırılmış sürümünü oluşturabilir.

1. Orijinali saklayın. Referans olarak orijinal fotoğrafı veya düzenlenebilir tasarım dosyasını kullanın. Orijinale dönebilmek için kopyalar üzerinde çalışın.
2. Kaydedilen kopyayı kontrol edin. Düzenleme programında orijinalin yanında açın. Dosyayı bir tarayıcı sekmesine de sürükleyip orada nasıl göründüğüne bakın.
3. Sitenin kullandığı sürümü kontrol edin. Bilgisayarda, yayımlanmış sayfadaki görsele sağ tıklayın. Resmi yeni sekmede aç veya benzer bir seçenek arayın. Bu seçenek yoksa ne yapabileceğiniz aşağıda açıklanıyor.
4. Aynı bölgeyi karşılaştırın. Aynı ekranı, benzer görüntüleme boyutlarını ve benzer bir arka planı kullanın. Ürünün kumaşı veya logodaki tek renkli bir alan gibi farkın belirgin olduğu bir bölge seçin.

Şimdilik ekran parlaklığını ve diğer ekran ayarlarını değiştirmeyin. Bir görsele telefonda, diğerine dizüstü bilgisayarda bakmak, farkın dosyadan mı yoksa ekrandan mı kaynaklandığını anlamayı zorlaştırır.

Gördüğünüz farka göre sonraki kontrolü seçin

Renk profili nedir, neden önemlidir?

Bir görsel, renkleri sayılar olarak saklar. Renk profili, uygulamaya bu sayıların nasıl görünmesi gerektiğini söyler. Profil görsel dosyasının içinde kaydedilmişse buna gömülü profil denir. Profillerde kullanılan standardı ifade eden ICC profili adını da görebilirsiniz. International Color Consortium'un sık sorulan soruları profillerin çalışma biçimini açıklar.

sRGB, web görsellerinin renklerini tanımlamak için yaygın olarak kullanılan bir sistemdir. Bunu ortak renk talimatları olarak düşünebilirsiniz. Birçok cihazda görüntülenecek sıradan fotoğraflar ve grafikler için pratik bir seçenektir. Adobe RGB ve Display P3, farklı ve daha geniş renk aralıkları tanımlar.

Renk bilgisi eksikse veya yanlış okunursa bir uygulama görseli farklı gösterebilir. Ancak profilin olmaması, dosyanın mutlaka hatalı olduğu anlamına gelmez. Zaten sRGB için hazırlanmış bir görsel yine amaçlandığı gibi görünebilir. Sorun, görseldeki renkler için yanlış talimatların varsayılmasıdır. Adobe'nin görsel profilleri açıklamasına bakabilirsiniz.

Ekranın da renkleri nasıl ürettiğini anlatan kendi profili vardır. Bunu görselin profilinden ayrı tutun: monitörünüzün profili, tüm ziyaretçiler için görsellere eklenmesi gereken profil değildir.

Yalnızca profil atamak yerine renkleri dönüştürün

Düzenleme programları hem Assign Profile (profil ata) hem de Convert to Profile (profile dönüştür) sunabilir. Bu işlemler farklıdır:

• Profil atamak, mevcut renk sayılarına yeni bir anlam verir. Sayılar değişmez, ancak görselin görünümü değişebilir.
• Profile dönüştürmek, sayıları yeni renk talimatlarına uyarlar ve görselin görünümünü korumaya çalışır.

Profili doğru tanımlanmış bir Adobe RGB görselinden sRGB kopyası oluşturmak için dönüştürme işlemini kullanın. Yalnızca sRGB atamak renkleri değiştirebilir. Bazı çok canlı renkler sRGB'nin daha dar aralığında tam olarak üretilemez; bu nedenle sonucu inceleyin. Adobe'nin profil yönergeleri iki komutu da açıklar.

Orijinal profil bilinmiyorsa orijinal tasarım dosyasını bulun veya görseli hazırlayan kişiye sorun. Bir profili yalnızca görseli daha renkli gösterdiği için seçmeyin. Program, dosyayı açarken bir profil varsaymış olabilir. Şu anda gösterdiği profil, görselin hangi profille oluşturulduğunu kanıtlamaz.

Web için sRGB renkleriyle bir kopya kaydedin

Sıradan bir web fotoğrafı veya grafik için ayrı bir sRGB kopyası oluşturun ve orijinali saklayın. Photoshop gibi renk dönüşümünü destekleyen bir program gerekir. Başka programlar dışa aktarma ayarlarında Convert to sRGB seçeneği sunabilir. Aşağıdaki Photoshop menü adları İngilizce arayüze aittir.

1. Orijinalin profilini kontrol edin. Belgenin renk ayarlarını bulun. Photoshop'ta Edit → Convert to Profile yolunu açın ve Source Space alanına bakın. Uygulama eksik profil uyarısı verirse tahmin etmek yerine orijinal dosyanın ayarlarını kontrol edin veya hazırlayan kişiye sorun.
2. Kopya için sRGB seçin. Photoshop'un dönüştürme penceresinde hedef olarak sRGB IEC61966-2.1 seçin. Değişikliği görmek için Preview seçeneğini açın, sonucu inceleyip onaylayın. Adobe, Photoshop'taki tüm adımları sunar.
3. Kopyayı kaydedin veya dışa aktarın. Embed Color Profile seçeneği varsa uygun sRGB profilini dosyaya gömün. Dönüştürme renk sayılarını değiştirir; profili gömmek ise bu sayıları okumak için gereken talimatları kaydeder.
4. Kaydedilen dosyayı yeniden açın. Siteye yüklemeden önce programda ve tarayıcıda kontrol edin. Yeni kopyayı tanımak için farklı bir dosya adı kullanın.

Programda renk profili ayarları yoksa renkleri nasıl dışa aktardığını öğrenmek için belgelerine bakın. Ayarları kendiniz doğrulayamıyorsanız tasarımcıdan web için bir sRGB kopyası isteyin.

Dosya biçimini ayrıca seçin. JPG genellikle fotoğraflara uygundur; PNG şeffaf arka plan gerektiren grafiklerde yararlı olabilir. Web görselleri için dosya biçimleri rehberimiz seçenekleri açıklar. Yalnızca JPG'den PNG'ye geçmek hatalı renk bilgisini düzeltmez.

Sitenin görseli değiştirip değiştirmediğini kontrol edin

Kaydedilen dosya doğru görünüyor, ancak sitedeki görsel farklıysa yükleme sonrasında ne olduğunu inceleyin. Bir site oluşturucu, görsel eklentisi veya dağıtım hizmeti görseli yeniden boyutlandırabilir, sıkıştırabilir ya da biçimini değiştirebilir.

Ayrı sekmede açtığınız görselle başlayın. Bu kopyayı bilgisayarınıza kaydedin ve siteye yüklediğiniz dosyayla aynı programda karşılaştırın. Daha küçük görsel boyutları bir renk sorununu kanıtlamaz; ancak farklı sürümleri karşılaştırıyor olabileceğinizi gösterir.

Görseli doğrudan açamıyorsanız

Tarayıcının geliştirici araçları, sayfanın hangi dosyayı yüklediğini gösterir. Bunu bilgisayarda yapmak daha kolaydır:

1. Sayfayı açın ve tarayıcı menüsünde Geliştirici araçları veya Developer tools seçeneğini arayın. Genellikle Diğer araçlar bölümündedir.
2. Network veya Ağ sekmesini seçip sayfayı yenileyin. Sayfanın yüklediği dosyalar listelenir.
3. Genellikle Img veya Images olarak adlandırılan görsel filtresini kullanın. Bir dosya seçin ve görselinizi bulmak için Preview yani önizleme sekmesine bakın.
4. Listedeki satıra sağ tıklayıp varsa Yeni sekmede aç seçeneğini kullanın. Yoksa dosyanın URL olarak da adlandırılan web adresini kopyalayıp yeni sekmeye yapıştırın. Görseli karşılaştırma için kaydedin.

Chrome'un Network paneli rehberi bu araçları gösterir. Menü adları ve yerleşim, tarayıcıya ve arayüz diline göre değişebilir.

Sayfa, telefon ve bilgisayar görünümünde farklı görsel dosyaları seçebilir. Duyarlı görseller rehberi bunu daha ayrıntılı açıklar.

Sitenin teknik ayarlarını siz yönetmiyorsanız yüklediğiniz dosyayı ve sitenin kopyasını sorumlu kişiye gönderin. Görsel işleme sırasında renk profilinin kaldırılıp kaldırılmadığını veya renklerin yanlış dönüştürülüp dönüştürülmediğini kontrol etmesini isteyin. Düzeltmeden sonra görsel sürümlerini yeniden oluşturmak ve önbelleği temizlemek gerekebilir. Önbellek, önceden oluşturulmuş dosyaları saklar. Yeni sürüme baktığınızdan emin olun.

Renk bilgisi, fotoğrafın GPS konumu gibi özel bilgilerden farklıdır. Görselle birlikte saklanan bilgiler olan tüm meta verileri kaldırmak, renk profilini de kaldırabilir. Paylaşılacak bir kopya hazırlarken hem gizliliği hem de görünümü kontrol edin. Fotoğraf meta verileri rehberi bu süreci anlatır.

Sayfa efektlerini ve arka planı kontrol edin

Sitenin görseli kendi sekmesinde doğru, sayfanın içinde farklı görünüyorsa sayfa onun görünümünü değiştiriyor olabilir. Sitenin açık ve koyu temasını deneyin. İşaretçiyi görselin üzerine getirdiğinizde değişiklik olup olmadığına da bakın.

• Renk veya parlaklık efektleri: bir tema görselleri koyulaştırabilir, renklerini azaltabilir veya gri gösterebilir. Bu efektlere genellikle filtre denir. MDN'nin filter belgesi etkilerini gösterir.
• Kısmi şeffaflık: görsel veya onu çevreleyen bölüm arka planı gösterebilir; bu da renklerin soluk görünmesine yol açar. Bu ayara opaklık denir. Ayar çevreleyen bölüme uygulandığında da görseli etkileyebilir. MDN'nin opacity açıklamasına bakın.
• Görselin üzerindeki bir katman: renkli bir kaplama veya işaretçi üzerine geldiğinde uygulanan efekt, dosyayı değiştirmeden görseli renklendirebilir.
• Farklı bir arka plan: şeffaf veya kısmen şeffaf alanlar sayfanın arka planıyla karışır. Tamamen opak renkler bile beyaz ve koyu gri çevrede farklı algılanabilir.

Şeffaf bir görseli, tasarımda kullanılan arka planla karşılaştırın. Yalnızca belirli bir arka planda yanlış görünüyorsa tasarımı o kullanım için gözden geçirin. Şeffaf arka plan rehberi seçenekleri açıklar.

Sayfa düzenleyicisinde veya tema ayarlarında görsel efektlerini arayın. Yardım gerekiyorsa geliştiriciye görselin tek başına doğru göründüğünü söyleyin; filtreleri, opaklığı ve kaplama katmanlarını kontrol etmesini isteyin. Nedeni bulmak için tek tek stil kurallarını geçici olarak kapatabilir. MDN'nin CSS sorunlarını giderme rehberi yöntemi açıklar.

Ekranları benzer koşullarda karşılaştırın

Aynı dosya iki ekranda farklı görünüyorsa ekranları kontrol ederken dosyayı değiştirmeyin. Parlaklık, oda aydınlatması ve ekranın özellikleri gördüğünüz sonucu etkiler.

Ekranın görünümünü bilinçli olarak değiştiren özellikleri geçici olarak kapatın. Apple'ın Night Shift özelliği ekranı daha sıcak tonlarda gösterir; True Tone renk ve yoğunluğu ortam ışığına uyarlar. Apple'ın ekran ayarları rehberine bakın. Diğer cihazlarda mavi ışık filtresi, gece modu veya canlı renk modu gibi ayarları arayın.

Tüm sayfa benzer biçimde sıcak veya canlı görünüyorsa ekran ayarları iyi bir başlangıçtır. Fark yalnızca bir fotoğraftaysa o fotoğrafın renk bilgisine dönün ve HDR olup olmadığını kontrol edin. HDR, sık sorulan sorular bölümünde açıklanıyor.

İşinizde ürün renklerinin güvenilir olması önemliyse kalibre edilmiş bir ekran daha iyi bir referans sağlar. Kalibrasyon, ekranı bilinen bir hedefe göre ayarlar; ekran profili ise renkleri nasıl ürettiğini anlatır. ICC'nin sık sorulan soruları bu görevleri açıklar. Görseli doğru hazırlamak tutarlılığa yardımcı olur, ancak tüm ziyaretçilerin ekranlarını aynı hale getirmez.

Örnek: ürün fotoğrafı tarayıcıda soluk görünüyor

Orijinal dosyasında bilinen bir Adobe RGB profili bulunan bir ürün fotoğrafı düşünün. Programda doğru görünür, ancak kaydedilen kopya tarayıcıda soluktur. Bu varsayımsal bir örnektir; profil kaybı her görseli aynı şekilde etkilemez.

1. İlk farkı bulun. Kaydedilen dosya siteye yüklenmeden önce farklıdır. Bu nedenle dışa aktarma ayarlarıyla başlayın.
2. Neyin kaydedildiğini kontrol edin. Bu örnekte dışa aktarma, renkleri sRGB'ye dönüştürmeden Adobe RGB profilini kaldırmıştır.
3. Orijinalden yeni bir kopya oluşturun. sRGB'ye dönüştürün ve uygun profil bilgileriyle kaydedin.
4. Yüklemeden önce karşılaştırın. Yeni kopyayı aynı ekranda, programda ve tarayıcıda açın.
5. Siteyi de kontrol edin. Kopyayı siteye yükleyin ve sayfanın gerçekten kullandığı görselle karşılaştırın.

Doygunluğu artırmak renkleri daha canlı yapar. Bu, ilk dışa aktarılan dosyayı bir uygulamada daha iyi gösterirken diğerinde aşırı renkli hale getirebilir. Dışa aktarmayı düzeltmek sorunun nedenine müdahale eder ve orijinali başka amaçlar için kullanılabilir tutar.

Renkler doğru göründüğünde Pixilo'yu kullanın

Kaydedilen kopyanın renkleri istediğiniz gibiyse Pixilo ile boyutlarını sayfaya göre ayarlayabilir veya dosya boyutunu azaltabilirsiniz. Hazırladığınız kopyayı, indirdiğiniz sonuçla karşılaştırmak için saklayın.

Pixilo yeniden boyutlandırma ve sıkıştırma sunar, ancak renk profillerini onarmak veya seçmek için ayarları yoktur. Yeniden boyutlandırmada ve birçok biçim dönüşümünde tarayıcı görseli yeniden çizer. Display P3 veya HDR özelliklerini korumanız gerekiyorsa çıktıyı dikkatle inceleyin. Her işlemin bunları koruduğunu varsaymayın.

Birden fazla görseli işlemeden önce tek bir görselle başlayın. Sonucu indirdikten sonra önemli renkleri ve ayrıntıları karşılaştırın, ardından yayımlanan sürümü kontrol edin. Fark yalnızca siteye yükledikten sonra oluşuyorsa sitenin görsel işlemesini veya sayfa efektlerini inceleyin.

Sık sorulan sorular

Display P3 görsellerini her zaman sRGB'ye dönüştürmeli miyim?

Hayır. Display P3 daha geniş bir renk aralığı sağlar ve site ile ziyaretçilerin cihazları desteklediğinde yararlı olabilir. Sitenizin bunu nasıl işlediğinden emin değilseniz sıradan yayınlar için sRGB kopyası daha kolay bir başlangıçtır. Orijinali saklayın. WebKit, profili bulunan görsellerin ekrana nasıl uyarlandığını açıklar.

Telefon fotoğrafımın en parlak alanları neden sönükleşiyor?

Orijinal HDR olabilir. High dynamic range, yani yüksek dinamik aralık, karanlık ve parlak alanlar arasında daha büyük bir fark gösterebilir. Standart bir kopya bu görünümü korumayabilir. Bazen SDR olarak adlandırılan standart dinamik aralık için dışa aktarma seçeneği arayın. Program bu uyarlamaya tone mapping, yani ton eşleme diyebilir: HDR parlaklığını standart aralığa sığdırmak. Özellikle parlak alanları ve gölgeleri kontrol edin. Yalnızca renk profilini değiştirmek bu işlemi yapmaz. WebKit'in HDR açıklaması ekranın bu özelliğini anlatır.

PNG doğru renkleri garanti eder mi?

Hayır. PNG kaydedilmiş piksel değerlerini değiştirmeden koruyabilir, ancak uygulamanın bunları yine de doğru yorumlaması gerekir. Biçim değiştirmek yanlış veya bilinmeyen bir renk profilini onarmaz.

Tasarımcı CMYK görsel gönderdiyse ne yapmalıyım?

CMYK baskı için camgöbeği, macenta, sarı ve siyah kullanır. RGB, ekran görselleri için kırmızı, yeşil ve mavi kullanır. Web için ayrı bir sRGB kopyası isteyin veya renk dönüşümünü destekleyen bir programda hazırlayın. Baskı için olan orijinali saklayın. Adobe'nin renk modları rehberi farkı açıklar.

Logom neden sayfanın renk koduyla eşleşmiyor?

#336699 gibi bir kod, onaltılık renk kodudur ve web sayfasında bir sRGB rengini tanımlar. Başka renk talimatlarıyla hazırlanmış bir logo bununla eşleşmeyebilir. Şeffaflığı ve sayfa efektlerini de kontrol edin. Logonun içindeki tek renkli bir alanı karşılaştırın; yumuşak kenarlarda kısmen şeffaf pikseller bulunabilir. MDN'nin onaltılık renk belgesi gösterimi açıklar.