Blogumuza Büyük Resim Ekleme

Bugün daha önce Kotayı Doldurmadan Blogger'a Resim Ekleme yazımın daha genelleştirilmiş halini paylaşaceğım. Örnek olarak eskilerden kalmış bu resmi kullanıyorum. Bu resmi bilgisayarımdan gözat diyerek ekledim. Yazıyı yazdığımız bölümde, resim ekledikten sonra html düzenleye gelirsek aşağıdaki kodu göreceğiz.


Koda baktığımızda ilk başta resim için bir link verildiğini görüyoruz, sonra blogger o resim için bir id (ad) vermiş, ardından genişlik ve yükseklik değerleri var, src ile başlayan kısım da resmin kayıtlı olduğu url adresi.

Koyduğum resim için genişliğin 300 piksel, yüksekliğin 400 piksel olduğunu görüyorum. Oysa bu resim üzerine tıklandığında orjinal boyutu 750*1000 piksel, blogger onu 300*400 görüntülüyor.

Şimdi kodun içinde 300 ve 400 yazan yeri değiştirelim. genişliği 500 piksel yüksekliği 666 yaptım. Burada en/boy oranını koruyacak şekilde genişletiyor ya da daraltıyoruz. Yoksa resim çarpık görünecek.

Görüldüğü gibi resim büyüdü ancak netliği bozuldu biraz, bu şekile bir oynama resmin kalitesini bozuyor. Ancak kodda hala bir link olduğu için resme tıklandığında başka bir sayfada açılacaktır.

Şimdi resmi başka bir blogdan, yada platformdan yükleyelim. Bu durumda eski yazıda yazdığım gibi url ile ekliyoruz. Bu durumda resmin orjinal boyutu ne ise o şekilde görülür. Ve solda yer alır. Artık bir link olmadığı için üzerine tıklanmayacak.

Görüldüğü gibi url ile eklediğimizde (nereden eklemiş olursak olalım) resim orjinal en boy oranlarıyla görünür. Ancak büyük resimlerin kapladığı yer de büyük olduğundan mesela bu resim 98 kb imiş, (fazla değil ama daha fazla olanlar için 1 mb falan) sayfanın yüklenmesi yavaşlayacaktır.

Eğer yazı alanınızın genişliği resimden küçükse resim yukarıdaki gibi taşmış görünecek ve hiç de hoş değil.

Bunu düzeltmenin bir yolu da url ile resmi eklediğimiz kodun içine genişlik ve yükseklik değerlerini girmek. Aynı kodun içine bu sefer 500 ile 666 piksel genişlik ve yükseklik değerlerini yazayım. width="500" heihgt="666" ifadesini yazalım.(bu rakamlar benim resmim için böyle siz kendi resimleriniz için uygun değerler bulmalısınız)Bu ifadeyi /> işaretinden önce , yani kodun içine girmeliyim.



Böylece taşmış resmi taşmadan görüntüleyebiliriz, ancak sayfa açılırken hala o büyük yer kaplayan resim yüklenmeye başlayacak dolayısıya görüntüsü küçük olsa bile yüklenmesi zaman alacaktır.

Son resimde görülen en-boy oranları 2. resim ile aynı olmasına rağmen netlik farkını görüyorsunuz.

Blogger resim yükleme bölümünde işte sayfaların kolay görüntülenmesine olanak sağlayacak şekilde bir önizleme gösteriyor. Bu açıdan iyi bir uygulama.

Diğer yandan yavaş açılan bir siteye kimse tahammül edemez. Kendi bilgisayarınızda siteniz daha hızlı ekrana gelebilir ama bunu sebebi sizin görsellerinizin arabellekte kayıtlı olmasıdır. İlk defa gelen bir ziyaretçi sayfanın yüklenmesi için beklemek zorundadır.

Örnek olarak Pastanbul'u vereceğim. Site tasarımı çok güzel ve birçok siparişim ona benzesin diyerek geliyor. Ancak bir açıdan olumsuz bir site çünkü yok yavaş yükleniyor. Bir dakikadan fazla sürüyor yüklenmesi ki ziyaretçinin maksimum tahammül sınırı 10 sn dir.

Sanırım tasarımcısı (başka bir ülkeden) kendi ülkelerindeki internet hızını baz alarak yapmış, bizde internet çok hızlı değil. Mesela dosya indirirken saniyede kaç kb lık aktarım var. Bu ortalama hızımızdır ve bir sayfadaki toplam resilerin kaç kb olduğuna dikkat etmek lazım. 10 sn yi aşmayalım.

Bunu önlemenin bir yolu da sayfa başına gösterilen yazı sayısı olacaktır. Eğer 100 tane yazıyı (ve onun resimlerini) göstermeye kalkarsanız site açılmak bilmez. Ortalama 5-6 uygundur.

Not: Amigurumi Homer tarafımdan aylar önce yapılmıştır.