Фотографії, рисунки, фонові малюнки — все це візуальні елементи веб-дизайну. Саме від них залежить зовнішній вигляд сайта, а також швидкість його завантаження. Загалом у веб-дизайні використовують чотири основні формати графічних файлів: формат JPEG; формат GIF; формат PNG; формат SVG. 

Зазначимо, що ми говоримо насамперед про статичні зображення. Їх легко зобразити, використовуючи елемент <img>. Розглянемо тег <img> і його атрибути.

З огляду на стандарти розробки сайтів рекомендується створювати окрему теку з назвою «images», в якій збері-гаються всі зображення, що містяться на веб-сторінках сайта.

Тег матиме такий вигляд:  <img src="images/2.jpg">

Атрибут alt має надати достатньо інформації користувачеві, щоб він склав уявлення про те, що є на зображенні:

<img src="URL" alt="альтернативний текст">

Розглянемо CSS-властивості зображень. Розмір зображення задається двома параметрами: width — ширина зображення; height — висота зображення. Ширину й висоту зображення можна задавати як у пікселях (при цьому розмір картинки буде постійним незалежно від роздільності екрану), так і у відсотках — тоді розмір картинки залежатиме від роздільності екрана користувача.

Параметр border дозволяє створити рамку для зображення. Причому можна налаштовувати ширину та колір і стиль рамки за допомогою відповідних параметрів:

• border-width;

• border-color;

• border-style.

Додатково можна налаштовувати ці властивості для кожної сторони:

• top (верхня),

• left (ліва),

• right (права),

• bottom (нижня).