Зображення – складові практично будь-якого сайту, тому без зміни розміру не обійтись. Змінювати розмір картинки можна двома способами: у графічному редакторі або програмно в коді html на css.
Якщо в коді css на html не задати розмір зображення, його висота і ширина на сайті будуть такими ж у пікселях, як у вихідного файлу. Тобто ви можете змінити розмір зображення без css і html, використовуючи лише графічний редактор і воно автоматично буде змінюватися на сайті, якщо не вказувати його розмір. Але є випадки, коли необхідно програмно змінювати розмір картинки css на html.
1. Зміна картинки у графічному редакторі
Змінювати розмір зображення ви можете в будь-якому графічному редакторі (photoshop, gimp, xnview) і воно автоматично змінюватиметься на сайті відповідно до оригінальних розмірів.
Плюси методу:
Картинка вантажиться швидше, оскільки не потрібно завантажувати зайві дані (пікселі), які будуть потім стиснуті програмно.
Мінуси:
Графічні редактори неякісно стискають картинки менше 200 пікселів за шириною та висотою.
Завжди, коли це можливо і доцільно намагайтеся змінювати розмір саме в графічному редакторі, щоб зображення швидше завантажувалися, ніж при програмній зміні. Різниця у швидкості може становити десятки разів.
2. Зміна картинки в коді CSS на сайті
Плюси:
Швидше та зручніше задати розмір. Цей спосіб зменшення зображення зазвичай застосовується для зручності. Наприклад, коли в однієї картинки може бути багато різних розмірів - часто зручніше змінювати значення в одній і тій же програмно, ніж закачувати всі варіанти форматів одного зображення, редаговані в графічному редакторі.
Якісно стискаються невеликі картинки, менше 200 пікселів за висотою чи шириною на відміну графічних редакторів. Якщо ви хочете, щоб на сайті розмір зображення був менше 200 пікселів, то краще, щоб вихідний розмір був більшим на 30-50% (260-300 пікселів), щоб зберегти хорошу якість при зменшенні.
При цьому різниця у швидкості завантаження сайту відчуватися не буде, тому що невеликі зображення займають дуже мало місця і при збільшенні їх розміру на 30% ви не помітите змін. Але різницю як помітите.
Мінуси:
Картинки, стислі програмно, довше завантажуються, оскільки зміна розміру відбувається тільки після завантаження оригінальної версії. Тому якщо розмір картинки більше 200 пікселів за шириною або висотою, то краще стискати в графічному редакторі, щоб сайт працював швидше.
Як змінити розмір картинки в html за допомогою css
Щоб змінити розмір зображення в html засобами css використовуються властивості width(ширина) та height(висота)всередині атрибут стиль. Ви можете написати тільки width або height , і невказане значення автоматично зміниться зі збереженням пропорцій картинки. Наприклад, вказавши тільки ширину зображення за допомогою width, його висота зміниться автоматично, зберігши пропорції. І навпаки, при вказівці тільки висоти, його ширина також автоматично зміниться, зберігши пропорції картинки.
Приклад коду без вказівки розмірів зображення
Результат у браузері
Код сторінки
Приклад коду зі зміною розміру зображення в.css
Результат у браузері
Код сторінки
style="width:150px; " >
В обох прикладах, показаних вище використана та сама картинка з розміром 300x184px(ширина і висота). В 1 прикладі картинка відобразилася в браузері без змін з оригінальним розміром 300x184px, тому що в css не вказувалися ширина і висота. А в 2 прикладі картинка відобразилася в браузері зменшена в 2 рази тому, що була вказана ширина 150px, висота відповідно автоматично змінилася до 92 px. Як ви бачите, властивість height, можна не вказувати взагалі тому, що воно автоматично змінюється пропорційно width.
Якщо ви вкажете обидва параметри: width(ширина), height(висота)і вони не відповідатимуть пропорціям, то картинка матиме саме такий розмір, але в стислому чи розтягнутому вигляді, залежно від значень.
Чому небажано збільшувати картинки
Важливо: Збільшення розмірів зображення супроводжується втратою якості. При зміні будь-яким способом важливо ставити значення менше, ніж у оригінальному зображенні, тобто лише зменшувати.
Якщо задати розмір пікселів більше, ніж у вихідного зображення, то якість погіршиться. І втрата якості буде чітко видно, тому що комп'ютер не може додати нові пікселі, він може тільки збільшити існуючі. Чим більше збільшення картинки від вихідного значення, тим гірша її якість і чіткіше видно квадратні пікселі.
Розмір фотографії буде змінено з урахуванням зазначеного розміру в сантиметрах (міліметрах, дюймах), а також з урахуванням зазначеного розміру DPI, відповідно до стандартів паперового друку. Розміри см, мм і дюймах можна вказувати з точністю до тисячних, наприклад, замість формату 15x10 можна виставити 15,201x10,203 см.
Таблиця зі стандартними розмірами фотографій при вертикальному (портретному) положенні:
| Формат фото в сантиметрах (cm) | Розмір у міліметрах (mm) | Розмір у пікселях (для друку 300 dpi) |
Співвідношення сторін (При альбомній орієнтації) |
| 3х4 (після ручного обрізання) | 30x40 | 354x472 | 4:3 (1.33) |
| 3,5х4,5 (після ручного обрізання) | 35x45 | 413x531 | 4:3 (1.33) |
| 9x13 | 89х127 | 1063x1535 | 10:7 (1.43) |
| 10x15 | 102х152 | 1181x1772 | 3:2 (1.5) |
| 13x18 | 127х178 | 1535x2126 | 7:5 (1.4) |
| 15x20(≈A5) | 152х203 | 1772x2362 | 4:3 (1.33) |
| 15x21 | 152х216 | 1772x2480 | 4:3 (1.33) |
| 18x24 | 178x240 | 2126x2835 | 19:14 (1.36) |
| 20x25 | 203x254 | 2362x2953 | 5:4 (1.25) |
| 20x30(≈A4) | 203х305 | 2362x3543 | 3:2 (1.5) |
| 30x40 | 305x406 | 3543x4724 | 4:3 (1.33) |
| 30x45 | 305x457 | 3543x5315 | 3:2 (1.5) |
Стандартний розмір паперового листа формату A4- 21×29,7 см або 2480×3508 пікселів при 300 dpi. Розміри інших форматів аркушів можна побачити на сторінці у Вікіпедії, але тільки не забувайте, що там перераховані розміри в міліметрах та дюймах, тобто. у налаштуваннях на цій сторінці потрібно вибрати відповідну величину.
Якщо потрібно змінити розмір фотографії без урахування DPI (точок на дюйм), тобто лише дотримуючись пропорції зазначеного формату, то для цього потрібно встановити параметр "Розмір DPI" на "0" в налаштуваннях.
Вихідне зображення не змінюється. Вам буде надана інша оброблена картинка.
Перш ніж відповісти на запитання « як вставити картинку в HTML?», слід зазначити, що перевантажувати веб-сторінки величезною кількістю графічного матеріалу не варто, оскільки це покращить візуальне сприйняття ресурсу користувачем, але й збільшить час завантаження сторінки.
При створенні веб-сайтів найчастіше використовують графічні формати PNG, GIF і JPEG, а для дизайнерських робіт із зображеннями - графічний редактор Adobe Photoshop, що має багаті можливості для стиснення та зміни розміру зображень без втрати якості, що є неймовірно важливим для веб-розробки.
Як вставити зображення в HTML?
Для того, щоб вставити зображення на HTML-сторінку, використовується одиночний простий тег:
,
де xxx – адреса зображення. У тому випадку, якщо зображення знаходиться в одній директорії зі сторінкою, тег буде виглядати як:
Однак швидкісний і стабільний інтернет дістався ще не всіх куточків земної кулі, і буває так, що зображення на веб-сайті просто не завантажується. Для таких випадків є поняття альтернативного тексту.
Він показується на місці зображення в момент його недоступності, завантаження або в режимі роботи браузера без картинок. Додається він за допомогою атрибуту alt тега .
Приклад додавання альтернативного тексту до графічного файлу:
Призначення розмірів зображення в HTML
Щоб змінити розміри відображення графічного файлу, використовують теги height і width , де height - висота, а width - ширина, що вимірюються в пікселях.
У разі використання даних атрибутів браузер спочатку виділяє місце для графічного контенту, готує загальний макет сторінки, відображає текст, після чого завантажує саму картинку.
Малюнок поміщається у прямокутник із заданими розмірами, а в тому випадку, якщо параметри менші або більші за вихідні, картинка розтягується або стискається.
Якщо атрибути height та width не використовуються, браузер завантажує зображення одразу, затримуючи відображення тексту та інших елементів сторінки.
Дані параметри можна вказати як у пікселях (розмір зображення постійний і не залежить від роздільної здатності екрана користувача), так і у відсотках (розмір зображення залежить від роздільної здатності екрана).
Наприклад:
Слід пам'ятати, що в момент, коли ви змінюєте вихідний розмір зображення, необхідно зберігати його пропорції.
Для цього достатньо вказати значення лише одного з параметрів ( ширини чи висоти), а значення другого браузер обчислить автоматично.
Розташування картинки в HTML
Як і до багатьох тегів HTML, до застосовуємо атрибут align , який виконує вирівнювання зображення:
- картинка розташовується вище за текст;
- картинка розташовується нижче за текст;
- картинка розташовується зліва тексту;
- Картинка розташовується праворуч від тексту.
Картинка-посилання
Робиться це так:
Як бачите, графічна вставка може бути посиланням і при натисканні переадресовувати на будь-яку адресу, записану в повному або скороченому варіанті.
Як зробити картинку фоном в HTML?
Зображення можна не тільки вставляти на сторінку як видимий об'єкт, але й зробити фоновим. Для визначення картинки як фону необхідно в тезі прописати атрибут background=”xxx” , де xxx - адреса картинки, вказана таким самим способом, як у прикладах вище.
Наприклад задамо таку текстурну картинку в ролі фонової:
Збережіть зображення в папці із заготовленою заздалегідь сторінкою та пропишіть наступні рядки:
Фон з текстом.
Фонове зображення на сторінці задане.
Для зміни розмірів малюнку засобами HTML у тега передбачені атрибути width (ширина) та height (висота). Як значення використовуються пікселі, у своїй аргументи повинні збігатися з фізичними розмірами картинки. Наприклад, на рис. 10.6 показано зображення, яке має розміри 100х111 пікселів.
Рис. 10.6. Картинка вихідного розміру
Відповідно, HTML-код для розміщення даного малюнка наведено в прикладі 10.4.
Приклад 10.4. Розміри малюнка
Якщо розміри зображення вказані явно, то браузер використовує їх для того, щоб відображати порожню область відповідної картинки в процесі завантаження документа (мал. 10.7). В іншому випадку браузер чекає, коли малюнок завантажиться повністю, після чого змінює ширину та висоту картинки (рис. 10.8). При цьому може статися переформатування тексту, оскільки спочатку розмір зображення не відомий і автоматично він встановлюється невеликим.
Рис. 10.7. Розміри зображення не вказані і вона ще не завантажилася
Рис. 10.8. Зображення завантажено, текст переформатовано
Ширину та висоту зображення можна змінювати як у менший, так і більший бік. Однак на швидкість завантаження малюнка це не впливає, оскільки розмір файлу залишається незмінним. Тому обережно зменшуйте зображення, т.к. це може викликати подив у читачів, чому такий маленький малюнок так довго вантажиться. А ось збільшення розмірів призводить до зворотного ефекту – розмір зображення великий, але файл щодо зображення аналогічного розміру завантажується швидше.
На рис. 10.9 наведено те саме зображення, що показано на рис. 10.6, але зі збільшеною вдвічі шириною та висотою.
Рис. 10.9. Вигляд зображення, збільшеного в браузері
Код такого малюнка залишиться практично незмінним і показаний у прикладі 10.5.
Приклад 10.5. Зміна розміру малюнка
Така зміна розмірів називається ресемплюванням, при цьому алгоритм браузера за своїми можливостями поступається графічним редакторам. Тому збільшувати таким способом зображення потрібно лише в особливих випадках, бо надто погіршується якість картинки. Краще скористатися якоюсь графічною програмою. Винятком є малюнки, які мають прямокутні області. На рис. 10.10 наведено файл візерунка, який займає 54 байти і має вихідний розмір 8 на 8 пікселів, збільшених до 150 пікселів.
Рис. 10.10. Збільшене зображення
Браузери використовують два алгоритми для ресемплювання - бікубічний (дає згладжені межі та плавний тоновий діапазон кольорів) та по найближчих точках (зберігає початковий набір кольорів та різкість країв). Останні версії браузерів застосовують бікубічний алгоритм, а старі браузери, навпаки, алгоритм у найближчих точках.
Інструкція
Спочатку спробуйте знайти зображення за допомогою пошукових систем. Введіть запит і виберіть вкладку з налаштуваннями пошуку. У Google, наприклад, це кнопка «Інструменти пошуку», а Яндекс має іконку із зображенням повзунків. Після цього потрібно вибрати пункт «Розмір» і вказати точні значення. Або, наприклад, якщо потрібна фотографія з гарною роздільною здатністю, виділити «Великі».
Якщо картинки з потрібним розміром немає, її можна підігнати під рамки самостійно. Тут є шляхи. Перший полягає в тому, що ви спочатку створюєте документ із потрібним розміром, а потім змінюєте картинку. Другий протилежний – відкриваєте картинку та змінюєте розмір. Різниці, по суті, немає: все залежить від ваших уподобань та цілей. Приклади будуть розглядатися в програмі Adobe Photoshop, але ви можете використовувати інші графічні редактори.
Перший метод. Натисніть «Файл» - «Створити…» або комбінацію клавіш Ctrl+N. Перед вами з'явиться вікно з налаштуваннями. Вкажіть там параметри ширини, висоти та необхідної колірної роздільної здатності. Потім відкрийте зображення, що сподобалося в браузері, натисніть праву кнопку миші і виберіть пункт «Копіювати картинку». Потім поверніться до програми та натисніть комбінацію Ctrl+V.
Зображення з'явиться у вікні графічного редактора. Потім натисніть "Редагування" - "Вільне трансформування" або комбінацію Ctrl+T. З'явиться ключові точки, за допомогою яких можна підігнати картинку під величину робочого вікна. Як тільки ви отримаєте бажаний результат (до речі, можна виходити за межі робочої зони), натисніть "Файл" - "Зберегти як…" або комбінацію клавіш Ctrl+S.
Другий спосіб. Вам необхідно спочатку на комп'ютер, потім натиснути "Файл" - "Відкрити..." (або комбінацію Ctrl+O) та вибрати потрібне зображення. Після цього виберіть «Зображення» - «Розмір зображення…» або натисніть Alt+Ctrl+I. Зніміть галочку «Зберігати пропорції» та вкажіть потрібний розмір. Потім натисніть OK.
