טיפול בתמונות ב-HTML

תמונות הן חלק חשוב בעיצוב אתרים, ותג <img> מאפשר להוסיף תמונות לדף.

הוספת תמונה עם תג <img>

כדי להוסיף תמונה, השתמש בתג <img> וציין את כתובת התמונה באמצעות המאפיין src.

        <img src="image.jpg" alt="תיאור התמונה" width="600" height="400">
        

המאפיינים alt, width, ו-height משמשים לספק תיאור של התמונה ולהגדיר את ממדיה.

תיאור תמונה עם alt

מאפיין alt חשוב לצורך נגישות והוא מספק תיאור של התמונה במקרה שהיא לא נטענת.

        <img src="logo.png" alt="לוגו האתר" width="200">
        

תיאור טוב בתג alt עוזר לאנשים עם לקויות ראייה להבין את תוכן התמונה.

אופטימיזציה של תמונות

כדי לשפר את ביצועי האתר, חשוב לדאוג שהתמונות יהיו ממומשות ולשקול להשתמש בפורמטים כמו WebP.

        <picture>
          <source srcset="image.webp" type="image/webp">
          <img src="image.jpg" alt="תמונה אופטימלית" width="600">
        </picture>
        

תג <picture> מאפשר להציג תמונה בפורמט מותאם לפי הדפדפן ותנאים שונים.