» » » » Siteye Eklenen Resimleri Olduğundan Daha Kaliteli Gösterin (Küçük Bir CSS Kodu)

Siteye Eklenen Resimleri Olduğundan Daha Kaliteli Gösterin (Küçük Bir CSS Kodu)

Reborn
Reborn 29-03-2017, 06:37
Herkese merhabalar. Çoğu Webmaster için siteye eklenen resimlerin boyutları sayfa açılma hızını, sunucu disk alanını, ve trafiği olumsuz yönde etkilemektedir. Bu nedenle resimleri mümkün mertebe optimize ederek çözünürlüğü düşürü öyle yükleriz. Optimize ettiğimiz resimler haliyle orjinali kadar net görünmeyecektir.

Yukarıda belirttiğimiz olumsuzlukları önemli ölçüde iyileştiren küçük bir CSS kodu resimler üstünde herhangi bir oynama vb işlem yapmadan sadece bulunduğu konumda olduğundan daha doygun görünmesini sağlıyor bunun dışında resimlere herhangi bir müdahale söz konusu değil...

Diyelim sitenizin sağ kısmında Popüler haberler bloğunuz Resim ve altında başlık ile gösteriliyor. ilgili bloğun Class'larını yine ilgili CSS dosyası içinde buluyoruz

örnek benim sağ bloğumdaki resimleri
Sytles.css Çekiyor
Styles.css dosyasımı bir editörle açıyorum (Notepad++ olabilir)
Açtığım CSS dosyamın içinde ilgili Class'ları buluyorum. Aşşagıda eklediğim kod kısmında yer alıyor.

.story_line .image { float: left; width: 159px; height: 97px; border-radius: 1%; margin-right: 4%; background-color: #FFF; position: relative; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);  }


Yukarıdaki normal hali. Hemen kodların bitimine şu basit doygunluk kodunu ekliyorum 

-webkit-filter: saturate(1.4);


Ve kodu eklediğim class'ın tamamı.


.story_line .image { float: left; width: 159px; height: 97px; border-radius: 1%; margin-right: 4%; background-color: #FFF; position: relative; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); -webkit-filter: saturate(1.4); }


Artık resimler olduğundan daha kaliteli görünecektir. Fark gözle görülür derecede.
Siteye Eklenen Resimleri Olduğundan Daha Kaliteli Gösterin (Küçük Bir CSS Kodu)


Not: Bahsini ettiğimiz koddaki 1.4 değeri doygunluk derecesini ayarlar, sayıyı yükseltirseniz doygunluk artar ve abartılı olur. Ben 1.4 de karar kılmıştım tercih sizin. Konu basit mevzu uzun oldu kusura kalmayın bilmeyenler için açıklayıcı olmaya çalıştığımdan. Kolay gelsin

Benzer Konular

Bilgilendirme
Yorum Ekleyebilmeniz için Sitemize Kayıt Olmanız Gerekmektedir.
0
kralceco 15 Kasım 2017 17:38
@MaRZoCHi, @Reborn, hocalarım şimdi şöyle bir sıkıntım var. sitedeki poster resimleri makaledeki editörden çekiyorum resimleri olduğu gibi çektiğinden dosya boyutunu ayarlamak mümkün olmuyor. yeri geliyor 3mb resim çekiyorum. resimlerin boyutlarını otomatik optimize eden bi eklenti modul yokmu acaba kurduğumda dosya boyutlarını otomatik düşürsün. çünkü şuan anasayfa açılış hızım 6 7 saniye ?
Şikayet Et
0
Reborn 31 Mart 2017 07:50
Kod grafik içeren tüm CSS bileşenlere uygulanabilir.

Hızlı ve stabil çalışan bir site için şunları es geçmeyiniz;
-Tema'nız ve içerikleriniz için hata ayıklamasını Buradan yapın ve sorunlu öğeler varsa listelenir düzeltmeye çalışın
-CSS ve javascript sıkıştırması
-Yüklenen Resimlerin yükleme öncesi optimizasyonu (JpegMiniPro ile yapın çok etkili)
-Ve son olarak benim verdiğim ufak hile diyebileceğimiz yöntem ile grafiklerin görüntüsüne doping etkisi yapın.

Not: Siteye eklediğiniz başlıklar bile düzgün karakter içermezse sayfanızda tutarsızlık meydana gelebiliyor. Konulara girdiğiniz başlıkları tırnaklar içine aldığınız kısımlar bile doğru şekilde girilmeli.

Yanlış
"Galaksinin koruyucuları" filmin yeni fragmanı yayınlandı

Doğru
‛Galaksinin' koruyucuları’ filmin yeni fragmanı yayınlandı
Şikayet Et
3 779
MaRZoCHi 30 Mart 2017 02:14
Güzel bir yöntem. Opimizasyon açısından grafiklerin görünen boyutu ile aynı ve sıkıştırılmış olması önemli.

--------------------
Mehmet Hanoğlu | mehmethanoglu.com.tr
Şikayet Et