Зображення в HTML

1. формати зображень
2. Підсумуємо
3. Вставка зображення в html-файл
4. Висота і ширина зображень
5. трошки нафталіну
6. Розміщення картинки в коді
7. Підписи до ілюстрацій
8. Список безкоштовних фотобанків

Дана стаття написана командою Vertex Academy . Це одна з статей з нашого Самовчителя по HTML & CSS . Сподіваємося, що дана стаття Вам буде корисна. Приємного прочитання!

Зображення моментально дають нам зрозуміти, наскільки даний сайт або стаття можуть бути для нас цікавими, створюють настрій, за новим можуть розкрити тему. Іноді одне фото коштує тисячі слів.

Але і вчащати ними не варто, якщо ви не інстаграм або інтернет-магазин. Бажано, щоб зображення:

• були інформативними
• відповідали колірній гамі вашого сайту
• були доречні

Якщо у вас немає відповідного фото, можна скористатися так званим фотостоках (фотобанком) - місцем, де зберігається безліч фотографій, ілюстрацій і векторної графіки. Таких ресурсів море, ви можливо навіть чули про один з найбільших - Shutterstock, але скачування там платні.

Для тих, хто не любить переплачувати, в кінці статті ми приготували бонус - список декількох фотобанків, де можна скачати величезна кількість якісних красивих матеріалів абсолютно безкоштовно 🙂

формати зображень

У Всесвітній павутині в основному використовуються 3 види зображень:

gif (Graphics Interchange Format - формат для обміну зображеннями)

це перший формат, який почав використовуватися в інтернеті. Плюси такого формату - наявність анімації і маленький розмір, сторінка завантажується швидко. До того ж він підтримує прозорість. Недолік - використовується тільки 256 кольорів (власне тому і розмір маленький), тобто його не можна використовувати для повнокольорових зображень.

