Herhangi Bir Ekran Kaydını Şeffaf Hareketli WebP Çerçevesine Dönüştürme (After Effects veya Tasarımcı Gerekmez)

Yüksek kaliteli kullanıcı arayüzü (UI) hareketli katmanları oluşturmak genellikle After Effects gibi karmaşık yazılımlar kullanmayı veya özel bir hareketli grafik tasarımcısı tutmayı gerektirir. Web sitenizde yüzen bir uygulama özelliğini, UI mikro etkileşimini veya dinamik bir sesli sohbet odası widget'ını sergilemek için şeffaf bir hareketli WebP dosyasına ihtiyacınız varsa, bunu dakikalar içinde tamamen ücretsiz olarak kendiniz oluşturabilirsiniz.

Bu kapsamlı rehberde, ham ekran kayıtlarını nasıl alacağınızı ve tam 8-bit alpha kanallarını ayıklamak için açık kaynaklı CLI araçlarıyla nasıl işleyeceğinizi öğreneceksiniz. Şeffaf ve son derece hafif hareketli WebP dosyaları elde etmenizi sağlayan arka plan kaldırma algoritmalarını, FFmpeg optimizasyon parametrelerini ve platformlar arası web entegrasyon taktiklerini ele alacağız.

Şeffaf Hareketli WebP Nedir (ve Neden GIF'ten Daha İyi?)

Sade bir anlatımla hareketli WebP

Hareketli bir WebP dosyası, Google'ın kayıplı ve kayıpsız sıkıştırma algoritmalarının yanı sıra sıralı animasyonları da destekleyen WebP görsel formatının bir uzantısıdır. Eski görsel formatlarının aksine WebP, VP8 video kodekinden türetilen gelişmiş tahmin tekniklerini içerir. Bu sayede, ağır görsel sıkıştırma bozulmalarına yol açmadan kare kare animasyonları geleneksel dosya boyutlarının çok küçük bir kesrine kadar sıkıştırabilir.

Bir alpha kanalı ile birleştirildiğinde, şeffaf bir hareketli WebP, bir web sitesindeki veya mobil kullanıcı arayüzündeki herhangi bir arka plan öğesi üzerinde tam şeffaflık veya yarı şeffaflık sağlar. Bu; UI bileşenlerinin, parçacık efektlerinin ve uygulama demolarının, görünür kutu hatları veya çirkin arka plan rengi sızmaları olmadan dinamik arka plan renkleri, videolar veya koyu/açık tema modları üzerinde sorunsuz bir şekilde süzülebileceği anlamına gelir.

GIF neden doğru şeffaflık sağlayamaz (1-bit alpha vs 8-bit alpha)

Eski GIF formatının temel sınırlaması, ikili (binary) şeffaflık sisteminde yatar. GIF, 1-bit alpha şeffaflığı kullanır; bu da bir karedeki her bir pikselin %100 opak veya %100 şeffaf olarak işlenmesi gerektiği anlamına gelir. Arası yoktur. Sonuç olarak, yumuşatılmış (anti-aliased) kavisli çizgiler, ince gölgeler, yumuşak parlayan kenarlar veya cam benzeri bulanıklık efektleri koyu bir yüzeye yerleştirildiğinde etraflarında tırtıklı piksel kenarları veya beyaz/renkli bir halka oluşur.

Şeffaf bir hareketli WebP ise tam 8-bit alpha şeffaflığı kullanır ve piksel başına 256 farklı opaklık seviyesi sunar (tamamen görünmez için 0 ile tamamen katı için 255 arasında). Bu; yumuşak gölgelerin, yarı saydam cam katmanlarının, pürüzsüz kenar yumuşatmalarının ve gerçekçi parçacık izlerinin herhangi bir değişken renkli UI arka planı üzerinde pürüzsüzce harmanlanmasını sağlar. Ayrıca GIF, kare başına kesin olarak 256 toplam renkle sınırlıyken, WebP gerçek 24-bit RGB renk derinliğini (16.7 milyon renk) destekler ve renk bantlanması olmadan yumuşak geçişler ve canlı UI kayıtları sunar.

Dosya boyutu karşılaştırması — WebP vs GIF vs APNG vs MP4

Doğru animasyon kapsayıcısını seçmek, sayfa hızı metriklerini, Core Web Vitals değerlerini ve mobil uygulama bant genişliği tüketimini doğrudan etkiler. Geleneksel hareketli GIF'ler sıkıştırılmamış olmalarıyla ünlüdür ve 3 saniyelik bir UI klip için sıklıkla 10 MB sınırını aşarlar. APNG (Animated Portable Network Graphics) renk derinliği ve 8-bit şeffaflık sorunlarını çözer, ancak kayıpsız DEFLATE sıkıştırması zengin UI hareketleri için hâlâ yüksek dosya boyutlarına yol açar.

H.264 ile kodlanmış MP4 videosu yüksek video sıkıştırması sunar, ancak standart web MP4 kapsayıcıları farklı tarayıcılar arasında uyumlu bir şekilde alpha kanalı şeffaflığını yerel olarak desteklemez (Safari alpha içeren HEVC gerektirirken, Chrome WebM içinde alpha içeren VP9 gerektirir). Hareketli WebP, kısa, döngüsel ve şeffaf UI animasyonları için en ideal noktada yer alır: tam 8-bit alpha harmanlaması sunar, gerçek renk geçişlerini işler ve GIF'e kıyasla %64'e, APNG'ye kıyasla %45'e varan oranlarda daha küçük dosya boyutları elde eder.

2026'da tarayıcı ve cihaz desteği

2026 itibarıyla şeffaf hareketli WebP, tüm modern web tarayıcılarında, masaüstü işletim sistemlerinde ve mobil platformlarda evrensel desteğe sahiptir. Chrome, Safari, Firefox, Edge, Opera, iOS Safari ve Android WebView, standart HTML <img> etiketleri, CSS arka plan özellikleri ve yerel canvas oluşturucuları içindeki hareketli WebP varlıklarının yerel kod çözümünü tamamen destekler.

Mobil platformlarda Android, WebP dosyalarını standart ImageView bileşenleri aracılığıyla yerel olarak çözümlerken, iOS ise iOS 14'ten itibaren SwiftUI ve UIKit görsel görünümlerinde WebP işlemeyi yerel olarak destekler. Bu durum, hareketli WebP'yi üreticiye özel video kodekleriyle veya hantal GIF varlıklarıyla uğraşmak istemeyen platformlar arası uygulama geliştiricileri için güvenilir bir format haline getirir.

Format karşılaştırma tablosu

Gerçekte Ne Zaman Şeffaf Bir Çerçeveye İhtiyacınız Olur?

Açılış sayfalarının hero alanında süzülen uygulama demoları

Bir SaaS açılış sayfasında mobil uygulama kullanıcı arayüzünü sergilerken, hero bölümüne sert kenarlı dikdörtgen bir video yerleştirmek koyu modun veya renk geçişli tasarımların akıcı ritmini bozar. Ekran kaydınızın arka planını kaldırıp şeffaf hareketli bir WebP olarak dışa aktararak, uygulama arayüzünüzün özel açılış sayfası geometrisi, dekoratif vektör desenleri veya hafif arka plan aydınlatmaları üzerinde dinamik olarak süzülmesini sağlayabilirsiniz.

Bu görsel katman efekti, potansiyel kullanıcılara yerel kalite hissi aktaran, karmaşık WebGL veya 3D canvas kitaplıklarına ihtiyaç duymadan kayıt dönüşüm oranlarını artıran üst düzey, cilalı bir üretim hissi yaratır.

Telefon mockup'ları ve cihaz çerçeveleri

Tasarımcılar genellikle ekran kayıtlarını şık vektör telefon çerçevelerine (iPhone veya Android donanım kenarlıkları gibi) giydirir. Fiziksel bir cihazı veya simülatör ekranını kaydediyorsanız, yalnızca ekran içeriğini yuvarlatılmış donanım köşeleriyle şeffaf hareketli bir WebP olarak dışa aktarmak, hareketli katmanı doğrudan CSS cihaz sarmalayıcılarına veya Figma tasarım sistemlerine bırakmanıza olanak tanır.

Köşeler gerçek alpha şeffaflığıyla işlendiğinden, alttaki arayüz kaydını yeniden işlemeden donanım çerçevelerini değiştirebilir, gölgeleri ayarlayabilir veya CSS içinde cihaz açılarını değiştirebilirsiniz.

UI mikro etkileşimleri ve yükleme durumları

Hareketli buton durumları, dinamik mikrofon halkaları, açılır başarı rozetleri veya canlı sesli sohbet odası durum göstergeleri gibi mikro etkileşimler kusursuz bir arka plan şeffaflığı gerektirir. Dönen bir yükleyici veya hareketli rozet etrafında kare bir arka plan kutusu görüntülemek uygulamanın sürükleyiciliğini zedeler.

Şeffaflığa sahip hafif bir hareketli WebP kullanmak, ön uç mühendislerinin özel tasarlanmış hareketli durum değişikliklerini doğrudan dinamik UI öğelerinin, aktif video akışlarının veya sesli oda avatar ızgaralarının üzerinde işlemesine imkan tanır.

Ürün turu katmanları ve onboarding

Etkileşimli ürün turları ve kullanıcıya alıştırma (onboarding) rehberleri genellikle belirli butonları veya yüzen ipuçlarını vurgular. Hareketli işaretçi eller, yanıp sönen tıklama hedefleri veya dinamik öğretici ipuçları için şeffaf hareketli WebP döngüleri kullanmak, bu katmanların alttaki veri tablolarını veya gezinti başlıklarını kapatmadan kullanıcı panoları üzerinde doğal bir şekilde süzülmesini sağlar.

Dekupe animasyonlu sosyal medya gönderileri ve küçük resimler

Dijital kampanya varlıkları, dokümantasyon siteleri ve etkileşimli blog gönderisi küçük resimleri için oluşturulan pazarlama materyalleri, dinamik öğeler standart kapsayıcı kutulardan dışarı çıktığında önemli ölçüde öne çıkar. Hareketli bir özelliğin ekran kaydını dekupe edilmiş şeffaf bir döngüye dönüştürmek, hareketli grafikleri statik tanıtım görsellerinin veya markalı arka plan afişlerinin üzerine katmanlamanıza olanak tanır.

İhtiyacınız Olanlar (Hepsi Ücretsiz)

FFmpeg — her şeyi yapan tek araç

FFmpeg; video, ses ve multimedya akışlarını işlemek için kullanılan endüstri standardı, açık kaynaklı bir komut satırı çerçevəsidir. Popüler ticari video yazılımlarının, tarayıcı motorlarının ve medya hatlarının arkasındaki temel multimedya motoru olarak hizmet eder. FFmpeg; video filtre grafiklerine, alpha kanalı oluşturmaya, renk anahtarlama (color keying) algoritmalarına ve yerel WebP kodlayıcı yapılandırmalarına tam erişim sağlar.

FFmpeg CLI üzerinden çalıştığı için, ağır masaüstü NLE (kurgu) uygulamalarında yapılandırılması dakikalar sürecek karmaşık video işleme adımlarını saniyeler içinde gerçekleştirebilir.

Windows, macOS ve Linux'ta FFmpeg kurulumu

Komut satırı paket yöneticilerini kullanarak herhangi bir ana işletim sisteminde FFmpeg'i kurmak iki dakikadan kısa sürer:

• macOS: Terminal'i açın ve Homebrew ile kurun: brew install ffmpeg
• Windows: PowerShell'i açın ve Chocolatey veya Scoop ile kurun: choco install ffmpeg veya winget install FFmpeg
• Linux (Ubuntu/Debian): Şu komutu çalıştırın: sudo apt update && sudo apt install ffmpeg libwebp-dev

İsteğe bağlı yardımcılar: kayıt için OBS, maskeler için GIMP, AI dekupeleri için rembg

FFmpeg arka plan çıkarma ve WebP kodlama işlemlerini hallederken, birkaç ücretsiz yardımcı araç ekran yakalamayı ve maske oluşturmayı kolaylaştırır:

• OBS Studio: Özel kare hızlarında ve net pencere sınırlarında kayıpsız ekran kaydı sağlayan ücretsiz, açık kaynaklı ekran kaydedici.
• GIMP: Özel geometrik kırpmalar için hassas 8-bit siyah-beyaz PNG maske dosyaları oluşturmak üzere kullanılan ücretsiz görsel düzenleyici.
• rembg (Python): U-2-Net tarafından desteklenen, karmaşık görsel konuları otomatik olarak algılayan ve video karelerinden alpha maskeleri oluşturan açık kaynaklı AI aracı.

FFmpeg sürümünüzün WebP ve alpha'yı desteklediğini doğrulama

Dönüştürme komutlarını çalıştırmadan önce, yerel FFmpeg derlemenizin yerel libwebp kodlayıcısı etkinleştirilerek derlendiğini doğrulayın. Terminalinizi açın ve şu komutu çalıştırın:

ffmpeg -encoders | grep webp

Çıktı V..... libwebp veya V..... webp içeriyorsa, kurulumunuz şeffaflığa sahip kayıpsız ve kayıplı WebP görsel dizilerini kodlamak üzere yapılandırılmış demektir.

1. Adım — Ekranınızı Doğru Şekilde Kaydedin

Sonradan şeffaflığı kolaylaştıran kayıt ayarları

Nihai şeffaf hareketli WebP dosyanızın kalitesi, doğrudan ham ekran kaydı ayarlarınıza bağlıdır. Bir UI öğesini veya uygulama özelliğini yakalarken, %100 yerel ekran ölçeğinde kayıt yapın (piksel sınırlarını bulanıklaştıran ekran ölçeklendirme veya DPI yakınlaştırma ayarlarından kaçının). Kayıt yazılımınızın MP4 veya MOV kapsayıcısı içinde H.264 veya ProRes kodekini kullanarak sıkıştırılmamış veya yüksek bit hızına sahip bir video akışı verecek şekilde yapılandırıldığından emin olun.

Kayıt tuşuna basmadan önce fare imleci halkalarını, sistem bildirim pencerelerini ve masaüstü gece modu görsel filtrelerini kapatın. Renk üretimini saf tutmak, otomatik renk ayıklama sırasında beklenmedik renk kaymalarını önler.

Tek renk arka plan kullanmak (en kolay green screen yöntemi)

Bir emülatörden (Android Studio veya Xcode Simulator gibi) ya da bir tarayıcı penceresinden mobil uygulama arayüzü yakalıyorsanız, kapsayıcı sayfanın CSS arka planını yüksek kontrastlı tek bir yeşile (örn. #00FF00 / RGB 0, 255, 0) veya tek bir eflatuna (#FF00FF / RGB 255, 0, 255) ayarlayın.

Seçtiğiniz yeşil rengin hedef UI bileşeninizin hiçbir yerinde görünmediğinden emin olun (örn. yeşil aktif durum noktaları, başarı rozetleri veya yeşil butonlar). Kullanıcı arayüzünüz yeşil simgeler içeriyorsa, arka plan tuvalinizi saf parlak maviye (#0000FF) veya saf eflatuna çevirin.

Yuvarlatılmış veya düzensiz UI öğelerini temiz şekilde kaydetmek

Kartları, yuvarlatılmış iletişim kutularını veya dairesel avatar çerçevelerini kaydederken, bileşeni doğrudan tek renkli arka planınızın üzerine yerleştirin. Otomatik renk ayıklama kullanmayı planlıyorsanız ekran kaydı sırasında UI öğesine CSS gölgeleri (box-shadow) uygulamayın; renk ayıklama algoritmaları koyu bir gölge ile koyu bir UI sınırı arasındaki farkı ayırt edemez ve bu da kirli, pikselleşmiş gölgelerle sonuçlanır.

Bunun yerine, katı ve keskin kart kenarlarını temiz bir şekilde yakalayın ve nihai WebP'yi web sitenize yerleştirirken koda dinamik olarak yumuşak CSS gölge filtreleri uygulayın.

Dosya boyutunu düşük tutan kare hızı (fps) ve çözünürlük seçimleri

Yüksek kare hızları ve aşırı büyük tuval boyutları dosya boyutlarını hızla katlar. UI animasyonları ve uygulama demoları için 20 fps ile 30 fps arasındaki bir kare hızı, 60 fps kayda kıyasla bant genişliğinde %50'ye varan tasarruf sağlarken akıcı bir hareket sunar.

Ekran kaydı hedef boyutlarınızı, planlanan görüntüleme boyutlarına uyacak şekilde ölçeklendirin. Hareketli çerçeve web sitenizde 400x400 piksel boyutunda işlenecekse, ölçeklendirilmemiş 4K (3840x2160) bir kayıt dışa aktarmayın. Kayıt veya ön işleme sırasında ölçeği küçültmek, işleme süresini azaltır ve WebP derlemesi sırasında alt-piksel bulanıklaşmasını önler.

Dekupe işlemini bozan sık yapılan kayıt hataları

İnce kenarların etrafında ağır H.264 sıkıştırma bozulmalarına veya makro bloklanmaya yol açan kayıplı ekran yakalama ayarlarından kaçının. Sıkıştırma bozulmaları, tek renk olması gereken yeşil arka planda hafif renk değişiklikleri yaratarak renk ayıklama filtrelerini yanıltır ve konunuzun etrafında leke şeklinde gürültüler bırakır.

Her zaman yüksek bit hızı ayarlarını (1080p tuval kaydı için minimum 15-20 Mbps) veya OBS Studio içindeki yerel kayıpsız yakalama modlarını kullanın.

2. Adım — Şeffaflık Yönteminizi Seçin

A Yöntemi — Chroma key (tek renk arka plan kaldırılması)

Chroma keying, bir alpha maskesi oluşturmak için video akışından belirli bir renk değerini (saf yeşil veya mavi gibi) çıkarmaya dayanır. Bu yöntem, yapay stüdyo arka planlarına veya arka plan rengini kontrol ettiğiniz uygulama emülatörlerine karşı yakalanan UI kayıtları için idealdir. Chroma keying tamamen otomatiktir ve FFmpeg içinde son derece hızlı hesaplanır.

B Yöntemi — Geometrik kırpma ve maskeleme (dikdörtgenler, yuvarlatılmış köşeler, daireler)

Dikdörtgen bir pano widget'ı, yuvarlatılmış bir uygulama kartı veya dairesel bir profil avatarı gibi sabit geometriye sahip standart bir UI öğesini kaydederken chroma keying gereksizdir. Bunun yerine, hassas geometrik piksel kırpma koordinatları tanımlayabilir ve önceden işlenmiş 8-bit siyah-beyaz bir maske dosyasını üzerine katmanlayabilirsiniz.

Bir alpha maske görselinde, beyaz pikseller (#FFFFFF) tam opaklığı korur, siyah pikseller (#000000) tamamen şeffaf hale gelir ve gri pikseller, mükemmel derecede pürüzsüz yumuşatılmış kenarlar için orantılı alt-piksel şeffaflığı üretir.

C Yöntemi — Karmaşık konular için AI arka plan kaldırma

Kaydınız insan sunucular, karmaşık 3D grafikler veya kalabalık gerçek dünya arka planlarına karşı kaydedilmiş canlı video akışları gibi karmaşık konular içeriyorsa chroma key ve geometrik maskeler yetersiz kalacaktır. Bu senaryolarda video karelerinizi rembg veya RVM (Robust Video Matting) gibi açık kaynaklı AI segmentasyon araçlarından geçirmek, manuel rotoskop yapmaya gerek kalmadan hassas konu maskeleri çıkarır.

D Yöntemi — Yerel alpha kaydı (kaynak zaten şeffaf olduğunda)

Kaynak varlığınız Lottie, Rive, After Effects veya yerel alpha kanalı işlemeyi destekleyen dinamik WebGL tuval oluşturucularında üretildiyse (örn. alpha içeren ProRes 4444 veya WebM VP9), FFmpeg yerel alpha kanalını renk ayıklama veya maskeleme filtrelerine gerek kalmadan doğrudan WebP kodlayıcısına aktarabilir.

Durumunuza göre hangi yöntemi seçmelisiniz? (Karar tablosu)

3. Adım — Arka Planı FFmpeg ile Kaldırın

Chroma key komutunun parametre parametre açıklaması

Ekran kaydındaki tek renk yeşil arka planı sökmek ve şeffaf bir video akışı oluşturmak için terminalinizde şu FFmpeg filtre komutunu çalıştırın:

ffmpeg -i input_recording.mp4 -vf "colorkey=0x00FF00:0.15:0.05,format=yuva420p" -c:v rawvideo temp_alpha.nut

Bu komut kaydınızı colorkey filtre grafiği üzerinden işler. 0x00FF00 parametresi hedef Hex rengini (saf yeşil) belirtir. İkinci değer (0.15) renk benzerlik toleransını belirlerken, üçüncü değer (0.05) yumuşak kenar harmanlama davranışını tanımlar. format=yuva420p ayarı, FFmpeg'i piksel verilerine açık bir 8-bit YUV alpha kanalı eklemeye zorlar.

Temiz kenarlar için benzerlik (similarity) ve karışım (blend) ayarları

Similarity ve blend parametrelerini hassas bir şekilde ayarlamak, ince kenar ayrıntılarını korurken istenmeyen arka plan renk sızmalarını önler:

• Similarity (0.01 - 1.0): Bir pikselin renginin ayıklanması için 0x00FF00 değerine ne kadar yakın olması gerektiğini kontrol eder. Sıkıştırılmamış ekran kayıtları için 0.10 ile 0.18 arası bir ayar en iyi sonucu verir.
• Blend (0.0 - 1.0): Temizlenen alanların kenar sınırlarında yumuşak bir opaklık geçişi oluşturur. 0.02 ile 0.08 arası bir ayar, sert ve pikselleşmiş kenar basamaklanmasını önler.

Yeşil yansımaları (spill) ve halka kenarları düzeltme

UI içeriğiniz kenar yumuşatma uygulanan sınırlar boyunca hafif bir yeşil hat veya renk sızması sergiliyorsa, FFmpeg'in despill filtresini uygulayın veya renk eğrilerini doğrudan filtre karmaşanız içinde ayarlayın:

ffmpeg -i input_recording.mp4 -vf "colorkey=0x00FF00:0.12:0.04,despill=type=green:expand=0.1,format=yuva420p" output_clean.mov

despill filtresi şeffaflık eşiklerinin yakınındaki pikselleri analiz eder ve kalan yeşil tonları nötr gri veya şeffaf tonlara dönüştürür.

Alpha katmanı ile yuvarlatılmış köşe maskesi uygulama

Bir uygulama demosuna renk ayıklama yapmadan net yuvarlatılmış köşeler uygulamak için kayıt boyutlarınıza uyan bir siyah-beyaz maske görseli (mask.png) oluşturun (örn. siyah arka plan üzerinde 24px yuvarlatılmış köşeli beyaz bir dikdörtgen). Şu FFmpeg overlay filtre grafiğini çalıştırın:

ffmpeg -i recording.mp4 -i mask.png -filter_complex "[0:v][1:v]alphamerge,format=yuva420p" masked_output.mov

alphamerge filtresi ikinci girdinin (mask.png) gri tonlama parlaklık değerlerini alır ve bunları videonuzun hassas 8-bit alpha kanalı şeffaflık değerlerine dönüştürür.

Alpha kanalının gerçekten korunduğunu doğrulama

Ara dosyanızın WebP dönüştürmesinden önce gerçek alpha kanalı şeffaflığı içerdiğini doğrulamak için, dosyayı FFmpeg içinde parlak kırmızı bir teşhis arka planı üzerinde test çıktısı alın:

ffmpeg -f lavfi -i color=c=red:s=1280x720 -i masked_output.mov -filter_complex "[0:v][1:v]overlay=shortest=1" test_check.mp4

test_check.mp4 dosyasını açın. UI öğeniz etrafında blok şeklinde arka plan kutuları olmadan saf kırmızı arka plan üzerinde temiz bir şekilde süzülüyorsa, alpha kanalı şeffaflığınız sağlamdır ve nihai dışa aktarıma hazırdır.

Her komutun gerçekte ne yaptığı (kopyala-yapıştır hazır)

Çalıştırma Notu: Yukarıdaki komutlar ham MP4 piksel akışlarını işler, belirtilen hex değerine göre renk mesafelerini hesaplar, 4 kanallı bir piksel matrisi (RGBA/YUVA) ekler ve geçici bir ham video arabelleği verir. Bu komutları input_recording.mp4 kısmını kaynak dosya adınızla değiştirerek doğrudan Terminal veya PowerShell'e kopyalayıp yapıştırabilirsiniz.

4. Adım — Hareketli WebP Olarak Dışa Aktarın

Alpha içeren hareketli WebP için FFmpeg komutu

Alpha kanalınız ayıklandıktan veya maskelendikten sonra, nihai şeffaf hareketli WebP dosyanızı dışa aktarmak için bu üretime hazır FFmpeg komutunu çalıştırın:

ffmpeg -i input_recording.mp4 -vf "colorkey=0x00FF00:0.14:0.04,fps=24,scale=640:-1" -vcodec libwebp -filter_complex "[0:v] fps=24,scale=640:-1:flags=lanczos[x];[x]split[a][b];[a]palettegen=reserve_transparent=1[p];[b][p]paletteuse" -loop 0 -q:v 75 -preset default final_animated_frame.webp

Bu tek satırlık komut renk ayıklamayı, kare hızı ayarını, yüksek kaliteli Lanczos uzamsal ölçeklendirmeyi, alpha palet optimizasyonunu ve kayıplı WebP sıkıştırmasını tek bir işleme hattında halleder.

Kayıplı (lossy) ve kayıpsız (lossless) WebP — hangisi ne zaman kullanılmalı?

Hareketli WebP hem kayıplı hem de kayıpsız dahili sıkıştırma modlarını destekler:

• Kayıpsız WebP (-lossless 1): Tam piksel sadakatini ve keskin çizim hatlarını sıkıştırma bozulmaları olmadan korur. Düz vektör UI grafikleri, net tipografi ve yüksek kontrastlı simgeler için idealdir. Ancak dosya boyutları karmaşık, fotoğraf kalitesindeki ekran kayıtları için önemli ölçüde daha büyük olabilir.
• Kayıplı WebP (-q:v 65 - 80): Algılanamayan görsel verileri atmak için uzamsal frekans dönüşümünü kullanır. Renk geçişleri, yumuşak gölgeler veya video UI akışları içeren ekran kayıtları için idealdir ve ihmal edilebilir görsel kalite kaybıyla %70'e kadar daha küçük dosya boyutları sağlar.

Kalite, sıkıştırma seviyesi ve döngü ayarları

Dosya çıktısını ve animasyon davranışını kontrol etmek için bu temel FFmpeg parametrelerinde ince ayar yapın:

• -q:v [1-100]: Kayıplı kalite faktörünü ayarlar. 75, görsel netlik ile düşük bayt boyutu arasındaki en iyi dengeyi sağlar.
• -compression_level [0-6]: CPU sıkıştırma çabasını ayarlar. Derin entropi araması ve minimum dosya boyutu elde etmek için üretim web derlemelerinde her zaman -compression_level 6 kullanın.
• -loop [sayı]: Animasyon tekrarını tanımlar. -loop 0 sonsuz döngü ayarlar (web UI bileşenleri için standarttır), -loop 1 ise bir kez oynatılır ve son karede donar.

Akıcı oynatma için kare hızını (fps) ayarlama

Görsel formatlarında yüksek kare hızlarını (60 fps gibi) korumak, istemci tarafı tarayıcı işlemesi sırasında yüksek CPU yükü yaratır. Video filtre zincirinde fps=24 kullanarak kaynak videonuzu 20 fps veya 24 fps değerine düşürmek, toplam kare sayısını %60 azaltır; böylece akıcı UI hareketi algısını korurken dosya boyutunu ciddi oranda küçültür.

Son dosyadaki şeffaflığı onaylama

Dışa aktarılan .webp dosyanızın web ortamlarında tam alpha kanalı şeffaflığını koruduğunu doğrulamak için çıktı dosyasını doğrudan yeni bir Google Chrome tarayıcı sekmesine sürükleyip bırakın. Chrome Geliştirici Araçlarını (F12) açın, Elements inceleyicisine gidin ve belge gövdesi arka plan rengini #000000, #FF0000 ve #FFFFFF olarak ayarlayın.

Arka plan rengi animasyon sınırlarınızdan dikdörtgen kutu lekeleri veya hareler olmadan temiz bir şekilde görünüyorsa, varlığınız web dağıtımına hazırdır.

5. Adım — Kaliteden Ödün Vermeden Dosya Boyutunu Optimize Edin

En kısa ve anlamlı döngüye kırpma

Ekran etkileşimlerini yakalarken, hedef etkileşimden önceki veya sonraki gereksiz boş karelerden kaçının. Kaynak kaydınızı eylem döngüsünün tam kare dizisine kırpmak için FFmpeg'in hassas arama parametrelerini (-ss başlangıç zamanı ve -to bitiş zamanı) kullanın:

ffmpeg -ss 00:00:01.500 -to 00:00:05.200 -i input_recording.mp4 -vf "colorkey=0x00FF00:0.14:0.04" -vcodec libwebp -loop 0 optimized_loop.webp

Statik arayüz görüntüsünün 1.5 saniyesini bile kırpmak, onlarca gereksiz hareketli kareyi ortadan kaldırarak önemli ölçüde dosya ağırlığı tasarrufu sağlar.

Kare hızını (fps) akıllıca düşürmek

Çoğu yazılım UI mikro etkileşimi yüksek video kare hızları gerektirmez. Kare hızını 30 fps'den 18 fps veya 20 fps'ye düşürmek, açılır pencerelerin, durum halkalarının veya ipuçlarının algılanan akıcılığını etkilemeden toplam görsel verisini üssel olarak azaltır.

Gerçek içerik sınırlarına göre kırpmak

Hareketli UI öğeniz merkezde yalnızca 400x300 piksel bir bölge kaplıyorsa asla tam 1920x1080 ekran kaydı dışa aktarmayın. Kodlamadan önce boş arka plan tuval alanını ortadan kaldırmak için FFmpeg'in crop filtresini kullanın:

ffmpeg -i input.mp4 -vf "crop=400:300:760:390,colorkey=0x00FF00:0.14:0.04" -vcodec libwebp cropped_output.webp

crop=w:h:x:y parametreleri piksel genişliğini, yüksekliğini ve sol üst ofset koordinatlarını tanımlayarak kullanılmayan pikselleri tamamen kesip atar.

Tam dengeyi sağlayan kalite ayarları

Kayıplı WebP dışa aktarımları için 65 ile 75 arasındaki kalite değerleri, metinleri ve vektör çizgilerini keskin tutarken ciddi boyut azalmaları sağlar. 50'nin altına düşmekten kaçının, çünkü daha düşük değerler kenar yumuşatmalı alpha sınırları boyunca görünür bloklanma gürültülerine yol açar.

Web kullanımı için hedef dosya boyutları

Optimum web performansı ve mobil sayfa yükleme hızları üzerinde minimum etki için bileşen boyutunuza bağlı olarak aşağıdaki hedef dosya boyutu bütçelerini hedefleyin:

• Mikro Etkileşimler / Rozetler (100x100 - 200x200): 100 KB altında
• Süzülen Kartlar / Diyaloglar (400x400 - 600x600): 350 KB altında
• Tam Hero Uygulama Demoları (800x600+): 750 KB altında

Örnek rakamlarla öncesi/sonrası boyut tablosu

6. Adım — Web Sitenizde veya Uygulamanızda Kullanın

Basit bir img etiketiyle ekleme

Hareketli WebP tüm tarayıcılarda yerel olarak desteklendiğinden, şeffaf hareketli bir WebP'yi gömmek karmaşık JavaScript oynatıcı kitaplıkları veya canvas motorları gerektirmez. Standart bir HTML <img> etiketi kullanın:

<img src="/assets/ui-demo.webp" alt="Uygulama Özellik Demosu" width="640" height="360" loading="lazy" decoding="async" />

Açık width ve height öznitelikleri belirlemek, sayfa düzeni hesaplaması sırasında Düzen Kaymasını (CLS) önler.

picture öğesi kullanarak desteklenmeyen tarayıcılar için yedek çözüm

Eski kurumsal ortamları veya yerel WebP animasyon desteği bulunmayan daha eski tarayıcıları desteklemeniz gerekiyorsa, bir APNG veya MP4 yedek akışı sunmak için HTML5 <picture> öğesini kullanın:

<picture>
<source srcset="/assets/ui-demo.webp" type="image/webp" />
<source srcset="/assets/ui-demo.png" type="image/png" />
<img src="/assets/ui-demo.gif" alt="Uygulama Özellik Demosu" />
</picture>

Tembel yükleme (Lazy Loading) ve performans ipuçları

Ekranın alt kısmında (below the fold) yer alan hareketli WebP öğelerine loading="lazy" özniteliğini uygulayın. Bu işlem, kullanıcı varlığın yakınına kaydırana kadar indirmeyi ve kare kod çözmeyi erteler, böylece ilk sayfa yüklemesi sırasında ana işlem parçacığı (main-thread) CPU performansını korur.

React, Next.js ve Tailwind yerleşimlerinde kullanımı

Modern React veya Next.js ön uç uygulamaları içine şeffaf hareketli WebP varlıklarını entegre ederken, görseli stillendirilmiş Tailwind kapsayıcıları içine yerleştirin:

import Image from 'next/image';

export default function HeroComponent() {
return (
<div class="relative bg-slate-900 p-8 rounded-2xl overflow-hidden">
<Image
src="/ui-demo.webp"
alt="Dinamik UI Katmanı"
width={640}
height={360}
className="drop-shadow-2xl hover:scale-105 transition-transform duration-300"
unoptimized
/>
</div>
);
}

Not: Önceden sıkıştırılmış hareketli WebP varlıklarını sunarken, alpha kanallarını statik JPEG karelerine dönüştürebilecek sunucu tarafı görsel yeniden sıkıştırma motorlarını devreden çıkarmak için Next.js Image bileşenlerinde unoptimized seçeneğini belirtin.

Android ve iOS uygulamalarında kullanımı

Yerel araçlarla veya platformlar arası çerçevelerle oluşturulan mobil uygulamalar, WebP şeffaf animasyonlarını yerel olarak işler:

• Android (Kotlin/Jetpack Compose): Coil veya Glide görsel yükleme kütüphanelerini kullanın. Coil, hareketli WebP'yi yerel olarak ImageLoader.Builder(context).components { add(AnimatedWebpDecoder.Factory()) } aracılığıyla işler.
• iOS (SwiftUI): SwiftUI, WebP'yi AsyncImage veya SDWebImageSwiftUI gibi hafif sarmalayıcılar aracılığıyla işler.
• Flutter / React Native: Standart Image.asset('assets/ui-demo.webp') bileşenlerini kullanın; yerel çerçeve motorları WebP alpha dizilerini doğrudan cihaz GPU katmanlarında çözer.

Uygulama mimariniz karmaşık gerçek zamanlı etkileşimli hareketli grafikler, parçacık akışları veya WebP'den daha düşük bellek ayak izine sahip sunucu güdümlü canlı yayın hediye animasyonları gerektiriyorsa, SVGA Maker gibi araçlar veya özel vektör motorları tarafından desteklenen uzmanlaşmış formatları değerlendirin.

Eksiksiz özel gerçek zamanlı mobil platformlar inşa eden ekipler için, AppLooma LLC gibi deneyimli bir geliştirme firmasına danışmak, istemci tarafı işleme hattınızın kare düşürmeden veya belleğe aşırı yük bindirmeden dinamik animasyon varlıklarını işlemesini sağlar.

Karanlık ve aydınlık arka planlarda doğru göründüğünden emin olma

Şeffaf WebP varlığınızı her zaman birden fazla zıt arka plan renginde test edin (örn. saf siyah #000000, saf beyaz #FFFFFF ve canlı marka renkleri). Beyaz arka planlarda koyu kenar harelenmesi görünürse, kenar alt-piksel halkalarını temizlemek için FFmpeg chroma key işleme hattınızı biraz daha yüksek blend ve despill parametreleriyle yeniden çalıştırın.

Sorun Giderme — Sık Karşılaşılan Sorunlar ve Çözümleri

WebP dosyam şeffaflık yerine siyah veya beyaz arka plan gösteriyor

Bu sorun, FFmpeg renk alanı dönüştürmesi sırasında alpha kanalını attığında veya ara bir görsel aktarımı piksel formatlarını standart 3 kanallı RGB'ye dönüştürdüğünde ortaya çıkar. Piksel arabelleklerini libwebp kodlayıcısına aktarmadan önce filtre grafiğinizin açıkça format=yuva420p veya format=rgba içerdiğinden emin olun.

Kenarlar tırtıklı görünüyor veya yeşil bir halka var

Tırtıklı kenarlar (aliasing) veya renkli hatlar, chroma key benzerlik eşiğinin çok düşük ayarlandığını veya yumuşak kenar harmanlamasının atlandığını gösterir. FFmpeg'deki blend parametrenizi 0.01 değerinden 0.05 veya 0.08 değerine yükseltin. Alternatif olarak, yumuşak kenar yumuşatmasını manuel olarak yönlendirmek için yüksek çözünürlüklü 8-bit gri tonlamalı bir alpha maskesi kullanın.

Animasyon döngüye girmiyor veya yalnızca bir kez oynatılıyor

Varsayılan olarak belirli FFmpeg sürümleri, WebP dizilerini tek bir animasyon döngüsü yürütüp duracak şekilde kodlar. Web tarayıcı motorları içinde sonsuz döngüsel yürütmeyi zorlamak için dışa aktarma komutunuza açıkça -loop 0 bayrağını ekleyin.

Dosya boyutu çok büyük

Dışa aktarılan dosya boyutunuz 1-2 MB'ı aşıyorsa, muhtemelen tam ekran çözünürlüğünde kodlama yapıyor, 60 fps'yi koruyor veya kayıpsız sıkıştırma (-lossless 1) kullanıyorsunuzdur. Kullanılmayan tuval alanını kırpın, kare hızını 20 fps'ye düşürün, boyutları küçültün ve -q:v 70 ile kayıplı WebP kodlaması kullanın.

Oynatma takılıyor / kesintili

Takılan veya kesintili animasyon oynatımı, video ayıklama sırasında pürüzsüz olmayan kare süresi zaman damgalarından veya istemci cihazlarda aşırı CPU kod çözme yükünden kaynaklanır. Değişken kare hızı yakalama modları yerine FFmpeg'in fps=24 filtresini kullanarak kararlı ve tekdüze bir kare hızı zorlayın.

Chrome'da çalışıyor ama başka bir tarayıcıda veya uygulamada çalışmıyor

Eski işletim sistemi web görünümleri veya güncellenmemiş görsel ayrıştırma kütüphaneleri, kayıplı WebP alpha kanallarının kodunu doğru şekilde çözemeyebilir. Varlığınızı standart kayıpsız parametreler (-lossless 1) kullanarak yeniden dışa aktarmak veya bir picture öğesi yedek yapısı gömmek, platformlar arası istisnai durumları çözer.

Arama trafiği için değerli bir bölüm — insanlar hataları aratır

Arama Amacı İpucu: 'FFmpeg webp siyah arka plan şeffaflık düzeltmesi' veya 'ffmpeg yeşil halka kaldırma chroma key' gibi yaygın hata sorguları, yüksek niyetli organik arama trafiği çeker. Bu hızlı sorun giderme çözümlerini referans olarak tutmak, pratik komut satırı sorunlarını anında çözmeye yardımcı olur.

Bonus — Tüm Süreci Otomatikleştirmek

Toplu dönüştürme için yeniden kullanılabilir Shell betiği

Ham ekran kayıtlarını tek bir terminal komutuyla optimize edilmiş şeffaf WebP dosyalarına işleyen yeniden kullanılabilir bir Bash otomasyon betiği (convert_to_webp.sh) oluşturarak zamandan tasarruf edin:

#!/bin/bash
# Kullanım: ./convert_to_webp.sh input.mp4 output.webp

INPUT=$1
OUTPUT=$2

ffmpeg -i "$INPUT" \
-vf "colorkey=0x00FF00:0.14:0.04,despill=type=green,fps=24,scale=640:-1:flags=lanczos" \
-vcodec libwebp \_complex "[0:v] fps=24,scale=640:-1:flags=lanczos[x];[x]split[a][b];[a]palettegen=reserve_transparent=1[p];[b][p]paletteuse" \
-loop 0 \
-q:v 75 \
-compression_level 6 \
"$OUTPUT"

echo "$INPUT başarıyla şeffaflık ile $OUTPUT dosyasına dönüştürüldü!"

Terminalinizde chmod +x convert_to_webp.sh komutunu çalıştırarak betiği çalıştırılabilir hale getirin.

Tüm klasördeki kayıtları tek seferde işleme

Ham MP4 ekran kayıtlarını içeren tüm bir dizini işlemek ve bunları otomatik olarak şeffaf WebP dosyalarına dönüştürmek için şu terminal döngüsünü çalıştırın:

for f in *.mp4; do ./convert_to_webp.sh "$f" "${f%.mp4}.webp"; done

Bu toplu iş döngüsü, çalışma klasörünüzdeki her MP4 dosyasını sırayla işler, renk ayıklama ve alpha çıkarma işlemlerini uygular ve karşılık gelen sıkıştırılmış WebP dosyalarını otomatik olarak verir.

Tasarım veya derleme iş akışınıza ekleme

Bu FFmpeg betiğini doğrudan CI/CD derleme betiklerine, GitHub Actions iş akışlarına veya yerel NPM derleme rutinlerine entegre edebilirsiniz. Bu, tasarım ve mühendislik ekiplerinin ham UI ekran kayıtlarını bir proje deposuna bırakmasına ve uygulama dağıtımı sırasında otomatik olarak üretime hazır WebP varlıkları üretmesine olanak tanır.

Yine de Ne Zaman Bir Tasarımcıyla Çalışmalısınız?

Dürüst bir yaklaşım — karmaşık hareketli grafikler ve özel animasyonlar için

Ekran kayıtlarını şeffaf hareketli WebP dosyalarına dönüştürmek UI özelliklerini, uygulama iş akışlarını ve mikro etkileşimleri sergilemek için son derece iyi çalışsa da, profesyonel hareketli grafik tasarımının yerini tutmaz. Ekran kayıtları, kaydedilen UI kareleri ve standart arayüz geçişleri ile sınırlıdır. Özel hazırlanmış yumuşatılmış hızlandırma eğrilerini (cubic-bezier easing), karmaşık 3D karakter kurulumlarını, dinamik vektör şekil değiştirmelerini veya parçacık efekti fiziklerini yeniden üretemezler.

Projeniz özel ana marka animasyonları, yüksek performanslı vektör parçacık efektleri veya sesli sohbet odaları ve canlı yayın uygulamaları için etkileşimli gerçek zamanlı hediye animasyonları gerektiriyorsa, ham ekran kayıtlarına güvenmek yetersiz kalacaktır. Karmaşık vektör tabanlı hareketli grafikler ve hafif etkileşimli mobil animasyonlar için SVGA Maker gibi özel stüdyo üretim süreçlerinden yararlanmak veya profesyonel hareketli grafik tasarımcılarıyla çalışmak üstün görsel kalite ve optimum çalışma zamanı performansı sağlar.

Frequently asked questions

Conclusion

Ham ekran kayıtlarını hafif ve şeffaf hareketli bir WebP dosyasına dönüştürmek; pahalı hareketli grafik tasarım araçlarına bağımlı kalmadan SaaS açılış sayfalarınızı, mobil alıştırma ekranlarınızı ve UI sergileme demolarınızı üst seviyeye taşımanın en hızlı yollarından biridir. Tek renkli arka plan kayıtlarını FFmpeg chroma keying ve palet optimizasyonu ile eşleştirerek dakikalar içinde kusursuz 8-bit şeffaf animasyonlar yayınlayabilirsiniz.

Varlık hatlarınızı otomatikleştirmek veya canlı yayın yeteneklerine sahip yüksek dönüşümlü mobil uygulamalar inşa etmek istiyorsanız, ürün vizyonunuzu hayata geçirmek için uzmanlaşmış tasarım süreçlerimizi inceleyin veya AppLooma LLC ekibimizle iletişime geçin.