HTML Resim (HTML Images)
Bu bölümde HTML belgelerine resim eklemeyi, bu resimleri doğru formatta eklemeyi ve Web için resimleri nasıl optimize edeceğimizi anlatacağız.
HTML Resim Ekleme
Bir web sayfasına çeşitli sebeplerden ötürü resim eklemek isteyebilirsiniz. Zira kelimelerin kifayetsiz kaldığı yerlerde bir resim ile imdadımıza yetişebilir.
Zaten HTML belgelerinde de metinlerin yanında bolca resim kullanılır. Ancak HTML belgelerine görselleri seçerken ve hazırlarken göz önünde bulundurulması gereken birkaç şey vardır:
- Yazıyla alakalı olmalı
- Yazıyı anlaşılır kılmalı
- Gerekmedikçe yazıya eklenmemeli zira web sitenin yavaş açılmasına sebep olur.
- Yüksek çözünürlüğe sahip resimleri Photoshop gibi bir resim editörü ile optimize edin.
HTML belgelerine <img> elementleri kullanarak resim eklenmektedir. <img> boş bir HTML elementidir. Haliyle </img> şeklinde bir kapanış etiketi yoktur.
Yaygın Kullanılan Resim Formatları
Aşağıdaki tabloda Chrome, Edge, Firefox, Safari, Opera gibi tarayıcılarda desteklenen en yaygın görüntü dosyası türleri derlenmiştir:
| Kısaltma | Dosya Formatı | Dosya Uzatısı |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
HTML Resim Sözdizimi (Images Syntax)
HTML <img> etiketinde aşağıdaki özellikler kullanılmaktadır:
- src (Resmin yolunu belirtir)
- alt (Görüntü için alternatif bir metin belirtir)
- title (Resim hakkında ek bilgi sağlar)
⭐ img etiketinin en önemli özniteliği src özniteliğidir. Görüntülenmesini istediğiniz resmin yolunu (URL) barındırır.
Peki src içine resmin yolu nasıl yazılmalı diye sorabilirsiniz. Cevap olarak aşağıdaki şekillerde olabilir:
- Eğer resim HTML dosyası ile aynı klasörde ise:
src="resim.dosyauzantısı" - Eğer resim farklı bir klasörde ise:
src="/klasorAdi/resim.dosyauzantısı" - Eğer resim başka bir web sitesinden çekiliyor ise:
src="https://site.com/resim.dosyauzantısı"
⭐ alt özniteliği, eğer resminiz herhangi bir sorundan ötürü yüklenemezse ekranda resmin ne olduğunu açıklayan yazıyı açıklamak için kullanılır. Bu sayede resim görüntülenemediğinde resmi göremeyen kullanıcılar resim hakkında bilgi sahibi olurlar. Zaten arama motorları da alt özniteliği aracılığıyla ilgili resim hakkında bilgi edinirler.
⭐title özniteliği ise resim hakkında ek bilgi sağlamak için kullanılmaktadır. Resmin üzerinde fareyi beklettiğinizde bu ek açıklamayı görebilirsiniz.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
HTML Resim Boyutlandırma (Image Size)
HTML’de width ve height öznitelikleri ile resmin genişlik ve yükseklik değerleri ayarlanabilmektedir. Ancak bunun yerine style özniteliği kullanarak resimlerin genişlik (width) ve yükseklik (height) değerlerini ayarlamak yaygın kullanılan yöntemdir.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
❗ Resmi link olarak kullanmak için <a> etiketinden faydalanılır. <a> etiketi, <img> etiketini kapsayacak şekilde yazılır:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
HTML’de Resmi Sağa veya Sola Kaydırmak
CSS özelliği olan float ile HTML dökümanlarınızdaki resmi sağa veya sola kaydırabilirsiniz.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.