HTML Resim ve Video Ekleme

Web dünyasına adım attığınızda, oluşturduğunuz HTML iskeletinin sadece düz metinlerden ibaret olmasını istemezsiniz. Kullanıcıların dikkatini çeken, onlara görsel bir şölen sunan ve anlattığınız hikayeyi destekleyen en güçlü araçlar resimler ve videolardır. Eski web tasarım dönemlerinde, bir web sayfasına video veya animasyon eklemek için “Adobe Flash Player” gibi üçüncü parti eklentilere (plugin) ihtiyaç duyuluyordu. Ancak HTML5’in hayatımıza girmesiyle bu durum tamamen değişti. Artık harici hiçbir yazılıma ihtiyaç duymadan, HTML5’in sunduğu yerleşik (native) etiketlerle sayfalarımıza doğrudan, hızlı ve güvenli bir şekilde multimedya öğeleri ekleyebiliyoruz.

Bu rehberde, ilk defa kod yazacak biri olarak HTML belgelerinize nasıl resim ve video ekleyeceğinizi, bu elementlerin aldığı önemli nitelikleri (attributes) ve modern web dünyasında SEO (Arama Motoru Optimizasyonu) ile Erişilebilirlik (Accessibility) açısından dikkat etmeniz gerekenleri bol örneklerle öğreneceksiniz.

1. HTML ile Web Sayfasına Resim Ekleme (<img> Etiketi)

HTML’de sayfanıza bir görsel yerleştirmek için <img> (image) etiketi kullanılır. Önceki konulardan hatırlayacağınız <p> veya <h1> etiketlerinin aksine, <img> etiketi bir boş elementtir (void element). Boş elementlerin içine metin veya başka bir etiket yazılamaz ve </img> şeklinde bir kapanış etiketleri kesinlikle yoktur. Sadece açılış etiketiyle yazılırlar ve içlerine aldıkları “nitelikler” (attributes) ile çalışırlar.

Bir resmin düzgün bir şekilde görüntülenebilmesi için iki temel niteliğe ihtiyacı vardır:

• src (Source – Kaynak): Tarayıcıya resmin nerede (hangi dosya yolunda veya URL’de) bulunduğunu söyler.
• alt (Alternative Text – Alternatif Metin): Resim herhangi bir nedenden dolayı (sunucu hatası, yavaş internet vb.) yüklenemezse ekranda bu metin görünür. Ayrıca SEO ve görme engelli kullanıcılar için kritik bir öneme sahiptir.

Temel Bir Resim Ekleme Örneği:

<p>Aşağıda ofisimizin bir fotoğrafını görebilirsiniz:</p>
<img src="ofis-fotografi.jpg" alt="Güneşli bir günde modern çalışma ofisimiz" width="600" height="400">

Bu örnekteki width (genişlik) ve height (yükseklik) nitelikleri, resmin ekranda kaplayacağı alanı pikseller (px) cinsinden belirtir. Tarayıcı, sayfa yüklenirken resmin boyutunu önceden bilirse, sayfa düzeninin resim yüklendikten sonra aniden kaymasını (Layout Shift) engeller. Ancak modern tasarımlarda resimlerin genişliği genellikle HTML ile değil, CSS ile (örneğin width: 100%;) kontrol edilir.

Responsive (Duyarlı) Resimler İçin <picture> Etiketi

Günümüzde kullanıcılar web sitenize devasa bir bilgisayar monitöründen de, küçük bir cep telefonu ekranından da girebilir. Mobil kullanıcılara büyük masaüstü resimleri yükletmek internet kotalarını tüketir ve sitenizi yavaşlatır.

HTML5, bu sorunu çözmek için <picture> etiketini ve srcset niteliğini sunar. <picture> etiketi, farklı ekran boyutlarına göre kullanıcının cihazına en uygun resmi seçip yüklemesini sağlar.

Örnek:

<picture>
  <source media="(max-width: 600px)" srcset="kucuk-resim.jpg">
  <source media="(max-width: 1200px)" srcset="orta-resim.jpg">
  <img src="buyuk-resim.jpg" alt="Doğa manzarası">
</picture>

Bu kodda; ekran genişliği 600px’den küçükse kucuk-resim.jpg, 1200px’den küçükse orta-resim.jpg yüklenir. Cihaz hiçbir şarta uymuyorsa varsayılan olarak <img> etiketi içindeki buyuk-resim.jpg dosyası kullanılır.

2. HTML5 ile Web Sayfasına Video Ekleme (<video> Etiketi)

HTML5’in en büyük devrimlerinden biri olan <video> etiketi, web sayfalarına doğrudan ve yüksek performanslı video oynatıcılar eklememizi sağlar. Tıpkı resimlerde olduğu gibi, kullanıcılara zengin bir deneyim sunmak için harici bir eklentiye ihtiyaç duymazsınız.

Bir <video> etiketini tek başına yazmak yeterli değildir, kullanıcının videoyu başlatıp durdurabilmesi için bazı nitelikler (attributes) eklemeniz gerekir.

En sık kullanılan <video> nitelikleri şunlardır:

