Görsellerinizi Kayıpsız Sıkıştırarak Sitenizi Hızlandırın
*Giriş kısmını, görsel sıkıştırma konusunun akılda kalması ve gereken hassasiyetin her zaman gösterilmesi adına biraz uzun tutmak istedik, yalnızca gerekli işlemlere geçmek isterseniz lütfen alt bölümdeki başlık ve sonrasını okuyunuz.
İnternet dünyasının kuralları teknolojinin gelişmesine bağlı olarak sürekli olarak değişmekte ve bu değişime ayak uydurmak bahsettiğimiz dünya içerisinde kalıcı olarak yer almak için hayati öneme sahip olmakta. Özellikle arama motorları arasında "demir yumruk" gibi olan Google'ın SEO çalışmaları konusunda hassas olduğu ve bu hassasiyetinin yıl içerisinde yayımladığı çeşitli güncelleştirmeler ile web dünyasında hissedildiğini belirtelim. Google SEO kurallarını genele yaymak ve web dünyasına yerleştirmek istiyor.
Google başta olmak üzere diğer arama motorlarının da yanı sıra İnternet hizmetine erişen herkesin en başta arzu ettiği en önemli hususlardan birisi blog/site yüklenme hızının makul bir düzeyde olmasıdır. Düşünün ki Google'da yaptığınız bir anahtar kelime aramasına bağlı olarak herhangi bir blog/site sayfasını açmanız gerekiyor; çünkü aradığınız bilgi tam da orada. Fakat bir sorun var..! Sayfa yüklenme hızı o kadar yavaş ki çoktan bir ansiklopedi bulup içerisinden o bilgiye ulaşabilirdiniz, hay aksi! Yahut bu denli sayfa indirme işlemi yapan bir blog/site için kotalı İnternet hizmetinizi ve de zamanınızı heba etmeyebilirdiniz. Pekala, sizin internetiniz hızlı olabilir ve de kota sorununuz olmayabilir ancak herkes aynı şansa sahip değil bunu unutmayın.
Peki sayfadaki görseller ve yüklenme hızı neden bu kadar ilişkili? diye bir sorunun sorulduğunu varsayarsak cevabını kısaca şöyle açıklayabiliriz. Blogunuz/Siteniz bolca görsel(jpeg, png, gif ve benzer uzantılı) içeriğe sahipse ve siz bu görselleri olduğu gibi -sıkıştırmadan- yazılarınıza ekliyorsanız tosbağadan hallice sayfa yüklenme hızları kaçınılmazdır. Görsellerin sayfa yüklenme hızlarına getirdiği ek yük milisaniyeler cinsinden ölçülse de milisaniyeler zamanla görsellerin artmasıyla yavaş yavaş saniyeleri oluşturur ve 30-40 saniyede açılan bir sayfada da genelde kimse durmaz. Hayır yani daha hızlı yüklenen başka siteler varken neden sizi tercih etsinler ki?!
Sanırım Google'ın neden SEO kurallarını yerleştirmek isteğini daha iyi anlıyorsunuz. Bu kuralların en önemli ayaklarından birisinin sayfa yüklenme hızı olduğunu epey bir kavradık artık.
Online olarak .png ve .jpeg formatlı görsellerimizi kayıpsız sıkıştırma yani gözümüzün ayırt edemeyeceği kadar benzer ve aynı kalitede sıkıştırma imkanına sahibiz. Aslında kayıpsız sıkıştırma işlemini yapabilen programlar mevcut olsa da gerek kullanımları açısından gerekse de "kayıpsız" dediğimiz en mühim unsuru bir çoğunun sağlayamamasından dolayı bu yazıda, İnternet elinin altında olan insanlar olarak çok daha pratik bir yolla sıkıştırma işlemlerini yapmayı göreceğiz.
Görselleri Kayıpsız Sıkıştırmak
Önemli mi? Giriş kısmını okumadınız galiba, yakaladık :)
İnternette en çok kullanılan iki uzantı .png ve .jpeg için uygulamalı gösterim yapacak olsak da sizin daha sıklıkla kullandığınız uzantılı görsellere uygun araçlara da ulaşmanız ve bu basit adımları o uzantılar için uygulamanız mümkün olacaktır.
*Küçük bir not .png uzantılı görseller genelde çok daha iyi sıkışırlar ve kalite konusunda daha az kayıpları olur mümkünse yazılarınızda .png uzantılı görsel kullanmanızı tavsiye ederiz.
*Küçük bir not .png uzantılı görseller genelde çok daha iyi sıkışırlar ve kalite konusunda daha az kayıpları olur mümkünse yazılarınızda .png uzantılı görsel kullanmanızı tavsiye ederiz.
Bloghocam üzerinden aldığımız iki ekran görüntüsünün birisini .jpeg diğerini de .png olarak kaydettik. Kayıpsız sıkıştırma işlemini yapacağımız siteler ise şunlar:
JPEG uzantılı olarak ekran görüntüsünü aldığımız bölümün sıkıştırılmamış orijinal hali 55 Kilobyte iken JPEGmini'yi kullanarak 4 Kilobyte'lık bir sıkıştırma gerçekleştirdik ve görseli 51 KB boyuta düşürdük. Milisaniyeleri kazanmaya başladık.
.png)
"İki resim arasındaki yedi farkı bulmaya çalışın" :) Gördüğünüz gibi daha doğrusu göremediğiniz gibi iki resim arasındaki kalite farkı diye bir şey bizim gözümüz için yok gibi, aralarındaki tek fark birisinin sıkışmamış ve büyük boyutlu olması diğerinin ise sıkışmış ve küçük boyutlu olması. Üstelik JPEG uzantılı olmasına karşın fark gözle görülemeyecek kadar az durumda.
JPEGmini Kullanımı
.png)
"İki resim arasındaki yedi farkı bulmaya çalışın" :) Gördüğünüz gibi daha doğrusu göremediğiniz gibi iki resim arasındaki kalite farkı diye bir şey bizim gözümüz için yok gibi, aralarındaki tek fark birisinin sıkışmamış ve büyük boyutlu olması diğerinin ise sıkışmış ve küçük boyutlu olması. Üstelik JPEG uzantılı olmasına karşın fark gözle görülemeyecek kadar az durumda.
JPEGmini Kullanımı
Öncelikle JPEGmini isimli siteye giriyoruz. Sağ üst bölümdeki "Try It Now" bölümüne tıklıyoruz
Karşımıza çıkan yeni bölümden "Upload Your Photo" kısmını tıklıyoruz. Sıkıştırmak istediğimiz JPEG uzantılı görselimizi seçiyoruz.
Artık görselimiz karşı tarafa yükleniyor ve sıkıştırma işlemine geçiliyor. Sıkıştırma öncesi ve sonrası interaktif bir panel sayesinde size sunuluyor eğer sıkıştırma performansını beğenirseniz panelin sol alt bölümündeki "Download Full Res." kısmına tıklayarak sıkıştırma işlemi yapılmış görseli indirebilirsiniz. Ancak bir süre sonra üye olmak gerekebiliyor sınırlı sayıda sıkıştırmaya izin veren sistemleri üye olunca sınırsız kullanım ve de ek özellikleri ücretsiz sunuyor.
Orijinal dosya adına "-mini" ekini otomatik koyacak olan sistem bu sayede aynı isimle kayıt yapıp işlem görmemiş görselinizin silinmesini engelliyor.
Benzer bir şekilde PNG uzantılı görselimizi sıkıştırarak boyuttan tasarruf elde edebiliriz. Örnek olması için Bloghocam'dan aldığımız ekran alıntısını PNG formatında kaydettik ve TinyPNG ile sıkıştırdık. Sonuç ise oldukça başarılı. Orijinal görsel boyutu 46.6 KB iken kayıpsız sıkıştırılan yeni görselin boyutu 16.7 KB oldu. Bu sıkıştırma oranı % 64 gibi boyut tasarrufu sağlıyor ki sayfa yükleme hızını nedenli olumlu etkileyeceği ortada.
Tüm bu işlemleri yaparken ve yazıya eklediğimiz görselleri sıkıştırırken elde ettiğimiz sıkıştırma boyutu 1 MB üzeri oldu. Görselleri sıkıştırmanın ne denli avantajlı sonuçları olduğunu sanırım rakamsal olarak da görmüş olduk.
TinyPNG Kullanımı
Yalnızca siteye girip PNG uzantılı dosyalarınızı aşağıdaki görseldeki gibi dikdörtgen alana sürükleyip bırakmanız yeterlidir. "Compressing" yazısı "Finished" oluncaya dek bir şey yapmanıza gerek yok. İşlem bitince sağ bölümde "Download" sekmesi çıkacak bu sekmeden sıkıştırlmış PNG görselinizi indirebilirsiniz.
Benzer bir şekilde diğer formatları da sıkıştırabileceğiniz online hizmetler İnternette mevcut ancak PNG başta olmak üzere tavsiyemiz blog/sitenizde ve yazılarınızda PNG-JPEG formatında görseller kullanmanız. Mümkünse PNG formatını kullanmaya çalışın. Bu yazının sizlere faydalı olmasını dilerken Serdar Kara Hocamıza blogunda bize de yer verdiği için teşekkür ediyoruz. Değerli vaktinizi ayırdığınız için size de ayrıca teşekkür ediyor iyi bloglamalar diliyoruz :)
Yazı Hakkında: Bu yazı uzun süredir çeşitli konularda başka başka diyarlarda yazı yazan kafadar blogcuların son 1.5 yıldır tek bir hesap üzerinden fırsat buldukça teknoloji haberleri ve bilimsel gelişmeler konusunda kendi dünyalarına göre yayın yaptıkları Teknoloji Manya BLOG adına Blog Hocam için yazılmıştır.
.png)
çok teşekkürler ,mutlu bayramlar
YanıtlaSilgüzel paylaşım
YanıtlaSiloldukça yararlı bir yazı olmuş teşekkürler
YanıtlaSilYararlı bir yazı teşekkürler. Favorilere aldım yararlı olacaktır. Ben bir de resim sıkıştırmak için Caesium diye bir program var onu kullanıyorum.İlgilenenler deneyebilir.
YanıtlaSilPNG formatındaki dosyayı sıkıştırırken orjinali ile arasında hiçbir fark göremedim şimdiye kadar. JPEGmini'yi şimdi sizin sayenizde öğrenerek kontrol etmek için denedim sadece hafif bir renk kaybı ortaya çıkıyor. PNG dosyalarının sıkıştırma tekniği daha iyi gibi geldi.
YanıtlaSilAnlatım için teşekkürler hocam
YanıtlaSilMerhaba,
YanıtlaSilBugüne kadar Oscar Favorite adlı blogumda hiçbir resmi sıkıştırmadan direk yükleme yapmıştım. Bunlar hep karışık formatlarda oldu jpeg, png, gif hepsinden de kullandım. Şimdi geriye dönüp bütün resimleri yeniden bu programlar sayesinde küçültme yapıp tek tek mi yüklemem gerekiyor? Ve gif sıkıştırmaları için ne kullanmam gerekir?
Ayrıca, ''Site yavaşlamasına sebep olan resim kaynaklı en önemli faktörlerden birisi de resim boyutudur. Örneğin elimizdeki resim 1024x728 boyutunda. Sitemize koyduğumuz bölümde ise resmimizin görünen boyutu 340x220.. Resmimiz gözle görülmeyecek hızda gerçekleşse de önce sitede 1024x728 formatında açılacak, daha sonra 340x220 formatına düşürülecek. Bu da sitemizin yavaşlamasına, google değerlendirmesinde sürekli hata olarak karşımıza çıkacak. Burada yapılması gereken eğer resmin kullanılacağı yerin boyutu 340x220 formatında ise resmimizi buna yakın bir değere getirip yüklemek.'' şeklinde birçok yerde bu yazıyla karşılaştım. Burada blogumun yayın içerisindeki resimleri kullanacağı yerin boyutunu nasıl ve nereden öğrenebilirim? Ve kafa karıştıran bir şey daha: ''Resmimizi buna yakın bir değere getirip yüklemek.'' ten kasıt nedir acaba? Yani blogumuza o yerin izin verdiği boyutların üzerinde hiçbir şekilde resim yüklememek mi? Ya da yine büyük resimlerimizi sıkıştırarak yükleyip ama html içerisinde bir yerde boyutlarıyla oynamak mı?
Bir de ''PageSpeed Insights'' ya da ''gmetrix'' ile bu gibi sorunları hem site hızımızı test edip hem de optimize edebilmemiz için yeterli olduğunu öğrendim. Bunu şu sebeple söylüyorum. Acaba geri dönüp tek tek hepsini sıkıştırıp yüklemek değil de bunları toplu halde yine resim kalitesinden pek bir şey kaybetmeden yapabileceğimiz bir yer var mı? Ya da bu yer bu iki siteden birisi midir? Bu gibi yerlerin site hızımıza olumlu katkısı olduğu her yerde yazıyor fakat gelin görün ki orada ki testlerde karşılaştığımız hataları nasıl düzelteceğimiz hiçbir yerde html bilgisi çok az olan bir insanın anlayabileceği bir şekilde ele alınmamış. Ben mesela iki gündür ''Aşağıdakilerin Css Yayınını optimize edin.''
Başlığı altında hata çıkmış testimde ve onları halledebilmek için uğraşıyorum bir arpa boyu yol kat edemedim.
http://www.blogger.com/static/v1/widgets/305307800-widget_css_mobile_2_bundle.css
http://www.blogger.com/dyn-css/authorization.css?targetBlogID=
Yazı ve bilgilendirme için çok teşekkür ederim. Gerek sizin gerekse de Serdar arkadaşımın bu konu ile ilgili geniş bir paylaşımlarınızı bekliyorum.
@ALPer SAGLAM uzun bir süre soru gelmeyince bu başlığa bir müddet göz atmadık, kusura bakmayın.
YanıtlaSil1- Geriye dönük bir çalışma yapmak yerine artık yüklemelerinizde sıkıştırma işlemi yapmanız daha doğru olur. Mevcut içerik için sürekli ve toplu güncellemeler google ve diğer arama motorlarının pek sevdiği bir işlem değildir. Cezalandırılma riski olan bir işlem olduğu için mümkün oldukça geriye dönük işlem yapmamaya çalışın.
Gif görsellerin sıkıştırılması için de bir çok online hizmet mevcut ezgif bunların en popüleridir. >> http://ezgif.com/optimize
2- Sorunuzda kısmen doğru. Yani siz görsele dayalı bir site/blog yönetiyorsanız ve trafiğinizi görsellerinize borçluysanız ziyaretçileriniz görselleri tam boyutuyla görmek isteyeceklerdir. Eğer görsel ebatlarını küçültürseniz bu durumda trafik kaybı yaşamanız muhtemel ki boyutlandırma yapmadığınız için kaybedeceğiniz yalnızca site notuyken boyutlandırma yaptığınızda kaybedeceğiniz ziyaretçileriniz olacak.
Yok eğer yalnızca içerik zenginleştirme amacıyla görsel kullanıyorsanız evet görsellerinizi blogunuzda sunduğunuz ebat kadar boyutlandırın ve öyle yükleyin blogunuza.
Örneğin 240x240 sunacağınız bir görseli blogunuza 640x640 boyutlarında yüklemeyin. Paint ve benzeri araçları kullanarak en düşük boyutlarda ihtiyaçlarınızı karşılayacak şekilde boyutlandırma yapabilirsiniz. Blogger kullanırken küçük-orta-geniş-çok büyük gibi görsel boyutlandırma seçeneklerinin olduğunu fark etmişsinizdir bu durum tıpkı sizin belirttiğiniz gibi bir durum ortaya çıkarır. Eğer blogger tarafından sunulan bu seçeneklerden en uygun boyuta kanaat getirdiyseniz Paint ve benzeri araçlarda standart bir boyut elde edebilir, ayrıca görseli yazıdaki gibi sıkıştırabilir iki kere kazançlı çıkabilirsiniz.
3- Gtmetrix, pingdoomtools,w3c gibi online optimizasyon araçları oldukça iyi html, css, js gibi web programlama bilgisi gerektirirler. Belirli konularda verilen uyarı ve hatalar popüler siteler için de çıkar ki bu durumda es geçilmesi gereken hatalar demek ve zaman harcamamak gerekebilir. Eğer yakınınızda birebir yardım alabileceğiniz web programcısı mevcut ise bu konularda ondan/onlardan yardım almanız asıl işiniz olan "blogculuk" için size zaman kazandıracaktır.
Yazımızı okuyup beğendiğiniz için teşekkür eder geç cevabımız için de özür dileriz.
Kolay gelsin iyi bloglamalar.
@Teknoloji Manya geri dönüş için ben teşekkür ederim. Problemleri bir nebze çözdüm sağ olun. Size de kolay gelsin.
YanıtlaSilBu güne kadar hiç böyle bir işlem yapmamıştım, yorumlardan da geriye dönük bir çalışmanın doğru olmadığı izlenimini edindim, bundan sonraki resimlerimi ise sayenizde küçülteceğim, teşekkürler. Yine her zamanki gibi çok faydalı bir paylaşım olmuş.
YanıtlaSilMerhabalar...
YanıtlaSilAnlaşılır bir dil ve güzel yazınız için teşekkürler.
Yorum bölümünde yaptığınız bir açıklama ilgimi daha çok çekti.Diyorsunuz ki;
"Geriye dönük bir çalışma yapmak yerine artık yüklemelerinizde sıkıştırma işlemi yapmanız daha doğru olur."
Ancak; Pagespeed taramasından sonra insanı rahatsız edecek şekilde görülen kırmızı renkli uyarı penceresinin altındaki;
1. Oluşturma engelleyici JavaScript'i kaldırın
2.Aşağıdakilerin CSS Yayınını optimize edin
sorularının bir yanıtı olmalı.Yada görmezlikten mi gelmeliyiz.
İyi günler-başarılar
merhabalar Tinypng ile blog resimlerimi sıkıştırdım, hiçbir fark olmadan boyutu düşürdü. Sitemin hızınada etkisi oldu. Tinypng 'yi tavsiye ederim herkese.
YanıtlaSilUzun zamandır çözümünü aradığım bu konuyu sizin paylaşımınız ile çözdüm. Bana büyük katkı sağlayan yazınız umarım farklı kişilerede ışık olur. Değerli paylaşımınız için çok teşekkürler.
YanıtlaSilMerhaba, vermiş olduğunuz bilgiler için teşekkür ederim. Çok işime yarayacak. İyi çalışmalar.
YanıtlaSilÇok yararlı olmuş tiny güzel bir site.
YanıtlaSilBeğenmenize sevindik iyi bloglar.
SilÇok Teşekkürler , çok faydalı oldu
YanıtlaSilMerhaba,
YanıtlaSilYayına yeni aldığımız Proje için de sayfanızda yer vermeniz ricası ile.
www.pictureport.net