FPS Nedir? Animasyon ve Videoda Akıcılık

FPS (frames per second), bir video ya da animasyonda bir saniyede gösterilen kare (görüntü) sayısıdır. FPS nedir sorusunun kısa cevabı: Hareketin ne kadar akıcı görüneceğini belirleyen ölçüdür; sinemada 24, bilgisayar ekranlarında ve arayüz animasyonlarında çoğunlukla 60 kare hedeflenir. Bu yazıda kare hızının video ve web sitenizdeki animasyonlar açısından ne anlama geldiğini, takılmaların nereden kaynaklandığını anlatıyoruz.

FPS nedir?

Video ve animasyon, aslında art arda hızla gösterilen durağan görüntülerden oluşur. Her bir görüntüye kare (frame) denir. Saniyede gösterilen kare sayısı arttıkça göz, hareketi daha akıcı algılar.

• Düşük FPS: Hareket kesik kesik, "slayt gösterisi" gibi görünür.
• Yüksek FPS: Hareket akıcıdır; özellikle hızlı kaydırma, oyun ve spor görüntülerinde fark belirgindir.

Ancak her kare ayrı bir görüntü olduğu için yüksek FPS, daha fazla veri ve daha fazla işlem demektir. Videoda dosya boyutu artar; web animasyonlarında ise cihazın her kareyi daha kısa sürede hazırlaması gerekir.

Yaygın kare hızları ne anlama gelir?

Hangi değerin "doğru" olduğu, içeriğin türüne bağlıdır. Bir kurumsal tanıtım filmi 24 ya da 25 FPS ile sinematik bir his verirken, bir uygulamanın ekran kaydı ya da bir ürünün dönme animasyonu 60 FPS ile daha akıcı görünür.

FPS ile ekran yenileme hızı aynı şey mi?

Hayır. Ancak bu iki kavramı sık karıştırırız:

• Kare hızı (FPS): Bir sistemin ya da videonun saniyede kaç kare ürettiği veya içerdiği.
• Yenileme hızı (Hz): Ekranın saniyede kaç kez görüntüyü güncellediği.

Çoğu ekran saniyede 60 kez yenilenir (60 Hz). MDN'nin belirttiği gibi 75, 120 ve 144 Hz ekranlar da yaygınlaşmıştır. Bu yüzden 60 Hz bir ekranda 120 FPS'lik bir animasyonun fazladan kareleri görünmez. Tersi durumda, ekran 120 Hz olsa bile video 30 FPS ise hareket 30 FPS akıcılığında kalır.

Web sitenizdeki animasyonlarda FPS

Ziyaretçi web sitelerinde FPS'i en çok kaydırma, menü açılışları, kaydırıcılar (slider), hover efektleri ve sayfaya giriş animasyonlarında hisseder.

16 milisaniyelik bütçe

Google'ın web.dev rehberine göre çoğu cihaz ekranı saniyede 60 kez yeniler. Bu da tarayıcının her kareyi hazırlamak için yaklaşık 16,66 ms zamanı olduğu anlamına gelir. Tarayıcının kendi işleri de olduğu için rehber, sizin kodunuzun bu işi yaklaşık 10 ms içinde bitirmesi gerektiğini söyler. Kodunuz bu bütçeyi aştığında kare hızı düşer ve sayfa içeriği ekranda titrer, takılır. Buna jank denir.

Tarayıcı bir kareyi nasıl hazırlar?

web.dev, bir karenin hazırlanmasını beş aşamalı bir hat olarak anlatır: JavaScript → stil hesaplama → yerleşim (layout) → boyama (paint) → birleştirme (composite). Bir animasyonun hangi CSS özelliğini değiştirdiği, bu aşamalardan hangilerinin tekrarlanacağını belirler:

• Genişlik, yükseklik, kenar boşluğu ya da konum (top, left) değiştiren animasyonlar her karede yerleşim hesabını yeniden yaptırabilir. Bu pahalıdır.
• web.dev'e göre yerleşim ve boyama aşamalarını atlayıp doğrudan birleştirme aşamasında işlenebilen iki özellik vardır: transform ve opacity. Kayma, büyüme, dönme ve solma efektlerini bu iki özellikle yapmak akıcılığı korumanın en güvenilir yoludur.

CSS ve JavaScript'in sitedeki rollerini CSS nedir? ve JavaScript nedir? yazılarımızda anlattık.

