Daha Küçük Dosya Boyutlarında Hareketli Gifler Oluşturmak için HTML5 Video Nasıl Kullanılır

Çevrimiçi olarak makul bir süre bile harcarsanız, GIF'lerin her yerde olduğunu bilirsiniz. Yalnızca harika bir mizah kaynağı olmakla kalmaz, aynı zamanda içeriğinize eşlik edecek kullanışlı medya kaynakları da sağlarlar. Sorun şu ki, GIF'ler, sayfaları yavaşlatmaya meyilli olan büyük dosya boyutları nedeniyle kötü bir üne sahiptir.

Neyse ki GIF'ler artık şehirdeki tek oyun değil. Aslında, animasyonlarınızı yalnızca daha iyi çalışan değil, aynı zamanda çok daha az yer kaplayan HTML5 videoya dönüştürmenin yolları vardır. Bu makalede, ikincisinin birincisine göre avantajları hakkında derinlemesine gideceğiz, ardından size GIF'lerinizi HTML5 videoya nasıl dönüştüreceğinizi öğreteceğiz ve bu mümkün değilse ne yapacağınızı göstereceğiz. Hadi kazalım!

Neden Normal GIF'ler Üzerinde HTML5 Video Kullanmayı Düşünmelisiniz?

Teoride, GIF'ler ve HTML5 videosu bundan daha farklı olamazdı. İlki, hem statik hem de hareketli görüntüleri görüntülemenizi sağlayan bir biçimdir, ikincisi ise size bir web sitesinde gömülü videoları göstermenin bir yolunu sunar. Daha önce, bunu yapmanın tek yolu uzun GIF çoğu durumda çok ağır olur, çünkü Flash gibi üçüncü taraf yazılımı kullanmaktı.

HTML5 videosunun kurtarmaya geldiği yer burasıdır. GIF'ler (büyük dosya boyutları) söz konusu olduğunda en büyük sorunu alır ve sıfırdan daha iyi optimizasyon sayesinde çözer. Ancak, hepsi bu değil:

1. Daha düşük dosya boyutları, daha hızlı yükleme sürelerine yol açar. Sitenizin hızlı bir şekilde yüklendiğinden emin olmak, iyi bir kullanıcı deneyimi sağlamak için çok önemlidir.
2. Daha iyi özelleştirme seçenekleri. GIF'ler kullanışlı olabilir, ancak bunları oluşturmak ve düzenlemek genellikle özel yazılım gerektirir. Öte yandan, birkaç basit kod satırı kullanarak HTML5 videolarınızın özelliklerini özelleştirebilirsiniz.

Gördüğünüz gibi, HTML5 video birçok avantaj sunuyor. Ancak, GIF'lerin yerine kullanmak herkes için ideal değildir. Örneğin, birçok mobil tarayıcı, serbestçe oynatılan medyanın veri ödenekleri üzerindeki etkisi nedeniyle otomatik oynatmayı devre dışı bırakır ve bu da kullanıcının deneyiminin bozulmasına neden olur.

Dahası, HTML5 hala gelişmekte olan bir standart olduğundan, bazı tarayıcılar videoyu diğerlerinden farklı şekilde uygular. Bu nedenle, medyanızı mümkün olduğunca çok cihaza ve tarayıcıya tutarlı bir şekilde ulaştırmak istiyorsanız, GIF'lerin hala cephanenizin bir parçası olması gerekebilir. Ancak, yukarıda listelenen nedenlerle HTML5 video uygulamakla ilgileniyorsanız, nasıl yapılacağını öğrenmek için okumaya devam edin!

GIF'lerinizi HTML5 Videoya Nasıl Çevirirsiniz?

İlerlemeden önce, HTML5 videosunun kendi başına bir format olmadığını (GIF olsa da) belirtmekte fayda var. Bunun yerine, MP4, WebM ve OGG dahil olmak üzere video formatlarını destekleyen bir öğedir.

Çoğu durumda, OGG'den daha popüler olma eğiliminde olduklarından, MP4 veya WebM dosyalarını kullanırsınız. Sorun, GIF'lerin çok özel bir davranış biçimine sahip olmasıdır. Genellikle yüklenir yüklenmez çalmaya başlarlar, tekrar tekrar döngüye girerler ve sesleri yoktur.

İşte burada HTML5 özellikleri devreye giriyor. Birkaç basit kod satırı kullanarak videolarımızı tıpkı GIF'ler gibi davranacak şekilde ayarlayabiliriz. Örneğin bu kısa animasyonu alın:

İlk bakışta, bu normal bir GIF gibi görünebilir, ancak aslında bir döngüde otomatik olarak oynatılacak şekilde ayarlanmış, sesi kapatılmış bir WebM videosudur. Oraya ulaşmak için CloudConvert hizmetini kullanarak bir GIF'i dönüştürdük ve aşağıdaki kod parçasını kullanarak yerleştirdik:

<video autoplay loop muted poster="chaplin.png">
<source type="video/webm" src="chaplin.webm">
</video>

Çok fazla güçlük gibi görünebilir, ancak en iyi kısmı atladık. Orijinal GIF 1 MB'ın biraz üzerindeyken, WebM karşılığı yalnızca 95 KB'dir. Bu büyük bir fark ve her durumda aynı oran tutmasa bile, HTML5 videoyu seçerek dosya boyutunda kayda değer iyileştirmeler görmeniz olasıdır.

