WebP ve WebM nedir? Faydaları nelerdir, nasıl kullanılır?

WebP ve WebM nedir? Faydaları nelerdir, nasıl kullanılır?
{"id":98,"post_type_id":"24","title":"\u0130lker \u00d6nal","sefurl":"ilker-onal","status":"1","index":"1","order":"0","published_at":"2020-06-28 17:40:00","created_at":"2020-06-28 17:43:44","updated_at":"2023-10-03 11:37:38","post_type":{"id":24,"type":"2","title":"Yazarlar","singular_title":"Yazar","menu_title":"Yazarlar","icon":"far fa-signature","single_url":null,"single_template":"single-author","single_status":"1","comment_status":"0","tag_status":"0","priorty":"0.5","change_frequency":"monthly","seo_title_rule":"[title] - Adgrey","seo_desc_rule":null,"direct_content":"0","status":"1","only_admin":"0","visual_part":"0","order":"13","created_at":"2020-05-31 21:09:59","updated_at":"2023-10-12 15:59:17"},"details":[{"id":487,"post_id":"98","post_type_input_id":"189","value":"\u0130lker \u00d6nal | Adgrey","order":"0","created_at":"2020-06-28 17:43:44","updated_at":"2022-01-26 12:25:36","post_type_input":{"id":189,"post_type_id":"24","type":"text","title":"Seo Ba\u015fl\u0131k","sefurl":"seo-baslik","required":"0","grid":"6","right_area":"0","sortable":"0","list_item":"0","only_admin":"0","properties":"{\"limit\":70,\"force_limit\":\"false\"}","order":"0","created_at":"2020-05-31 21:09:59","updated_at":"2020-05-31 21:09:59"}},{"id":488,"post_id":"98","post_type_input_id":"188","value":"\u0130lker \u00d6nal Adgrey kurucu orta\u011f\u0131 olarak yer almaktad\u0131r. \u0130leti\u015fim fak\u00fcltesi doktora e\u011fitimine devam etmektedir.","order":"0","created_at":"2020-06-28 17:43:44","updated_at":"2022-01-26 12:25:36","post_type_input":{"id":188,"post_type_id":"24","type":"textarea","title":"Seo A\u00e7\u0131klama","sefurl":"seo-aciklama","required":"0","grid":"6","right_area":"0","sortable":"0","list_item":"0","only_admin":"0","properties":"{\"limit\":160,\"force_limit\":\"false\"}","order":"0","created_at":"2020-05-31 21:09:59","updated_at":"2020-05-31 21:09:59"}},{"id":489,"post_id":"98","post_type_input_id":"190","value":"yuklemeler\/yazar-gorselleri\/ilkeronal01.png","order":"0","created_at":"2020-06-28 17:43:44","updated_at":"2020-06-28 17:43:44","post_type_input":{"id":190,"post_type_id":"24","type":"image","title":"G\u00f6rsel","sefurl":"gorsel","required":"1","grid":"12","right_area":"0","sortable":"0","list_item":"0","only_admin":"0","properties":"{\"folder\":\"yazar-gorselleri\",\"thumbs\":{\"default\":{\"width\":\"350\",\"height\":\"345\"},\"small\":{\"width\":\"32\",\"height\":\"32\"}}}","order":"1","created_at":"2020-05-31 21:11:44","updated_at":"2020-05-31 21:12:04"}},{"id":490,"post_id":"98","post_type_input_id":"191","value":"<p>\u0130lker \u00d6nal Adgrey kurucu orta\u011f\u0131 olarak yer almaktad\u0131r. \u0130leti\u015fim fak\u00fcltesi doktora e\u011fitimine devam etmektedir.\u00a0<\/p>","order":"0","created_at":"2020-06-28 17:43:44","updated_at":"2022-01-26 12:25:36","post_type_input":{"id":191,"post_type_id":"24","type":"editor","title":"A\u00e7\u0131klama","sefurl":"aciklama","required":"0","grid":"12","right_area":"0","sortable":"0","list_item":"0","only_admin":"0","properties":null,"order":"2","created_at":"2020-05-31 21:12:20","updated_at":"2020-05-31 21:12:20"}}]} İlker Önal
28 Haziran 2020
WebP ve WebM nedir? Faydaları nelerdir, nasıl kullanılır?

İnternet siteleri, geçmişten bugüne ciddi bir değişim geçirdi ve bu değişim hala sürüyor. Binlerce internet sitesinden milyarlarca internet sitesine ve ziyaretçiye giden yolda, sitelerdeki disk boyutunun optimize edilmesi ve sitelerin dosya yükleri ile başa çıkarak hızlandırılması adına birçok yenilik oldu. Kilobaytlarla ifade edilen dosya boyutları, megabaytlara hatta gigabaytlar seviyesine ulaştı.

 

Yüksek dosya boyutunun optimize edilmesi sürecinde, Google tarafından 2010 yılında düzenlenen bir konferansta duyurulan yeni nesil zengin medya formatları WebP ve WebM, internet sitelerinin dosya yükünü hafifleterek, daha iyi bir kullanıcı deneyimi sunmayı amaçlayan önemli bir yaklaşım.

WebP nedir?