JavaScript ile animasyon

JavaScript ile yapılan animasyonlarda requestAnimationFrame kullanmak, işi tarayıcının ekran yenileme döngüsüyle eşitler. MDN, bu yöntemin çağrılma sıklığının genellikle ekranın yenileme hızıyla eşleştiğini ve animasyon ilerlemesinin geçen süreye göre hesaplanması gerektiğini belirtir; aksi halde animasyon yüksek yenileme hızlı ekranlarda daha hızlı oynar.

Akıcılık ve kullanıcı deneyimi

Takılan bir animasyon yalnız estetik bir sorun değildir. Ayrıca ana iş parçacığını meşgul eden ağır scriptler, sayfanın ziyaretçinin dokunuşlarına ve tıklamalarına geç tepki vermesine de yol açabilir. Etkileşim hızını ölçen INP metriğini Core Web Vitals nedir? yazımızda anlattık.

Hareket azaltma tercihi

Öte yandan bazı kullanıcılar cihaz ayarlarından gereksiz hareketin azaltılmasını ister. MDN'ye göre büyük nesnelerin ölçeklenmesi ya da kaydırılması gibi animasyonlar, vestibüler (iç kulak kaynaklı denge) rahatsızlığı olan kişilerde rahatsızlık yaratabilir. CSS'teki prefers-reduced-motion medya sorgusu bu tercihi algılar; animasyonları bu kullanıcılar için sadeleştirmek ya da kapatmak iyi bir uygulamadır.

Video hazırlarken FPS

• Kaynağın kare hızını koruyun. 25 FPS çekilmiş bir videoyu 60 FPS'e çevirmek akıcılık katmaz; kareler kopyalanır ya da yapay olarak üretilir, dosya büyür.
• Gereksiz yüksek FPS'ten kaçının. Arka plan videolarında yüksek kare hızı çoğu zaman fark edilmez ama dosya boyutunu artırır. Dosya boyutunu belirleyen bir diğer etken de codec ve bit hızıdır; bkz. Codec nedir?
• Platformun beklentisine uyun. Sosyal medya ve video platformları farklı kare hızlarını destekler; yükleme öncesinde platformun güncel önerilerini kontrol edin.
• Ağır çekim için önceden plan yapın. Ağır çekim, ancak yüksek kare hızıyla çekilmiş görüntüden elde edilebilir.

Sık yapılan hatalar

• Her şeyi 60 FPS'e çevirmek. Sinematik bir tanıtım filmini 60 FPS'e çevirdiğinizde "televizyon dizisi" gibi görünebilir; üstelik dosya büyür.
• Konum ve boyut değiştirerek animasyon yapmak. transform ve opacity dururken left, width gibi özellikleri canlandırmak takılmaya yol açabilir.
• Aynı anda çok sayıda animasyon çalıştırmak. Özellikle orta ve alt segment telefonlarda kare kaçırma riski artar.
• Yalnız güçlü bir bilgisayarda test etmek. Çünkü masaüstünde akıcı görünen animasyon, telefonda takılabilir.
• Hareket azaltma tercihini görmezden gelmek.

Bizim deneyimimiz

Kendi sitemizde mobil PageSpeed iyileştirmesi yaparken ekran dışında kalan animasyonları da ele aldık; ziyaretçinin görmediği alanlardaki hareketin cihazı gereksiz yere meşgul etmemesini hedefledik. Web tasarım projelerinde animasyonu bir süs olarak değil, ziyaretçiye yön gösteren bir araç olarak kullanmayı tercih ediyoruz ve hareketli öğeleri mobil cihazlarda da test ediyoruz.

Sık sorulan sorular

Sonuç

FPS, hareketin akıcılığını belirler; ama doğru kare hızı içeriğe göre değişir. Videoda kaynağın kare hızını korumak ve gereksiz yüksek değerlerden kaçınmak dosyaları hafif tutar. Web sitenizde ise akıcılığın anahtarı, tarayıcının her kareyi kısa sürede hazırlayabilmesidir: transform ve opacity ile tasarlanmış, mobilde test edilmiş ve hareket tercihlerine saygılı animasyonlar.

Sitenizde ya da sosyal medya içeriklerinizde hareketi doğru kullanmak için web tasarım ve sosyal medya tasarımı hizmetlerimize göz atabilir ya da bize ulaşabilirsiniz.