Şimdi elimizdeki kod parçacığına geri dönelim. Öğemizi gömmek için <video> etiketlerini kullandığımızı fark edeceksiniz. Bunun da ötesinde, bir GIF'in davranışını simüle etmek için üç özel özellik ekledik: otomatik oynatma, döngü ve poster . İlk ikisi açıklayıcıdır, üçüncüsü ise videonuz yüklenirken yer tutucu olarak görünecek bir resmi belirtir (bu, küçük dosyalar için bir sorun olmamalıdır).

Hangi öznitelikleri kullanacağınızı belirledikten sonra, aşağıdaki kodlardan birini kullanarak hangi video türünü gömeceğinizi belirtmek isteyeceksiniz:

1. webm
2. mp4
3. ogg

HTML5 yalnızca bu üç video türünü destekler, bu nedenle hatırlanması kolay bir listedir.

Ardından, kök klasörünüzü referans olarak kullanarak video dosyanızın konumunu belirtmeniz gerekir. Örneğin, videonuzu medya kitaplığınıza yüklerseniz, konumu şöyle görünür:

src="wp-content/uploads/2017/04/chaplin.webm"

Devam edersek, HTML5 videolarınız için kullanmak isteyebileceğiniz birkaç özellik daha var. Örneğin, videonuzda ses varsa sessize alma kullanışlı olabilir ve öğenin boyutunu değiştirmek istiyorsanız yükseklik ve genişlik gerekli olabilir. Bunları dahil etmek istiyorsanız, tek yapmanız gereken onları <video> açılış etiketinize aşağıdaki gibi eklemektir:

<video autoplay loop muted width="400" height="400">
<source type="video/webm" src="wp-content/uploads/2017/04/chaplin.webm">
</video>

Yukarıdaki örnekte, WebM videomuz sessiz ve kesin genişlik ve yükseklik değerleriyle bir döngüde oynatılacaktır. İşte böyle görünecek:

Özetle bu kadar! HTML'ye aşina iseniz, süreç sizin için bir esinti olmalıdır. Özetlemek gerekirse, tek yapmanız gereken videonuzu veya GIF'inizi HTML5 tarafından desteklenen biçimlerden birine dönüştürmek ve ardından istediğiniz nitelikleri kullanarak gömmek.

Doğal olarak WordPress, yerleşik kod düzenleyicisi sayesinde HTML5'i yerleştirmeyi kolaylaştırır ve Divi de öyle. Temanın Video modülü hem MP4 hem de WebM videolarını destekler ve Özel CSS bölümünden onlara istediğiniz özellikleri atayabilirsiniz. Ancak, dikkatli olun – Divi's Video modülü kullanılarak gömülü HTML5 video, varsayılan olarak kontrollerle birlikte görünür. Bu, GIF'lere benzemeyecekleri anlamına gelir.

GIF'leri olabildiğince yakından taklit etmek için, Kod modülünü kullanarak ve istediğiniz nitelikleri manuel olarak girerek gerekli HTML5 kodunu yapıştırmak isteyeceksiniz. Her iki durumda da, emrinizde birçok seçeneğiniz var!

HTML5 Video Kullanamıyorsanız Ne Yapmalısınız?

Modern tarayıcıların çoğu HTML5 videoyu destekler, ancak herhangi bir nedenle bu yönteme geçmeyi tercih etmezseniz, başka seçenekler de vardır.

GIF'lerinizi daha az yer kaplamaları için optimize etmenizi sağlayan birçok araç vardır. Favorilerimizden biri, GIF'ler dahil düzinelerce dosya türünü optimize etmenizi sağlayan FileOptimizer'dır:

Yazılım hem ücretsiz hem de kullanımı oldukça basittir. Tek yapmanız gereken hangi dosyaları optimize edeceğinizi seçmek ve sihrini yapmasına izin vermek. Doğal olarak, optimizasyon seviyesi seçtiğiniz dosyaya bağlı olarak değişecektir, ancak genellikle GIF'lerle iyi sonuçlar göreceksiniz.

Çevrimiçi bir hizmet kullanmayı tercih ediyorsanız, ImageOptim'e göz atmanızı öneririz. Bu, sayfalarınızın daha hızlı yüklenmesi için tüm resimlerinizi ve GIF'lerinizi otomatik olarak optimize eden, ayarlanabilen birinci sınıf bir araçtır:

GIF optimizasyonu söz konusu olduğunda hangi seçeneği kullanacağınız konusunda hala kararsızsanız, bir süre önce yayınladığımız ve diğer birinci sınıf seçeneklere göz attığımız bu karşılaştırma parçasına göz atın.

Çözüm

Çoğu durumda, GIFS yerine HTML5 video kullanmak mantıklıdır. Sonuçta, sayfalarınızı mümkün olan en iyi yükleme süreleri ve performans için optimize etmek için her zaman çaba göstermelisiniz. Ayrıca, teknolojik eğrinin önünde olmak her zaman kazandırır ve HTML5 birçok heyecan verici olasılık sunar.

Bu fikre katılıyorsanız, başlamak için bilmeniz gerekenler şunlardır:

1. CloudConvert gibi bir hizmeti kullanarak GIF'lerinizi MP4, WebM veya OGG dosyalarına dönüştürün.
2. HTML5 <video> öğesini kullanarak video dosyalarınızı gömün.
3. Otomatik oynatma ve döngü gibi mevcut birçok özellikten birini kullanarak HTML5 videonuzda ince ayar yapın.

HTML5 videosunun yakın gelecekte GIF'lerin yerini alacağını düşünüyor musunuz? Aşağıdaki yorumlar bölümünde düşüncelerinizi bizimle paylaşın!

Eloku / Shutterstock.com'dan makale küçük resmi