Ми не можемо підкреслити важливість мультимедіа, наприклад зображень, інфографіки та відео, у розробці. Однак розмір зображень впливає на загальну продуктивність програми та зручність її використання.
HTML (мова гіпертекстової розмітки) є найбільш використовуваною мовою для проектування та створення структури веб-сторінок. Як розробник, ви можете додавати зображення продукту, логотипи та іншу графіку до свого HTML-документа, щоб покращити взаємодію з користувачем і зробити його привабливішим.
Однак, якщо вам потрібна оптимальна робота програми, ви повинні змінити розмір і оптимізувати зображення. У цій статті я поясню важливість зміни розміру зображень, різні підходи до зміни розміру зображень у HTML і найкращі практики.
Яке значення має зміна розміру зображень у HTML?
Зміна розміру зображення — це збільшення або зменшення розміру зображення. Типові зображення зберігаються в різних формах, і ви можете отримати їх від свого фотографа, події чи дизайнера або завантажити з онлайн-джерел.
У вас може виникнути спокуса використовувати зображення в їх оригінальних форматах. Однак у більшості випадків це небажано. Ось деякі з причин, чому вам слід змінювати розмір зображень у вашому документі HTML:
- Швидкість завантаження сторінки: хоча відомо, що зображення покращують взаємодію з користувачем, наявність великих зображень може негативно вплинути на швидкість завантаження. Оптимізація таких зображень прискорить завантаження веб-сторінок.
- Зробіть свій веб-сайт адаптивним: типовий веб-сайт/програма отримує відвідування від людей, які використовують різні пристрої. Зміна розміру зображень робить веб-сторінку чутливою до мобільних пристроїв, комп’ютерів і планшетів.
- Використання пропускної спроможності: більшість веб-сайтів обмежують пропускну здатність, коли продають пакети хостингу власникам веб-сайтів. Коли ви оптимізуєте зображення, ви отримуєте більше місця для інших типів вмісту на своєму веб-сайті.
- Цілі SEO: швидкість завантаження сторінки є одним із факторів ранжирування, який враховують пошукові системи. Зміна розміру зображень покращує швидкість завантаження, що в кінцевому підсумку підвищує ваше SEO.
- Збільште обсяг пам’яті: розмір пам’яті є одним із факторів, який слід враховувати при виборі веб-хостингу. Завантаження великих зображень із високою роздільною здатністю може зайняти багато місця на серверах.
- Покращте взаємодію з користувачем: користувачам веб-сайтів не потрібно чекати багато років, перш ніж зображення завантажаться на веб-сторінку. Ви можете оптимізувати свої зображення, щоб вони відображалися одночасно з рештою вмісту.
Це різні способи зміни розміру зображень у HTML
Використання атрибутів HTML
Ми можемо створити просту програму, щоб продемонструвати, як змінювати розміри зображень. Я буду використовувати зображення з Pixabay у моєму веб-додатку. Я буду використовувати це зображення. Ви можете завантажити його та перемістити до свого проекту для легкої демонстрації.
Це мій HTML-код:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Your website description"> <meta name="keywords" content="your, keywords, here"> <meta name="author" content="Your Name"> <title>Resize HTML Images</title> </head> <body> <h1>My Cat</h1> <img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" > </body> </html>
Коли я візуалізую оригінальне зображення без зміни розміру, воно розташовується по всій веб-сторінці, і ви навіть не бачите зображення.
Я можу надати моєму зображенню кота висоту 175 і ширину 300.
Я зміню свій код у тегу наступним чином:
<img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" width="300" height="175">
Тепер ви бачите, що зображення видиме та оптимізоване.
Використання стилів CSS
Ми можемо створити окрему таблицю стилів замість вбудованого стилю, який ми застосували на кроці вище. Я створю таблицю стилів і назву її styles.css. Ми розмістимо тег у розділі
нашого документа HTML, щоб зв’язати таблицю стилів із документом HTML.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Your website description"> <meta name="keywords" content="your, keywords, here"> <meta name="author" content="Your Name"> <title>Resize HTML Images</title> <link rel="stylesheet" href="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/styles.css"> </head> <body> <h1>My Cat</h1> <img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" > </body> </html>
Ми можемо додати стилі до нашого зображення за допомогою аркуша styles.css. Це наш код:
img {
width:300px;
height:200px
}
Відтворене зображення виглядатиме так:
Ми використали селектор , щоб знайти наше зображення в документі HTML. Ми задали нашому зображенню ширину 300 пікселів і висоту 200 пікселів.
Використання відсотка
У попередньому прикладі ми використовували пікселі (px), щоб змінити розмір нашого зображення. Ми також можемо використовувати відсотки для оптимізації нашого іміджу. Наприклад, ми можемо встановити ширину та висоту нашого зображення на 65%.
Ми будемо використовувати наш попередній HTML-код. Однак видаліть файл styles.css і додайте цей код:
img {
width:65%;
height:65%
}
Коли ви візуалізуєте зображення, ви отримаєте наступне:
Зміна розміру зображень для адаптивного дизайну
Гарне зображення має реагувати на різні розміри екрана. Ви також можете оптимізувати зображення відповідно до різних розмірів екрана. Використовуючи той самий HTML-код, ми можемо додати це до нашого файлу styles.css:
img {
max-width: 100%;
height: auto;
}
Властивість max-width: 100% гарантує, що зображення ніколи не перевищуватиме ширину свого контейнера. Таким чином, зображення завжди зменшуватиметься пропорційно на менших екранах.
Властивість height: auto гарантує, що зображення зберігає своє співвідношення сторін під час збільшення та зменшення масштабу.
За співвідношенням сторін
У веб-дизайні/дизайні додатків співвідношення сторін — це пропорційне співвідношення між висотою та шириною. Збереження співвідношення сторін під час зміни розміру чи оптимізації зображень гарантує, що вони збережуть візуальну послідовність; зображення не спотворюються та реагують на різні розміри екрана.
Ми використаємо той самий HTML-код, щоб продемонструвати, як підтримувати співвідношення сторін під час зміни розміру наших зображень.
Додайте цей код до файлу styles.css:
img {
width: 300px;
height: auto;
}
Я використовував селектор «img», щоб знайти наше зображення в документі HTML. Ми встановили ширину 300 пікселів. Властивість height: auto дозволяє різним браузерам автоматично обчислювати висоту зображення, зберігаючи співвідношення сторін. Це гарантує, що зображення не розтягуються під час візуалізації на екранах різних розмірів.
Зміна розміру фонових зображень
Ви можете вставляти зображення в елементи, які слугуватимуть фоновими зображеннями. Зміна розміру фонового зображення гарантує, що воно поміститься у свій контейнер. Це приклад HTML-документа з абзацом і текстом:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Your website description"> <meta name="keywords" content="your, keywords, here"> <meta name="author" content="Your Name"> <title>Resize HTML Images</title> <!-- Link to external CSS file --> <link rel="stylesheet" href="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/styles.css"> </head> <body> <div class="container"> <div class="text"> <p>This is our cat image</p> </div> </div> </body> </html>
Тепер ми можемо додати фонове зображення через таблицю styles.css.
.container {
position: relative;
text-align: center;
color: #ffffff;
padding: 100px;
background-image: url("https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg");
background-position: center;
width: 75%;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: orangered;
}
Фонове зображення можна додати лише за допомогою CSS. Я створив контейнер із вирівняним по центру текстом і фоновим зображенням кота.
Ви можете використовувати різні інструменти для зміни розміру та оптимізації зображень. Деякі з цих інструментів пропонують лише функцію зміни розміру. Однак деякі з них також дозволять вам зберігати зображення та розміщувати їх у файлі HTML за допомогою URL-адреси.
Хмарний є хорошим прикладом інструменту, який змінює розмір зображення на сервері перед тим, як він доставить його користувачам. Цей інструмент призначений для автоматичної зміни розміру зображень без впливу на продуктивність сайту.
Найкращі методи зміни розміру зображень у HTML
Незважаючи на те, що ми обговорили кілька підходів до зміни розміру зображень у HTML, ви завжди повинні дотримуватися цих найкращих практик для отримання оптимальних результатів:
- Уникайте вбудованого стилю: у вас може виникнути спокуса швидко оформити зображення з документів HTML і перейти до наступної частини. Однак такий підхід може негативно вплинути на швидкість завантаження веб-сторінки. Використовуйте окрему таблицю стилів CSS і зробіть свій код легким для читання та підтримки.
- Використовуйте атрибути «width» і «height». Переконайтеся, що ви вказали ширину та висоту своїх зображень. Цей підхід спрямовує браузер до автоматичного розподілу простору для зображення під час завантаження решти вмісту.
- Використовуйте правильні формати зображень: зображення мають різні формати, наприклад JPEG, PNG і SVG. Наприклад, PNG є ідеальним форматом для прозорого зображення, тоді як SVG підходить для логотипів.
- Зробіть свої зображення адаптивними: можливо, ви ніколи не дізнаєтеся про природу пристроїв відвідувачів вашого веб-сайту для доступу до вашого вмісту. Завжди оптимізуйте зображення для різних розмірів екрана та забезпечуйте однорідність відображення.
- Оптимізуйте розміри файлів: високоякісні необроблені зображення можуть надходити у великі файли. Однак такі зображення можуть займати багато місця на вашому сервері та впливати на час завантаження сторінки. Ви можете зменшити розмір таких зображень за допомогою різних інструментів без зниження їх якості.
Висновок
Зміна розміру зображень у HTML покращує взаємодію з користувачем, робить веб-сторінку адаптивною та економить місце на сервері. Ми представили вам кілька підходів до зміни розміру зображень у HTML.
Незважаючи на те, що всі вони ефективні, я люблю використовувати властивості CSS в окремому файлі CSS для зміни розміру зображень. Однак іноді ви можете додати вбудований CSS, якщо ваш додаток невеликий і у вас є кілька зображень.
Ви також можете прочитати нашу статтю про ресурси CSS і глибше зрозуміти цю мову стилів.