Google’ın I/O konferansında tanıttığı bir dosya türü olan WebP, görsellerde kaliteden ödün vermeden üst düzey sıkıştırma sunan bir teknolojidir. WebP formatındaki görsel içerikler, çok daha düşük dosya boyutu içermelerine rağmen, yüksek kalitede bir deneyim sunar. Elbette, düşük dosya boyutu kaynaklı olarak sitenin hızı artarken, ziyaretçiler adına da bir olumsuz deneyim söz konusu olmaz.

 

WebP’de, kayıpsız sıkıştırma anlamına gelen WebP-Lossless ve kayıplı sıkıştırma anlamına gelen WebP-Lossy adında iki farklı tip mevcuttur.

WebP-Lossless nedir?

WebP formatının ilk türü olan kayıpsız sıkıştırma, görsel içeriğin sıkıştırmadan sonra, her pikselinin aynı olacağı anlamına gelir. Dosya, tüm pikselleri ile kayıpsız şekilde WebP formatına dönüştürülür. Görüntü kalitesinden ödün vermeyen WebP kayıpsız sıkıştırma tekniğinde, ortalama olarak %26 daha düşük boyutta görseller elde edilir.

WebP-Lossy nedir?

WebP formatının ikinci türü olan kayıplı sıkıştırma, görsellerde kullanıcıların anlayamayacağı ölçüde bazı pikselleri kaldırarak, yüksek sıkıştırma oranı sunan bir dosya tipidir. Kayıplı sıkıştırma tekniği sunan WebP-Lossy dosya türünde, dosyalar ortalama olarak yüzde 30-35 oranına kadar sıkıştırılabilir.

Neden WebP kullanmalısınız?

SEO’nun en önemli kriterleri arasında, site hızı geliyor. Site açılma hızını artırabilmek ve sayfaların, kısa süre içinde yüklenmesini sağlama sürecinde önemli kriterler arasında, sitedeki içeriklerin boyutunun optimize olması yer alıyor. WebP türünde dosya kullanımının en önemli avantajı, sitenizdeki görsel içeriklerin kullandığı dosya boyutunun yüzde 25 ile 35 arasında azalması. Dolayısı ile, sayfa yüklenme hızında da ciddi bir artış olması. Özellikle, birçok görsel içerik kullanan alışveriş siteleri, haber ya da blog siteleri için WebP, önemli bir optimizasyon silahı.

WebP ile ilgili bilinmesi gerekenler

Google’ın sunmuş olduğu bu etkili sistemin bir de olumsuz yönü var. Bu da, bazı internet tarayıcılarında WebP desteğinin tam anlamıyla olmaması. Internet Explorer ve Safari gibi bazı tarayıcılarda WebP desteği bulunmuyor. Ancak bu duruma karşı da bir çözüm mevcut. Dilerseniz, sunucunuzda Safari ya da Internet Explorer gibi tarayıcılardan girenlere görselleri jpeg ya da png formatında gösterebilir, diğer ziyaretçilere de WebP sunabilirsiniz.

 

Wordpress altyapısı kullanıyorsanız, WebP görseller kullanmak için çeşitli Wordpress WebP eklentilerinden faydalanabilirsiniz.

WebM nedir?

Google’ın tanıttığı, optimizasyon odaklı diğer bir dosya türü ise WebM. Video ve ses dosyaları için tanıtılan WebM, multimedya alanında MP4 formatına karşı bir alternatif olarak geliştirildi.

 

WebM, WebP’de olduğu gibi medya dosyalarını sıkıştırma ve sunucu üzerindeki dosya yükünü azaltmak adına geliştirildi. Dosya türünde, VP8 ve VP9 adlı kodekler kullanılıyor. WebM dosyaların avantajlarından biri, bu dosya türünde içerikler açılırken cihazların çok az bir güç kullanarak açılabilmeleri. Google, video şirketi Youtube’da da bu modeli kullanarak, video akışını daha maliyetsiz bir hale getirmektedir.

WebM kullanmanın avantajları

Google’ın, optimize bir web sayfasından beklediği en önemli şeylerin başında, site açılma hızının iyi ölçüde olması yer alıyor. Sayfa açılma sürecinde sayfa boyutu çok önemli bir kriter. Site tipi ve sektöre göre değişmekle birlikte, günümüzde boyutu 3-4 mb aralığında olan sayfalar, yavaş kapsamında ele alınıyor. WebM kullanmak, video gibi yüksek dosya boyutu gerektirebilen dosya türlerinde sayfa boyutunuzu azaltmanızı sağlar.

 

Internet Explorer ve Opera Mini gibi tarayıcılarda WebM desteğinde sorunlar olabilmektedir. Bu duruma karşı önlem almak için, dilerseniz WebP’de olduğu gibi, diğer tarayıcılar için WebM’yi aktive edebilir, HTML 5 standartlarını kullanarak tüm internet kullanıcılarına hitap ederek, farklı dosya tiplerini sunabilirsiniz.

 

Birçok video aracı WebM desteği sunarken, internet üzerinden GIF to WebM gibi arama terimleri kullanarak, hızlı ve pratik bir şekilde video ve görsel içeriğinizi WebM’ye çevirme yolunu da keşfedebilirsiniz.