jpeg, він же jpg (Joint Photographic Experts Group - Об'єднана група експертів по фотографії - так називається організація-розробник)

підходить для створення повнокольорових, високоякісних зображень, фотографій. Розмір таких картинок великий, тому вони зазвичай дають велике навантаження на сервер. Якщо потрібно стиснути jpeg (для меншої ваги картинки) рекомендуємо брати розмір підсумкового зображення кратний восьми, так втрати якості будуть мінімальними.

png (Portable Network Graphics - Портативна мережева графіка. Вимовляється так само як ping, тобто [pɪŋ])

цей формат спочатку розроблявся для вебу, тобто зображення зазвичай мало "важить" і не гальмує сторінку при завантаженні. Цей формат створений на заміну застарілого gif, але на відміну від нього, не підтримує анімацію. Png-8, як і gif, використовує всього 256 квітів. Формат png-24 підтримує 16 млн кольорів, правда і вага вже немаленький. Png-32 містить стільки ж квітів, як і png-24, і плюс до цього дозволяє отримати зображення з прозорим фоном, причому можна регулювати ступінь прозорості. При зменшенні розмірів png не відбувається втрати в якості кольору.

Підсумуємо

gif - для анімації

jpeg - для фотографій

png - для іконок, кнопок, фонів, логотипів, скріншотів, креслень, текстів, фотографій з прозорим фоном

Вставка зображення в html-файл

Для додавання картинки на сторінку використовується тег <img> (від англ. Image - зображення, картинка). Це одиночний тег, йому не потрібен закриває. Усередині цього тега містяться атрибути.

Атрибут src (від англ. Source - джерело) вказує шлях до файлу (місце, де лежить зображення). Якщо картинка лежить у вас на комп'ютері (поки сайт тільки в процесі розробки) або на вашому сервері - використовуйте відносне посилання. Якщо імідж з мережі, тоді потрібна абсолютна посилання. Як це зробити читайте в статті " посилання ".

При створенні сайту з нуля радимо створити окрему папку для зберігання іміджів. Так вам буде простіше управляти всіма файлами, коли ваш сайт розростеться.

Отже, щоб підключити зображення до вашої веб-сторінці, потрібно написати такий код:

<Img src = "шлях до файлу">

Атрибут alt (від англ. Alternative - альтернатива) вказує текст, який побачить користувач, якщо зображення не завантажили. Неправильно вказано шлях, картинка видалена, поганий інтернет - причин може бути багато, і бажано, щоб людина зрозуміла, що ж криється за цією ненависної іконкою.

Пошуковики звертають пильну увагу на те, щоб цей атрибут був заповнений. А html валідатор (Ресурс для перевірки коду на правильність) сприйме відсутність атрибуту alt як помилку. Якщо ж все атрибути <alt> будуть заповнені, та ще й утримувати по можливості ключові слова - видимість вашого сайту відчутно підвищиться, тобто його частіше будуть показувати на пошуку. Це з області SEO, а на даному етапі нам досить знати, що є такий атрибут, і у "живого" сайту він повинен бути заповнений. Поки сайт лежить у нас на диску - його цілком можна залишити порожнім.

У прикладі нижче ми навмисно вказали неіснуючий шлях для зображення, щоб ви побачили, як працює атрибут alt

Висота і ширина зображень

Також можна встановити висоту і ширину зображення, якщо оригінальна картинка напр. більше, ніж вам потрібна.

У HTML5 це рекомендується робити за допомогою CSS або атрибута style, ось так:

В даному прикладі ми взяли 30% від ширини, але не оригінального іміджу, а розміру вікна браузера. Коли ширина = 100%, то зображення відкривається на всю ширину браузера. Запам'ятайте цю особливість відсотків, як одиниці виміру.

До речі, якби ми написали тільки ширину, результат був би той же, спробуйте:

<Img src = "https://vertex-academy.com/tutorials/wp-content/uploads/2016/07/panda.jpg"

alt = "панда на дереві" style = "width: 30%;" >

Також ширину і висоту можна задавати в пікселях. У випадку з нашою пандою, у якій вихідні розміри 1196 х 796 пікселів, щоб при стисканні тварина не постраждала, нам потрібно зберегти пропорції, а тут без калькулятора не обійдешся. Припустимо, ми хочемо зменшити розмір картинки в 3 рази, тоді нам потрібно прописати розміри 399 х 265 пікселів.

Зверніть увагу, якщо ми збільшуємо зображення пропорційно, то досить вказати тільки один параметр, напр. ширину. Розумний браузер сам визначить повний розмір картинки.

Спробуйте запустити такий код і подивіться на результат:

<Img src = "https://vertex-academy.com/tutorials/wp-content/uploads/2016/07/panda.jpg"

alt = "панда на дереві" style = "width: 399px;" >

Завжди встановлюйте розміри зображення. Зазвичай картинки вантажаться довше, ніж решта html-код. Якщо браузер буде знати, скільки місця резервувати на іміджі, він зможе продовжити завантаження сайту не чекаючи, поки завантажаться зображення.

трошки нафталіну

Якщо вам доведеться колупатися в коді сайту, створеного на HTML-4 або ще більш ранніх, то ви помітите, що розміри зображень встановлюються за допомогою спеціальних атрибутів width і height. Це застарілий метод, хоча все ще валідний в HTML5. Проте радимо використовувати style, тому що на атрибути width і height можуть впливати внутрішні або зовнішні стилі, які будуть жити в браузері або вашому CSS-файлі. Ми зупинимося на цьому детальніше, коли будемо розглядати CSS, а поки просто подивіться приклад, як стилі впливають на атрибути висоти і ширини.

У цьому вікні 3 вкладки: на першій ви бачите html-код, на 2-й код CSS, ну а на останній - як завжди результат. Це працює, як якщо б перша вкладка була файлом index.html, друга - файлом style.css, а третя браузером. Так ось, зараз в нашому CSS написано, що всі елементи з тегом img мають ширину 100%. Розміри атрибутів width і height за замовчуванням в пікселях, тому тут не треба дописувати ніяких одиниць.

Різниця в результаті на обличчя 🙂

Також в старих версіях html використовувалися такі атрибути:

align, за допомогою якого вирівнювалося зображення по горизонталі або вертикалі.

hspace - відступ зліва і праворуч від зображення до навколишнього контенту (напр. тексту або сусідній картинки)

vspace - відступ зверху і знизу від картинки до контенту навколо.

border - задавав товщину рамки навколо зображення (за замовчуванням вона дорівнює нулю)

Зараз всі ці маніпуляції (і набагато більше) робляться за допомогою CSS, тому ми вирішили тут не забивати вам цим голову. Якщо все ж цікаво, як працювати з цими атрибутами - пишіть в коментарях, ми додамо цей пункт 🙂

Розміщення картинки в коді

Від того, де ми розташуємо наш тег <img> залежить те, як він буде відображатися в браузері.

Приклад №1 - перед параграфом:

Такі елементи як <p> і <h1> відносяться до блокових елементів. Вони завжди починаються з нового рядка і займають всю доступну ширину вікна браузера. Якщо спочатку розмістити <img>, а після нього блоковий елемент, наприклад параграф, то він буде перенесений на наступний рядок.

Приклад №2 - на початку параграфа

<Img> це вбудований елемент, він поміщається всередині блокового і не починає нову сходинку. В наведеному вище прикладі текст обтікає зображення, так як код <img> прописаний всередині <p>

Підписи до ілюстрацій

Щоб встановити або підписати фото на сторінці використовується тег <figure> (від англійського figure - малюнок). Цей тег вказує на те, що всередині нього міститься контент типу ілюстрацій, фотографій, діаграм і т.п.

Тег <figcaption> (заголовок малюнка) дозволяє додати підпис до зображення. Ось як це працює:

Зверніть увагу, що за замовчуванням у браузера існують деякі настройки стилю для тега <figure>, зокрема зліва і справа є відступи по 40 px.

Отже, ми з вами навчилися

• додавати зображення на сторінку: за допомогою тега <img>
• дізналися обов'язкові атрибути для цього тега: src для вказівки шляху і alt для опису картинки
• зрозуміли який формат краще для чого використовувати: jpeg для фотографій, png для логотипів і скріншотів, gif для анімації
• як краще задати зображенні розміри: за допомогою атрибута style з параметрами width і height
• розібралися як буде відображатися картинка в залежності від місця в коді: окремо, якщо перед блоковим елементом і з обтіканням, якщо всередині блокового елемента (наприклад <p>)

А щоб нам було з чим працювати, потрібно звідкись взяти ці зображення, при цьому не порушивши нічиїх авторських прав.

Значить, прийшов час бонусу 🙂

Список безкоштовних фотобанків

Перш, ніж почнемо, зверніть увагу, що кожен скріншот тут - це посилання на сайт. Як робити зображення у вигляді посилань, читайте в статті " посилання ".

pixabay.com

на pixabay ви знайдете 680 тис. безкоштовних зображень на будь-яку тематику, які поширюються за ліцензією Creative Commons CСО (CC Zero), тобто їх можна використовувати, поширювати, змінювати в будь-яких цілях, навіть комерційних.

freeimages.com

У фотобанку freeimages 390 тис. Безкоштовних фото і картинок. Тут складніше знайти крутий імідж, але теж трапляються непогані екземпляри. Порядком відволікає реклама платних фотобанків. Ми поставили цей ресурс на друге місце через кількість зображень, але по доброзичливості він буде мабуть на останньому в нашому рейтингу.

morguefile.com

У фотостоку morguefile більше 250 тис. безкоштовних фотографій, в основному високої якості. Можна завантажувати навіть без реєстрації. Доступний тільки англійською.

unsplash.com

на unsplash безліч стильних фотографій під ліцензією CC Zero. Можна качати без реєстрації. Цей фотобанк теж зрозуміє вас тільки по англійськи.

designerspics.com

сайт designerspics створений Індійським веб-дизайнером, який розуміє, як важко буває знайти якісне фото. Всі фотографії зняті особисто їм, і з ними можна робити що завгодно. Любить фотографувати їжу, робочий стіл, комп'ютери і всякі предмети. Пошук - тільки англійською.