Для зміни розмірів малюнка засобами HTML у тега <img> передбачені атрибути width (ширина) і height (висота). Як значення використовуються пікселі, при цьому аргументи повинні збігатися з фізичними розмірами картинки. Наприклад, на рис. 10.6 показано зображення, яке має розміри 100х111 пікселів.
Відповідно, HTML-код для розміщення даного малюнка, наведено в прикладі 10.4.
Приклад 10.4. Розміри малюнка
<!DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Розміри зображення </title> </head> <body> <p> <img src="images/ figure.jpg" width="100" height="111" alt="Вінні-Пух"> </p> </body> </html>
Якщо розміри зображення вказані явно, то браузер використовує їх для того, щоб відображати відповідну зображенні порожню область в процесі завантаження документа (рис. 10.7 ). В іншому випадку браузер чекає, коли малюнок завантажиться повністю, після чого змінює ширину і висоту картинки (рис. 10.8). При цьому може відбутися переформатування тексту, оскільки спочатку розмір картинки не відомий і автоматично він встановлюється невеликим.
Ширину і висоту зображення можна змінювати як в меншу, так і більшу сторону. Однак на швидкість завантаження малюнка це ніяк не впливає, оскільки розмір файлу залишається незмінним. Тому з обережністю зменшуйте зображення, тому що це може викликати здивування у читачів, чому такий маленький малюнок так довго вантажиться. А ось збільшення розмірів призводить до зворотного ефекту — розмір зображення великий, але файл щодо зображення аналогічного розміру завантажується швидше.
На рис. 10.9 наведено те ж зображення, що показано на рис. 10.6, але зі збільшеною в два рази шириною і висотою.
Код для такого малюнка залишиться практично незмінним і показаний в прикладі 10.5.
Приклад 10.5. Зміна розміру малюнка
<!DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Збільшення розмірів зображення </title> </head> <body> <p> <img src="images/ figure.jpg" width="200" height="222" alt="Вінні-Пух"> </p> </body> </html>
Така зміна розмірів називається ресемплірованіе, при цьому алгоритм браузера за своїми можливостями поступається графічним редакторам. Тому збільшувати таким способом зображення потрібно тільки в особливих випадках, а то занадто погіршується якість картинки. Краще скористатися якою-небудь графічної програмою. Винятком є малюнки, що містять прямокутні області. На рис. 10.10 наведено файл візерунка, який займає 54 байта і має вихідний розмір 8 на 8 пікселів, збільшених до 150 пікселів.
Браузери використовують два алгоритму для ресемплірованіе - Бікубічеський (дає згладжені межі і плавний тоновий діапазон кольорів) і по найближчих точках (зберігає початковий набір кольорів і різкість країв). Останні версії браузерів застосовують Бікубічеський алгоритм, а старі браузери, навпаки, алгоритм по найближчих точках.