Codec, video ve ses verisini sıkıştıran (kodlayan) ve oynatırken geri açan (çözen) yöntemdir; adı İngilizce "coder-decoder" ifadesinden gelir. Codec nedir sorusunun web sitesi sahibi için önemi şu: Aynı video, seçilen codec ve ayarlara göre birkaç kat farklı boyutta olabilir ve bazı tarayıcılarda hiç oynatılmayabilir. Bu yazıda codec ile dosya formatı arasındaki farkı ve web siteniz için mantıklı seçimleri anlatıyoruz.
Kısaca
- Codec, videoyu sıkıştırma ve açma yöntemidir (H.264, H.265, VP9, AV1). MP4 ve WebM ise bu veriyi taşıyan kaplardır (container).
- Web'de en geniş uyumluluk için MP4 içinde H.264 (AVC) video ve AAC ses güvenli bir seçimdir.
- AV1 ve VP9 gibi açık ve telifsiz codec'ler aynı kalitede daha küçük dosyalar sağlayabilir, ama cihaz desteği kontrol edilmelidir.
- Tek bir
<video>etiketinde birden fazla kaynak verip tarayıcının oynatabildiğini seçmesini sağlayabilirsiniz. - Video, sayfanın en ağır öğesi olabilir; ön yükleme, kapak görseli ve doğru boyut sayfa hızını korur.
Codec nedir?
Ham (sıkıştırılmamış) video çok büyüktür. MDN'nin örneğine göre sıkıştırılmamış iki saatlik bir film yaklaşık 1,79 TB yer kaplar. Codec'ler bu veriyi, insan gözünün fark etmeyeceği ya da az fark edeceği ayrıntıları atarak ve kareler arasındaki tekrarları akıllıca saklayarak küçültür.
Ancak sıkıştırma ile kalite arasında bir denge vardır. MDN'nin belirttiği gibi bit hızı (bitrate, saniyede kullanılan veri miktarı) arttıkça kalite genellikle artar, ama dosya da büyür. Dolayısıyla codec'in ne kadar verimli olduğu, aynı kaliteyi ne kadar düşük bit hızıyla verebildiğine bağlıdır.
Görsellerdeki kayıplı ve kayıpsız sıkıştırma mantığı videoda da geçerlidir. Bu konuyu Kayıplı ve kayıpsız sıkıştırma yazımızda anlattık.
Codec ile dosya formatı (kap) arasındaki fark
En sık karışan konu budur. Örneğin "Videomuz MP4" demek, videonun hangi codec ile sıkıştırıldığını söylemez.
- Kap (container): MDN'nin tanımıyla bir veya daha fazla medya akışını (video, ses) ve meta verilerini birlikte saklayan dosya biçimidir.
.mp4,.webm,.movbirer kaptır. - Codec: Kabın içindeki video ve ses verisinin nasıl sıkıştırıldığıdır.
Bir benzetmeyle: Kap bir kargo kutusudur, codec ise içindeki eşyanın nasıl paketlendiğidir. Aynı MP4 kutusunun içinde H.264, H.265 ya da AV1 ile sıkıştırılmış video olabilir. Bir tarayıcı dosyayı oynatabilmek için hem kabı hem de içindeki codec'i desteklemelidir.
Web'de yaygın video codec'leri
| Codec | Öne çıkan özellik | Web'de dikkat edilecek nokta (Kasım 2025 itibarıyla) |
|---|---|---|
| H.264 (AVC) | En geniş uyumluluk, yaygın donanım desteği | Patentli bir formattır. MDN'ye göre son kullanıcıya ücretsiz sunulan internet videoları için lisans ücreti istenmiyor. Firefox'ta destek işletim sisteminin codec'lerine bağlıdır. |
| H.265 (HEVC) | Teoride H.264'ün yaklaşık yarısı boyutta benzer kalite | Tarayıcı desteği platforma ve donanıma bağlı, parçalı. Web'de tek kaynak olarak kullanmak risklidir. |
| VP9 | Açık ve telifsiz, tarayıcılarda yaygın destek | Genellikle WebM kabıyla kullanılır. Safari'de saydamlık (alfa kanalı) desteklenmez. |
| AV1 | Açık ve telifsiz, yüksek sıkıştırma verimi | Tüm büyük tarayıcılarda destekleniyor; ancak Safari'de yalnız donanım çözücüsü olan cihazlarda (ör. M3 ve sonrası Mac'ler, iPhone 15 Pro ve iPhone 16 ve sonrası) çalışıyor. |
Ses tarafında web için yaygın seçenekler AAC (genellikle MP4 içinde) ve Opus'tur (genellikle WebM içinde).
Web siteniz için hangi codec'i seçmelisiniz?
MDN'nin önerisi iki katmanlıdır:
- Modern ve verimli seçenek: WebM kabında AV1 video ve Opus ses. Açık ve telifsiz formatlardır; eski Apple cihazları dışında genel olarak iyi desteklenir.
- Yedek (geniş uyumluluk): MP4 kabında H.264 video ve AAC ses. MDN'ye göre bu kombinasyon tüm büyük tarayıcılarda desteklenir.
Yalnız tek bir dosya hazırlayacaksanız, MDN en geniş cihaz yelpazesinde oynatılabilecek formatı, yani MP4'ü önerir.
İki kaynak hazırlarsanız tarayıcı, listedeki ilk oynatabildiği kaynağı seçer:
“html <video controls poster="kapak.webp" preload="metadata"> <source src="tanitim.webm" type="video/webm; codecs=av01,opus"> <source src="tanitim.mp4" type="video/mp4"> </video> “
Videonun sitenize etkisi
Video, bir web sayfasındaki en ağır öğe olabilir. Doğru codec seçmek önemlidir, ama tek başına yetmez.
- Ön yükleme ayarı:
preloadözelliği tarayıcıya ne kadarını önceden indirmesi gerektiği konusunda ipucu verir.nonehiç indirmez,metadatayalnız süre gibi bilgileri alır,autotüm dosyanın indirilmesine izin verir. Ziyaretçi her zaman videoyu izlemeyeceksemetadataya danonedaha uygundur. - Kapak görseli (poster): Video yüklenene kadar gösterilecek bir görsel belirleyin. Aksi halde ilk kare gelene kadar boş alan görünür.
- Otomatik oynatma: Tarayıcılar sesli otomatik oynatmayı genellikle engeller. MDN'nin önerdiği gibi arka plan videolarında
autoplayile birliktemutedveplaysinlinekullanın ve otomatik oynatma engellenirse oynatma düğmesi gösterin. - Animasyonlu GIF yerine video: web.dev'in örneğinde 3,7 MB'lık bir GIF, MP4 olarak 551 KB'a, WebM olarak 341 KB'a iniyor. Kısa döngüsel animasyonlar için
autoplay loop muted playsinlineözellikleriyle video kullanmak sayfayı belirgin şekilde hafifletebilir. - Doğru çözünürlük: Mobilde 400 piksel genişlikte görünecek bir arka plan videosu için 4K dosya yüklemeyin.
- Trafik: Video dosyaları hosting trafiğinizi hızla tüketir. Bu konuyu Bant genişliği nedir? yazımızda, statik dosyaları ziyaretçiye yakın sunuculardan dağıtmayı ise CDN nedir? yazımızda anlattık.
Kendi sunucunuz mu, video platformu mu?
Uzun tanıtım filmleri, eğitim videoları ve röportajlar için YouTube ya da Vimeo gibi platformlar; codec dönüşümünü, farklı çözünürlükleri ve bağlantı hızına göre kalite ayarını sizin yerinize yapar. Ancak gömülü oynatıcılar sayfaya kendi scriptlerini ekler. Chrome'un Lighthouse dokümantasyonundaki örnekte bir YouTube oynatıcısı yaklaşık 540 KB, yerine konan hafif bir önizleme ("facade") ise 3 KB ağırlığındadır. Bu yüzden gömülü videolarda, oynatıcıyı ancak ziyaretçi tıkladığında yükleyen bir önizleme yöntemi kullanmak sayfayı hafifletir.
Kısa, sessiz, döngüsel arka plan videoları ya da ürün animasyonları için ise iyi sıkıştırılmış dosyaları kendi sitenizden sunmak genellikle daha pratiktir.
Sık yapılan hatalar
- Kameradan ya da kurgu programından çıkan dosyayı doğrudan yüklemek. Bu dosyalar çoğu zaman web için gereğinden yüksek bit hızına sahiptir.
- Yalnız HEVC ya da yalnız AV1 kaynak vermek. Bazı cihazlarda video hiç oynatılmayabilir. Bu yüzden her zaman geniş uyumlu bir yedek kaynak ekleyin.
.mp4uzantısını yeterli sanmak. Çünkü uzantı kabı gösterir, codec'i göstermez.- Sesli otomatik oynatmaya güvenmek. Tarayıcılar bunu engelleyebilir; ziyaretçiyi de rahatsız eder.
- Ana görsel alanına ağır bir video koymak. Sayfanın ana içeriğinin görünme süresini (LCP) uzatabilir. Bu metrikleri Core Web Vitals nedir? yazımızda anlattık.
Bizim deneyimimiz
Web ve sosyal medya projelerinde videoyu, kullanılacağı yere göre ayrı ayrı hazırlamayı tercih ediyoruz: sosyal medya için platformun beklediği biçimde, web sitesi için ise sayfayı yormayacak çözünürlük ve bit hızında. Kendi sitemizde mobil PageSpeed iyileştirmesi yaparken ekran dışında kalan animasyonları da ele aldık. Bu yüzden bir sayfaya video ya da hareketli öğe eklerken, sayfa hızına etkisini de en baştan hesaba katıyoruz.
Sık sorulan sorular
MP4 bir codec mi?
Hayır. MP4 bir kap (container) formatıdır. İçinde H.264, H.265, AV1 gibi farklı codec'lerle sıkıştırılmış video bulunabilir. Bir videonun hangi codec'i kullandığını, video düzenleme programlarında ya da medya bilgisi gösteren araçlarda görebilirsiniz.
Web sitem için tek bir video formatı seçecek olsam hangisi olmalı?
En geniş uyumluluk için MP4 kabında H.264 video ve AAC ses. MDN de tek format sunulacaksa MP4'ü öneriyor. Dosya boyutunu daha da küçültmek isterseniz, buna ek olarak WebM/AV1 kaynağı ekleyebilirsiniz.
H.265 (HEVC) neden web'de her yerde kullanılmıyor?
HEVC, H.264'e göre daha verimlidir, ama tarayıcı desteği platforma ve donanıma bağlıdır ve lisans yapısı daha karmaşıktır. Bu yüzden web'de tek kaynak olarak kullanılması önerilmez.
Videolarım sitemi yavaşlatır mı?
Doğru hazırlanmazsa evet. Ön yükleme ayarı, kapak görseli, uygun çözünürlük ve verimli codec seçimi bu etkiyi büyük ölçüde azaltır. Uzun videolarda bir video platformu ve hafif bir önizleme yöntemi kullanmak da iyi bir seçenektir.
Sonuç
Kısacası codec, videonuzun ne kadar yer kaplayacağını ve hangi cihazlarda oynatılabileceğini belirler. Web için güvenli yol, geniş uyumlu bir MP4 (H.264 + AAC) kaynağı sunmak ve mümkünse daha verimli bir WebM/AV1 kaynağı eklemektir. Bunu ön yükleme ayarı, kapak görseli ve doğru çözünürlükle tamamladığınızda video sitenizi ağırlaştırmadan işini yapar.
Sitenizde ya da sosyal medya hesaplarınızda video kullanımını birlikte planlamak isterseniz web tasarım ve sosyal medya tasarımı hizmetlerimize göz atabilir ya da bize ulaşabilirsiniz.
Grafik Sanat'ta öğrenin: Konuyu görselli anlatım ve testlerle öğrenmek için → grafiksanat.com.tr/terim/codec
Kaynaklar7
- MDN Web Docs, "Web video codec guide" developer.mozilla.org
- MDN Web Docs, "Media container formats (file types)" developer.mozilla.org
- MDN Web Docs, "`<video>`: The Video Embed element" developer.mozilla.org
- MDN Web Docs, "Autoplay guide for media and Web Audio APIs" developer.mozilla.org
- web.dev, "Replace animated GIFs with video for faster page loads" web.dev
- Chrome for Developers, "Lazy load third-party resources with facades" developer.chrome.com
- Can I use, "AV1 video format" caniuse.com
