תיעוד HTML עם דוגמאות להרצה: תמונות

Q: איך מוסיפים תמונה ב-HTML?

השתמשו בתגית עם הקובץ ב-src ותיאור ב-alt: . ל- אין תגית סגירה.

Q: איך משנים את הגודל של תמונה ב-HTML?

הגדירו את המאפיינים width ו-height בפיקסלים, או השתמשו ב-CSS כמו img { width: 300px; height: auto; }. הגדרה של מימד אחד בלבד והשארת השני auto שומרות על הפרופורציות.

Q: למה התמונה שלי לא מוצגת ב-HTML?

בדרך כלל הנתיב ב-src שגוי: הוא יחסי לקובץ ה-HTML, שמות קבצים תלויי רישיות ברוב השרתים, ונתיב כמו C:\photos\cat.jpg קיים רק במחשב שלכם. פתחו את כתובת התמונה ישירות בדפדפן כדי לבדוק אותה.

Q: מה זה טקסט alt ב-HTML?

המאפיין alt הוא טקסט חלופי לתמונה. קוראי מסך קוראים אותו, ודפדפנים מציגים אותו כשהתמונה לא נטענת. תארו מה התמונה מראה או עושה; השתמשו ב-alt="" לתמונות דקורטיביות בלבד.

Q: איך הופכים תמונה לרספונסיבית?

הוסיפו לה max-width: 100%; height: auto; ב-CSS. התמונה מתכווצת אז כדי להתאים למכל צר ואף פעם לא גדלה מעבר לרוחב הטבעי שלה.

איך מוסיפים תמונה ב-HTML

השתמשו באלמנט <img>. src הוא קובץ התמונה, alt מתאר אותה, ו-width ו-height נותנים את הגודל שלה בפיקסלים. <img> הוא אלמנט ריק: אין לו תגית סגירה.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Image</title>
</head>
<body>
  <img
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3Cpath d='M0 150 Q80 90 160 140 T300 130 V200 H0Z' fill='%2316a34a'/%3E%3C/svg%3E"
    alt="Green hills under a yellow sun"
    width="300"
    height="200">
</body>
</html>

ה-src כאן הוא SVG קטן שכתוב בתוך הכתובת (data URI) כדי שהדוגמה תעבוד גם בלי חיבור. באתר אמיתי src הוא נתיב לקובץ:

`src`	נטען
`photo.jpg`	`photo.jpg` באותה תיקייה של קובץ ה-HTML
`images/photo.jpg`	מהתיקייה `images` שליד קובץ ה-HTML
`../photo.jpg`	מתיקייה אחת למעלה
`/images/photo.jpg`	מהתיקייה `images` בשורש האתר
`https://example.com/photo.jpg`	מאתר אחר (הוא יכול לזוז או להיעלם)

נתיבים תלויי רישיות ברוב שרתי האינטרנט: Photo.JPG ו-photo.jpg הם קבצים שונים.

טקסט alt

