вторник, 2 февраля 2016 г.

HTML. Как добавить картинку и уменьшить размер

В статье приведены кусочки кода. Полную версию можно взять тут — https://bitbucket.org/okiseleva/html-and-css-learn/src. Папки — «add_image_in_html» и «images»


Добавить картинку


Чтобы добавить в HTML код картинку, нужно указать элемент img с атрибутом src (путь к изображению).

Путь может быть относительный:

<img src="../images/000000.png">

Или полный, по URL

<img src="http://bugred.ru/img/bug.png">

Элемент img — пустой, ему не нужен закрывающий тег.


Уменьшить размер


В файле add_image_in_html\size-image-before.html в HTML-код просто вставлена картинка. Даблкликом открываем файл — упс, фиговенько выглядит.

Так выглядит большая картинка в браузере

Дело в том, что браузер подгружает картинку и сам определяет ее размеры. Исходная картинка большая по размерам, он так ее и отображает. Но нас это не устраивает, как быть? Есть два варианта — указать большой картинке принудительный размер или использовать картинку поменьше.

Так намного лучше!


1. Принудительные размеры

Указать можно оба размера:

width — длина
height — высота

<img src="../images/000000.png" width="200" height="149">

А можно только один — второй система подгонит самостоятельно

<img src="../images/000000.png" width="200">

Проблема в том, что браузер все равно сначала загрузит себе в память большую картинку, а потом уменьшает ее. Если интернет плохой, то увы, грузится «мелкая» картинка все равно будет долго

Если указать только один размер, вы оставите для браузера такой же объем работы, как если бы вообще не указывали ни ширины, ни высоты. Плохо! Лучше уменьшать


2. Картинка помельче

Берем фотошоп простейший Paint, вставляем картинку и нажимаем «Изменить размер»

Исходная картинка в Paint большая

Выбираем размер в пикселях и указываем длину 200

Меняем размер...

Вуаля! Картинка стала маленькая. Конечно, эффект прозрачности пропал, зато способ простейший. Хотите шашечки и красоту — изучайте фотошоп!

Ух ты, малыш какой стал!

А в код вставляем как простую картинку
<img src="../images/000000.png">

Результат для взгляда пользователя ровно такой же, как с принудительными размерами, но при этом грузится быстро.

Что же делать, если хочется большой вариант показать? Делать превью! Но об этом в следующий раз Smile :)

См также:
Как сделать превью картинок — следующий раз настал!

PS — добавила статью в полный список моих конспектов лекций по HTML & CSS

2 комментария:

  1. Здравствуйте вы не не поможете.Вы не подскажите как сделать как у вас когда картинка открывается под ней еще мальнькие возникают у многих есть такой код на блогпосте.Я тоже ищу этот код но мне пока не повезло( Может быть вы мне дадите скрипт или ссылку где его можно взять.Может быть конечно это он и есть,но пока мне не понятно ничего.Хотя мне кажется что вы пишите о каком то другом сервисе.

    ОтветитьУдалить
    Ответы
    1. Добрый день) Я умею только делать превью, см в это статье раздел "см также", это когда мелкая картинка, ты по ней тыкаешь и видишь большую.

      Как сделать как в блогпосте — сохраните себе страницу как HTML и изучите ее, вот вам и скрипт)

      Удалить