• controls: Tarayıcının standart video oynatma tuşlarını (oynat/duraklat, ses ayarı, tam ekran) ekranda gösterir. Bu olmadan kullanıcı videoyu başlatamaz.
• autoplay: Video yüklendiği anda otomatik olarak oynamaya başlar. (Not: Günümüz tarayıcıları, sesli videoların otomatik oynamasını kullanıcı deneyimi gereği engeller. Autoplay kullanmak istiyorsanız genellikle muted (sessiz) niteliğini de eklemeniz gerekir).
• loop: Video bittiğinde otomatik olarak başa sarar ve tekrar oynamaya başlar.
• poster: Video yüklenmeden veya oynatılmadan önce ekranda görünecek olan “kapak fotoğrafı” (thumbnail) görselinin yolunu belirtir.

Videolar İçin Farklı Formatlar Sunmak: <source> Etiketi

Her internet tarayıcısı (Chrome, Safari, Firefox vb.) tüm video formatlarını desteklemeyebilir. Bu nedenle videonuzu tek bir formata hapsetmek yerine, <source> (kaynak) etiketi kullanılarak farklı formatlarda alternatifler sunulur. Tarayıcı bu listeyi yukarıdan aşağıya doğru okur ve çalıştırabildiği ilk formatı oynatır.

Profesyonel Bir Video Ekleme Örneği:

<video width="640" height="360" controls poster="video-kapak.jpg">
  <source src="tanitim-videosu.mp4" type="video/mp4">
  <source src="tanitim-videosu.ogv" type="video/ogg">
  <track kind="subtitles" src="altyazilar_tr.vtt" srclang="tr" label="Türkçe">
  <p>Tarayıcınız HTML5 video etiketini desteklemiyor. Lütfen güncel bir tarayıcı kullanın.</p>
</video>

Bu örnekte yer alan <track> etiketi, videonuza zamanlanmış metinler (örneğin altyazılar) eklemenizi sağlar. .vtt formatındaki bu dosyalar, özellikle videoyu sessiz izleyenler veya işitme engelli kullanıcılar için hayati bir özelliktir. Ayrıca etiketlerin en altında bulunan <p> metni, yalnızca <video> etiketini desteklemeyen çok eski tarayıcılarda görünür (bir çeşit hata mesajı işlevi görür).

3. Multimedya İçin SEO ve Erişilebilirlik (Accessibility) Altın Kuralları

Sayfanıza resim ve video eklemek sadece görsel bir süreç değil, aynı zamanda sitenizin başarısını belirleyen stratejik bir hamledir. Google botları ve ekran okuyucu (screen reader) cihazlar sayfanızı ziyaret ettiğinde resimleri “göremez”, videoları “izleyemezler”. Onlara içeriğin ne olduğunu anlatmak sizin görevinizdir:

1. Doğru ve Açıklayıcı alt (Alternatif) Metinler Yazın: Bir resim eklerken <img alt="..."> niteliğini asla boş geçmeyin. Resimde ne olduğunu detaylıca ama spam yapmadan (anahtar kelime doldurmadan) anlatın. Örneğin “araba” yazmak yerine “Kırmızı, üstü açık bir spor araba dağ yolunda ilerliyor” yazın. Arama motorları bu metinleri indeksler ve sizi “Görsel Aramalarda” üst sıralara taşır. Görme engelli bir kullanıcı sitenize girdiğinde ise ekran okuyucu cihaz bu alt metnini sese çevirerek ona okur.
2. Süsleme Amaçlı Görsellerde Alt Etiketi Kullanımı: Eğer eklediğiniz resim bilgi içermiyorsa, sadece arka planı süslemek veya tasarımsal bir çizgi oluşturmak için oradaysa, alt niteliğini tamamen silmeyin. Bunun yerine içini boş bırakın: alt="". Böylece ekran okuyucular bu resmin önemsiz olduğunu anlar ve okuyarak engelli kullanıcının vaktini çalmaz. (Not: Bu tür süsleme görsellerini mümkünse HTML ile değil, CSS background-image olarak vermek her zaman daha doğru bir yaklaşımdır).
3. Videolarda Altyazı ve Transkript Kullanın: Videolarınızda <track> etiketi ile altyazı (subtitle) veya açıklamalar sunmak erişilebilirlik standartları için gereklidir. İçeriğinize ayrıca metin tabanlı bir transkript eklerseniz, arama motorları videonun içinde konuşulan konuları da okuyup web sitenizin SEO değerini ciddi şekilde artırır.

Sonuç: HTML5’in getirdiği yenilikçi <img>, <picture>, <video> ve <source> etiketleri sayesinde web sitelerimiz artık çok daha canlı, dinamik ve zengin hale geldi. Ancak unutmayın; başarılı bir web geliştirici sadece ekranda güzel görüneni değil, tüm internet hızlarında sorunsuz çalışan, arama motorları tarafından anlaşılabilen ve özel gereksinimli bireyler dâhil herkes için tamamen erişilebilir olan multimedya yapıları kuran kişidir. Yukarıdaki örnek kodları kendi .html dosyalarınızda deneyerek işe koyulabilirsiniz!