В статье приведены кусочки кода. Полную версию можно взять тут — https://bitbucket.org/okiseleva/html-and-css-learn/src. Папки — «add_image_in_html» и «images»
Чтобы добавить в HTML код картинку, нужно указать элемент img с атрибутом src (путь к изображению).
Путь может быть относительный:
Или полный, по URL
Элемент img — пустой, ему не нужен закрывающий тег.
Результат для взгляда пользователя ровно такой же, как с принудительными размерами, но при этом грузится быстро.
Что же делать, если хочется большой вариант показать? Делать превью! Но об этом в следующий раз
См также:
Как сделать превью картинок — следующий раз настал!
PS — добавила статью в полный список моих конспектов лекций по HTML & CSS
Добавить картинку
Чтобы добавить в 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 — высота
А можно только один — второй система подгонит самостоятельно
Проблема в том, что браузер все равно сначала загрузит себе в память большую картинку, а потом уменьшает ее. Если интернет плохой, то увы, грузится «мелкая» картинка все равно будет долго
Если указать только один размер, вы оставите для браузера такой же объем работы, как если бы вообще не указывали ни ширины, ни высоты. Плохо! Лучше уменьшать
2. Картинка помельче
Беремфотошоп простейший Paint, вставляем картинку и нажимаем «Изменить размер»
Выбираем размер в пикселях и указываем длину 200
Вуаля! Картинка стала маленькая. Конечно, эффект прозрачности пропал, зато способ простейший. Хотите шашечки и красоту — изучайте фотошоп!
Указать можно оба размера:
width — длина
height — высота
<img src="../images/000000.png" width="200" height="149">
А можно только один — второй система подгонит самостоятельно
<img src="../images/000000.png" width="200">
Проблема в том, что браузер все равно сначала загрузит себе в память большую картинку, а потом уменьшает ее. Если интернет плохой, то увы, грузится «мелкая» картинка все равно будет долго
Если указать только один размер, вы оставите для браузера такой же объем работы, как если бы вообще не указывали ни ширины, ни высоты. Плохо! Лучше уменьшать
2. Картинка помельче
Берем
Исходная картинка в Paint большая
Выбираем размер в пикселях и указываем длину 200
Меняем размер...
Вуаля! Картинка стала маленькая. Конечно, эффект прозрачности пропал, зато способ простейший. Хотите шашечки и красоту — изучайте фотошоп!
Ух ты, малыш какой стал!
А в код вставляем как простую картинку
<img src="../images/000000.png">
Результат для взгляда пользователя ровно такой же, как с принудительными размерами, но при этом грузится быстро.
Что же делать, если хочется большой вариант показать? Делать превью! Но об этом в следующий раз
См также:
Как сделать превью картинок — следующий раз настал!
PS — добавила статью в полный список моих конспектов лекций по HTML & CSS
Здравствуйте вы не не поможете.Вы не подскажите как сделать как у вас когда картинка открывается под ней еще мальнькие возникают у многих есть такой код на блогпосте.Я тоже ищу этот код но мне пока не повезло( Может быть вы мне дадите скрипт или ссылку где его можно взять.Может быть конечно это он и есть,но пока мне не понятно ничего.Хотя мне кажется что вы пишите о каком то другом сервисе.
ОтветитьУдалитьДобрый день) Я умею только делать превью, см в это статье раздел "см также", это когда мелкая картинка, ты по ней тыкаешь и видишь большую.
УдалитьКак сделать как в блогпосте — сохраните себе страницу как HTML и изучите ее, вот вам и скрипт)