טקסט ה-alt בא במקום התמונה. קוראי מסך מקריאים אותו, והדפדפן מציג אותו כשהתמונה לא יכולה להיטען. שתי התמונות כאן מצביעות על קבצים שלא קיימים:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alt text</title>
  <style>
    img { border: 2px dashed #e5e7eb; }
  </style>
</head>
<body>
  <p><img src="missing-logo.png" alt="Coddy logo" width="160" height="60"></p>
  <p><img src="missing-chart.png" alt="" width="160" height="60"> (decorative, empty alt)</p>
</body>
</html>

הראשונה מציגה את טקסט ה-alt שלה, "Coddy logo", במקום שבו התמונה אמורה להיות. לשנייה יש alt ריק, כך שאין טקסט להציג, וקוראי מסך מדלגים עליה. איך כותבים alt:

תארו את מה שחשוב בהקשר. "גרף עמודות: המכירות הוכפלו ממרץ עד יוני" אומר יותר מ"גרף".
אל תתחילו ב"תמונה של". קוראי מסך כבר מכריזים עליה כתמונה.
השתמשו ב-alt="" לקישוט (קו מפריד, עיטור רקע) כדי שקוראי מסך ידלגו עליו.
לעולם אל תשמיטו את alt. בלעדיו, חלק מקוראי המסך מקריאים במקומו את שם הקובץ, כמו "IMG underscore 4032 dot jpg".
בתמונה בתוך קישור, תארו את היעד: <a href="/"><img src="logo.svg" alt="Home"></a>.

קביעת גודל התמונה

המאפיינים width ו-height הם בפיקסלים, בלי יחידה. גדלים ב-CSS גוברים עליהם. ה-CSS השימושי ביותר לתמונות הוא הזוג הזה, שמאפשר לתמונה להתכווץ עם המכל שלה אבל אף פעם לא להימתח מעבר לרוחב הטבעי שלה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Image size</title>
  <style>
    .box { width: 180px; border: 2px solid #2563eb; margin-bottom: 12px; }
    .responsive { max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <div class="box">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3C/svg%3E"
      alt="Overflowing" width="300" height="200">
  </div>
  <div class="box">
    <img class="responsive" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3C/svg%3E"
      alt="Fits" width="300" height="200">
  </div>
</body>
</html>

התמונה הראשונה שומרת על 300 הפיקסלים שלה וגולשת מחוץ לתיבה של 180 פיקסלים. השנייה מתכווצת ל-180 על 120, ושומרת על צורת 3:2 שלה. height: auto חשוב: בלעדיו, המאפיין height="200" היה משאיר את התמונה בגובה 200 פיקסלים ומועך אותה.

תמיד כתבו width ו-height ב-HTML, גם לתמונות רספונסיביות. הדפדפן משתמש בהם כדי לשמור את כמות המקום הנכונה לפני שהקובץ מגיע, כך שהטקסט שמתחת לא קופץ למטה כשהתמונה נטענת.

חיתוך עם object-fit

כשתמונה צריכה למלא תיבה בצורה אחרת (אווטאר מרובע מתמונה רחבה, כרטיסים בגובה שווה), object-fit מחליט מה קורה לעודף:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>object-fit</title>
  <style>
    body { font-family: system-ui, sans-serif; display: flex; flex-wrap: wrap; gap: 12px; }
    figure { margin: 0; text-align: center; }
    img { width: 120px; height: 120px; border: 2px solid #111827; display: block; }
  </style>
</head>
<body>
  <figure>
    <img style="object-fit: fill" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>fill</figcaption>
  </figure>
  <figure>
    <img style="object-fit: contain" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>contain</figcaption>
  </figure>
  <figure>
    <img style="object-fit: cover" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>cover</figcaption>
  </figure>
</body>
</html>

המקור הוא תמונה ביחס 2:1 של עיגול, שמוצגת בתיבות מרובעות:

fill (ברירת המחדל) מותח את התמונה לתיבה, כך שהעיגול הופך לאליפסה.
contain מכניס את כל התמונה פנימה, ומשאיר פסים ריקים.
cover ממלא את התיבה וחותך את מה שגולש, כך שהעיגול נשאר עגול. זו הבחירה הרגילה לתמונות ממוזערות ולאווטארים.

object-position בוחר איזה חלק נשאר גלוי בחיתוך, למשל object-position: top לדיוקנאות.

כיתובים עם figure ו-figcaption

כיתוב ששייך לתמונה נכנס ל-<figcaption>, ושניהם נכנסים ל-<figure>. זה קושר ביניהם עבור קוראי מסך, ואפשר לעצב את ה-figure כיחידה אחת:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Figure</title>
  <style>
    figure { display: inline-block; margin: 0; padding: 8px; border: 1px solid #e5e7eb; }
    img { display: block; }
    figcaption { font: 14px system-ui, sans-serif; color: #4b5563; padding-top: 6px; }
  </style>
</head>
<body>
  <figure>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Crect width='240' height='120' fill='%23e5e7eb'/%3E%3Crect x='20' y='70' width='40' height='40' fill='%232563eb'/%3E%3Crect x='80' y='40' width='40' height='70' fill='%232563eb'/%3E%3Crect x='140' y='20' width='40' height='90' fill='%232563eb'/%3E%3C/svg%3E"
      alt="Bar chart: signups rose each quarter" width="240" height="120">
    <figcaption>Figure 1. Signups per quarter.</figcaption>
  </figure>
</body>
</html>

הכיתוב לא מחליף את alt. alt אומר מה התמונה מראה; הכיתוב מוסיף את מה שגם קורא רואה היה צריך.

הרווח שמתחת לתמונה

תמונה יושבת על קו הבסיס של הטקסט, כמו אות, ולכן המכל שלה משאיר מתחתיה מקום לזנבות של אותיות כמו g ו-y. גבול הופך את הרווח לגלוי:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Gap under image</title>
  <style>
    div { display: inline-block; border: 2px solid #dc2626; margin-inline-end: 12px; }
    .fixed img { display: block; }
  </style>
</head>
<body>
  <div><img alt="" width="100" height="60" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60'%3E%3Crect width='100' height='60' fill='%232563eb'/%3E%3C/svg%3E"></div>
  <div class="fixed"><img alt="" width="100" height="60" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60'%3E%3Crect width='100' height='60' fill='%232563eb'/%3E%3C/svg%3E"></div>
</body>
</html>

בגבול הראשון יש פס לבן מתחת לתמונה הכחולה. display: block על התמונה (התיבה השנייה) מסיר אותו; גם vertical-align: middle עושה את זה אם התמונה צריכה להישאר inline.

טעינה עצלה ומקורות רספונסיביים

לתמונות שנמצאות נמוך יותר בעמוד ארוך, loading="lazy" דוחה את ההורדה עד שהקורא גולל קרוב אליהן:

<img src="gallery-7.jpg" alt="Harbor at dusk" width="800" height="533" loading="lazy">

אל תטענו בעצלות את התמונה הראשית בראש העמוד; זה מעכב את החלק של העמוד שקוראים רואים ראשון.

כדי לשלוח קבצים קטנים יותר למסכים קטנים, פרטו כמה גדלים ב-srcset ואמרו לדפדפן באיזה רוחב התמונה תוצג עם sizes. הדפדפן בוחר את הקובץ:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Harbor at dusk" width="800" height="533">

<picture> הולך רחוק יותר ומציע פורמטים שונים, כשה-<img> הוא החלופה שגם נושאת את ה-alt:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Harbor at dusk" width="800" height="533">
</picture>

פורמטים של תמונות

פורמט	שימוש מומלץ
JPEG	צילומים
PNG	צילומי מסך, תמונות שצריכות קצוות חדים או שקיפות
WebP	צילומים וגרפיקה, קטן יותר מ-JPEG ו-PNG, עם שקיפות
AVIF	צילומים, בדרך כלל קטן יותר מ-WebP
SVG	לוגואים, אייקונים ודיאגרמות; משתנה לכל גודל בלי להיטשטש
GIF	אנימציות קצרות, אם כי `<video>` מושתק בלולאה קטן בהרבה

טעויות נפוצות

נתיב מהמחשב שלכם, כמו src="C:\Users\me\photo.jpg". זה עובד רק במחשב שלכם. שימו את הקובץ ליד ה-HTML והשתמשו בנתיב יחסי.
alt חסר. כל <img> צריך אחד, ריק לקישוט.
הגדרה של width וגם height ב-CSS לערכים בצורה שונה. התמונה נמתחת. הגדירו אחד והשאירו את השני auto, או השתמשו ב-object-fit.
בלי המאפיינים width ו-height, כך שהעמוד קופץ כשתמונות נטענות.
קבצים ענקיים שמוקטנים עם CSS. צילום של 4000 פיקסלים שמוצג ב-400 פיקסלים עדיין מורד במלואו. שנו את הגודל שלו, או השתמשו ב-srcset.
תגית סגירה </img>. <img> הוא אלמנט ריק; אין מה לסגור.

התמונות בדוגמאות שלמעלה הן קובצי SVG קטנים מוטבעים. כדי לנסות את אותו קוד עם תמונות משלכם, הדביקו אותו בעורך אונליין של HTML.

שאלות נפוצות

איך מוסיפים תמונה ב-HTML?

השתמשו בתגית <img> עם הקובץ ב-src ותיאור ב-alt: <img src="photo.jpg" alt="A red bicycle" width="600" height="400">. ל-<img> אין תגית סגירה.

איך משנים את הגודל של תמונה ב-HTML?

הגדירו את המאפיינים width ו-height בפיקסלים, או השתמשו ב-CSS כמו img { width: 300px; height: auto; }. הגדרה של מימד אחד בלבד והשארת השני auto שומרות על הפרופורציות.

למה התמונה שלי לא מוצגת ב-HTML?

בדרך כלל הנתיב ב-src שגוי: הוא יחסי לקובץ ה-HTML, שמות קבצים תלויי רישיות ברוב השרתים, ונתיב כמו C:\photos\cat.jpg קיים רק במחשב שלכם. פתחו את כתובת התמונה ישירות בדפדפן כדי לבדוק אותה.

מה זה טקסט alt ב-HTML?

המאפיין alt הוא טקסט חלופי לתמונה. קוראי מסך קוראים אותו, ודפדפנים מציגים אותו כשהתמונה לא נטענת. תארו מה התמונה מראה או עושה; השתמשו ב-alt="" לתמונות דקורטיביות בלבד.

איך הופכים תמונה לרספונסיבית?

הוסיפו לה max-width: 100%; height: auto; ב-CSS. התמונה מתכווצת אז כדי להתאים למכל צר ואף פעם לא גדלה מעבר לרוחב הטבעי שלה.

למה יש רווח מתחת לתמונה שלי?

תמונות הן inline כברירת מחדל ויושבות על קו הבסיס של הטקסט, מה שמשאיר מקום מתחתיהן לזנבות של אותיות. הגדירו display: block על התמונה, או vertical-align: middle, כדי להסיר את הרווח.

מושגים קשורים