23 Mart 2009 Pazartesi

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.


Image Hosted by ImageShack.us

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.

Image Hosted by ImageShack.us

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.

23 yorum:

  1. Homer e ayrı bravo paylaştığın bilgiye ayrı bravo :))

    YanıtlaSil
  2. aydınlatıcı bilgilerin süper ..teşekkürler ..beneim bunları uygulayabilmem için 10 fırın ekmek yemem lazım...

    YanıtlaSil
  3. Teşekkür ederim canım,yüreğine sağlık.

    YanıtlaSil
  4. Yeni bir haftaya merhaba... Paylasim icin tskler. Yildizlariniz bol bol parlasin. sevgiler, medinem

    YanıtlaSil
  5. Gece ben sana bir şey itiraf edeyimmi?kota falan dinlemeden kolayıma geliyor buradan yüklüyorum resmi 60 resm oldu herhalde.Senin yöntemi denemek de farz oldu yani.
    Bu arada oyuncakta çok şirinmiş.
    Sevgiler.

    YanıtlaSil
  6. Yine faydalı bir bilgi. Paylaşım için teşekkürler. Ayrıca bu Homer' a bayılıyorum ben ya...

    YanıtlaSil
  7. dediğin gibi geç açılan bloglar anında kapatılıyor ziyaretçi tarafından, mesela bu sayfan da geç yüklendi ama yazıyı okumak için bekledim :) şaka bir yana resimlerin boyutu jkaliteli içeriği kapamamalı bence.yani çok resim ekleyerek yazı gözden kaçabiliyor.ben de yazılarımda çok resime yer vereceksem küçük boyutta kullanıyorum...

    emek verip anlatıyorsun bizlere,sağolasın gececim...

    YanıtlaSil
  8. Fazla bilinmeyen bu konularda bilgilendirmelerinizi ilgiyle takip ediyorum.Benim bir sorum olucak bilginiz varsa söyliyeceğinizden eminim .
    Ben bloğumda şöyle birşey yapmak istiyorum bir konuda 1 resim görünse anasayfada ve yazının da bir kısmı görünce devamı için devamını okuyunuz gibi bir link olsa ona tıklanınca konu kendi sayfasında tüm resim ve metniyle açılsa...
    Birkaç yerde böyle sıralamalar gördüm am anasıl yapılacağını bulamadım sizin bir fikriniz var mı acaba...

    Çok teşekkürler herşey için kolay gelsin...

    YanıtlaSil
  9. resim büyütmeyi bilmiyorum ama homere bayılıyorum .şAHANE TEK KELİMEYLE...

    YanıtlaSil
  10. Paylaştığın bilgiler için teşekkürler...

    YanıtlaSil
  11. oo maşallah da şu an kafam karışık...bir ara tekrar okurum..

    YanıtlaSil
  12. ge-ce ne kadar akıllısın, her blogdan yararlanmam, blogunuzdan yararlandığım kadar..
    Allah, Allah..

    YanıtlaSil
  13. sağol canm verdiğin güzel bilgiler için

    YanıtlaSil
  14. sevgili gece öncelikle böyle nitelikli bişeye imza attığın için çok teşekkürler gerçekten çok güzel konulara değiniyorsun,benim sana bi sorum olacak,ben blogumu sizinkiler gibi 3 bölmeli istiyorum akşamdan beri tarif ettiğim adımları tek tek uyguladım ama beceremedim hatta test blogumu bozdum:s bana yardım ettt

    YanıtlaSil
  15. Yine aydınlatıcı bir bilgi vermişsin teşekkürler.Homer da süper bu arada.

    YanıtlaSil
  16. piksel buyutme oldukca faydali oyleyse GeCecim :)) Ben kotamin baya bir kismini doldurdugum icin resimleri hep kucultup ekliyorum :) Tesekkurler :)

    YanıtlaSil
  17. walla nerden de buluyon böyle faydalı bilgiler kendimi seni okudukça çok cahil hissediyorummm.

    YanıtlaSil
  18. Tesekkurler bende arastiriyordum
    nasil yuklemeliyim diye
    Cok guzel aciklamissiniz
    Sevgiler

    YanıtlaSil
  19. Bilgiler harika gerçektende. Fakat benim bir sorum var. Bloga Gözat kısmında resim eklediğim zaman bazı resimlerime link veriyor bazılarına vermiyor. Bunu çözmenin bir yolu var mı acaba? Resimlere tıklanmıyor ve büyümüyor çok sinir bi durum

    YanıtlaSil
  20. GeCecim ben bayramda bu dersi çalıştım.Dediklerini aynen uyguladım herşey oldu ama son safhada fotonun netliği bozuldu.Ölçüleri ona göre ayarlasamda bu seferde foto küçüldü. :((

    YanıtlaSil
  21. Merhaba GeCe bilgiler çok güzel paylaşım için çok teşekkürler. Benimde resimler konusunda bulanıklık sorunum var pcde net olan resimler yüklenince burdan flu çıkıyor nedenini çözebilmiş değilim!

    YanıtlaSil
  22. bu bilgi için çok teşekkür ederim.

    YanıtlaSil
  23. Bana çoook faydası oldu :) Cansın can...

    YanıtlaSil