Изображения в html

Как сжать фото без потери качества для соцсетей

Залили новое фото в Инстаграм или ВКонтакте, но она изменила цвета или потеряла детализацию? Эта проблема знакома многим. Дело в том, что эти соцсети сжимают ваши фотографии по своим параметрам, так как хранить огромные файлы на своих серверах они не хотят, да и загружаться они будут медленнее.

Чтобы избежать неприятного результата автоматического сжатия, лучше сделать коррекцию фото самостоятельно.

Canva

Если вы не хотите вникать в нюансы обработки фотографий, а ищите универсальное решение, то для этого есть прекрасный сервис – Canva. Для работы в нем вам нужно будет зарегистрироваться, также там есть платные инструменты. Но уменьшение размера фото можно сделать бесплатно и быстро. К тому же сервис доступен не только для компьютеров, но и для телефонов через одноименное приложение.

1. На главной странице кликните «Создать дизайн» (для мобильных приложений кнопка «+».
2. Сервис сразу выдаст подсказки, какой размер нужен для того или иного случая. Но можно выбрать пункт «Настраиваемый размер» и вбить нужные значения.
3. В открывшемся окне на панели кликните пиктограмму «Загрузки», а затем «Загрузить медиа». Здесь вы сможете загрузить свое изображение.
4. Кликните на загруженное изображение, и оно появится на рабочем столе. Вы можете его растянуть, чтобы в рамке настраиваемого размера осталась только нужная вам часть картинки.
5. Нажмите кнопку «Скачать», выберите формат сохранения (по умолчанию стоит .png) и еще раз подтвердите «Скачать».

PhotoShop

Фотошоп поможет вам не только сжать картинку в формате JPEG до нужного размера, но и оптимизировать режим и профиль фотографии.

1. Загрузите файл в PhotoShop. Вы можете просто перетянуть картинку на рабочее поле или кликнуть «Файл» — «Открыть», а затем выбрать редактируемую картинку.
2. Измените размер фото. Для этого щелкните «Изображение» — «Размер изображения…».

В появившемся диалоговом окне выберите нужный размер готового файла, а также нужный вариант интерполяции. В нашем случае, когда мы уменьшаем фото и не хотим потерять его качество, нужно выбрать вариант «Бикубическая (с уменьшением)»

Измените цветовой профиль. Зайдите в «Редактирование» — «Назначить профиль». Для соцсетей отлично подойдет профиль «sRGB IEK61966-2.1». Если не поменять этот профиль, то цвета на фото в соцсети будут смотреться иначе.
Отредактируйте битность. Откройте на вкладке «Изображение» — «Режим», далее проверьте, чтобы галочки стояли напротив значения RGB и 8 bit. Битность отвечает за глубину цвета, а значит чем больше битность, тем картинка будет содержать больше оттенков. Но соцсети снизят битность без заботы об изображении, у вас же будет возможность исправить недочеты.
Сохраните изображение. Для этого зажмите горячие клавиши CTRL + S, а затем отредактируйте «вес» файла

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

Как подготовить размер картинки в photoshop

Главным параметром здесь является соотношение сторон и в программе выставить их проще всего.

Возьмем инструмент «Прямоугольная область», в стилях выставим «Заданные пропорции», затем укажем ширину – 3, высоту – 2 и готово.

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

размер 1600х1067 px

Такие пропорции подойдут для большинства изображений, используемых на сайтах.

Следующим этапом устанавливаем необходимую ширину и высоту. Ставим ширину в 1600 px. При данном соотношении сторон высота подставится автоматически.

Осталось разобраться с весом изображения. Чаще всего я сохраняю с параметрами, указанными на рисунке.

Сохранить для web

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

Это и есть оптимальный размер изображения для сайта, а главное правильные пропорции.

Имитация растянутого фонового изображения на меньшем пространстве

Можно применить похожую технику, чтобы имитировать растянутое фоновое изображение на HTML div background image или другом элементе веб-страницы. Это сложнее, так как нужно либо использовать абсолютное позиционирование.

1. Разместите на странице изображение, которое будет использовано как фон.
2. В таблице стилей установите ширину и высоту изображения. Заметьте, что можно подставить проценты, но мне легче использовать значения длины.

img#bg {
  width: 20em;
  height: 30em;}

1. Поместите содержимое в div с id «content», как мы делали раньше.
2. Задайте div с содержимым ширину и высоту, соответствующую размерам фонового изображения:

div#content {
  width: 20em;
  height: 30em;}

После этого разместите содержимое на той же высоте, что и фоновое изображение. Не забудьте добавить для содержимого z-index, равный 1.

#content {
  position: relative;
  top: -30em;
  z-index: 1;
  width: 20em;
  height: 30em;}

Свойства background-size и background image HTML широко поддерживаются браузерами, и этот подход, скорее всего, можно расценивать как продукт прошедшей эпохи. Если вы захотите использовать такой подход, обязательно проверьте его в как можно большем количестве браузеров. И если содержимое поменяет размер, нужно будет изменить размеры контейнера и фонового изображения.

Список существующих атрибутов тега в HTML

Все атрибуты у изображений прописываются через пробел. А вот собственно и сам их перечень.

src – содержит ссылку до изображения, может быть как абсолютной (ссылка до файла, который находится на другом сайте), так и относительной (ссылка до файла, который находится на вашем сайте). Допустимые форматы: JPEG (JPG), PNG, GIF, BMP, ICO, APNG, SVG и Base64. Пример использования с абсолютным адресом изображения:

Пример использования с относительным адресом изображения:

alt – содержит текст – подсказку у не появившегося/отсутствующего изображения. Пример использования:

align – задает выравнивание изображения относительно рядом находящегося текста (создание обтекания изображения текстом). Допустимые значения: top, bottom, middle, left и right. Пример использования:

Атрибут не поддерживается в HTML5.

border – задает ширину границы (рамки) вокруг изображения. Допустимые значения: px, % и другие величины. Пример использования:

Атрибут не поддерживается в HTML5.

height – задает высоту изображения. Допустимые значения: px, % и другие величины. Пример использования:

width – задает ширину изображения. Допустимые значения: px, % и другие величины. Пример использования:

hspace – задает горизонтальный (слева и справа) отступ у изображения. Допустимые значения: px, % и другие величины. Пример использования:

Атрибут не поддерживается в HTML5.

vspace – задает вертикальный (сверху и снизу) отступ у изображения. Допустимые значения: px, % и другие величины. Пример использования:

Атрибут не поддерживается в HTML5.

longdesc – содержит адрес до расширенного описания изображения. Допустимые значения: TXT-файл. Адрес, как и у атрибута src, может быть абсолютным или относительным. Пример использования:

crossorigin – атрибут, позволяющий осуществить вставку изображения с другого сайта через кросс-доменный запроса (CORS). Допустимые значения: anonymous (анонимный запрос без передачи учетных данных) и use-credentials (запрос с передачей учетных данных). Пример использования:

Атрибут поддерживается только в HTML5.

srcset – задает список файлов, которые будут отображаться в зависимости от ширины или плотности экрана. Допустимые значения: Nw (где N – любое целое положительное число) и Kx (где K – положительное десятичное число). Пример использования:

Атрибут не поддерживается в браузерах Android и Internet Explorer.

sizes – задает размер для изображений, указанных в атрибуте srcset. Допустимые значения: Nex, Nrem, Nem, Nvmin, Nch, Nvh, Nvw, Nvmax, Nin, Nq, Nmm, Npc, Ncm, Npt и Npx, где N – положительное число. Пример использования:

Принцип действия примера такой: если разрешение экрана меньше 600 px, то задаем ширину изображений, равную 300 px, и наоборот, если больше 600 px – фиксируем ширину изображений на 600 px.

Атрибут, как и srcset, не поддерживается в браузерах Android и Internet Explorer.

usemap – связывает изображение с картой, которая задается с помощью тега <map>. Допустимые значения: #name (где name – значение атрибута name карты) и #id (где id – значение атрибута id карты). Пример использования:

Нельзя создавать связь, если карта (<map>) обернута в ссылку (<a>) или кнопку (<button>).

ismap – связывает изображение с некоторой областью серверной карты. При нажатии на такую картинку, считываются координаты нажатия от левого верхнего угла и посылаются запросом на указанный в ссылке адрес. Для работы атрибута, изображение должно быть обернуто в ссылку (<a>). Пример использования:

в HTML, и так:

в XHTML.

Помимо этого, <map> поддерживает глобальные атрибуты class и id, а также напрямую встраивание стилей:

По желанию, большая часть персональных атрибутов <map> может быть заменена соответствующими стилями.

На телефонах iPhone или Android с помощью приложения «Размер Фото» («Image Size»)

Приложение «Размер Фото» («Image Size») универсально подходит и для Android, и для iPhone. У этого приложения есть платные функции, но, если вы хотите только уменьшить изображение в формате .jpeg, то бесплатной версии вам хватит.

1. Скачайте «Размер Фото» из магазина приложений на вашем телефоне.
2. Разрешите приложению доступ к вашей «Галерее», а при необходимости и доступ к фотоаппарату.
3. Кликните на пиктограмму в верхнем левом углу, чтобы открыть файлы на телефоне, или кликните на следующую пиктограмму, чтобы открыть фотоаппарат и сделать фото.
4. Отредактируйте фото. Здесь можно менять соотношения сторон, обрезать фотографию, поворачивать картинки вправо или влево, а также подбирать необходимый размер под заданную ширину. Внизу под картинкой приложение отображает сколько будет «весить» фотография после коррекции.
5. Готовое изображение можно сохранить в память телефона, поделиться им в соцсетях или мессенджерах, а также отправить на принтер для печати.

Как изменить масштаб экрана на компьютере средствами Windows

Проще всего воспользоваться встроенными в ОС инструментами.

С помощью клавиатуры

С увеличением спроса на лэптопы и ноутбуки потребность в мышке отпадает. Вся работа осуществляется через тачпад и клавиатуру. Чтобы уменьшить масштаб экрана нэтбука, следует воспользоваться комбинацией клавиш Ctrl и «минус». Соответственно, чтобы увеличить масштаб, следует нажать комбинацию Ctrl и «плюс». Чтобы сделать 100% масштаб, можно использовать комбинацию «Ctrl» + «». Эти же горячие клавиши работают в нескольких программах, в частности Photoshop.

Клавиатура + мышка

Проще всего изменить масштаб страницы, используя клавиатуру и мышку. Однако, такое масштабирование доступно только в окне программы, проводнике или любом другом отдельном элементе. Чтобы изменить размер ярлыков на рабочем столе, папок, достаточно зажать кнопку Ctrl на клавиатуре и прокрутить колесо мыши вверх или вниз.

Параметры экрана (персонализация)

Чтобы изменить масштаб экрана на компьютере с Виндовс 7, 8, необходимо нажать ПКМ на свободном пространстве. В новом меню выбрать «Разрешение экрана».

Или открыть «Панель управления Windows». И из списка опций выбрать «экран».

Далее «Настройка параметров экрана». В окне настроек отобразится текущее разрешение. Если щелкнуть на него ЛКМ станет доступен вертикальный ползунок. Чтобы уменьшить, увеличить масштаб экрана необходимо перетащить его вниз или вверх. Разрешение по умолчанию помечено, как «рекомендуется». Это оптимальные и самые высокие значения пикселей.

Чтобы настройки вступили в силу и изменился масштаб страницы, нужно нажать кнопку ОК.

При работе на ОС WindowsXP нужно обязательно поставить галочку «Использовать масштабы», чтобы не было проблем с отображением текста в старых программах.

В ОС Windows 7, 8 имеется список готовых вариантов масштабов. Можно применить любой из них. Для этого в настройках экрана кликните «Дополнительные параметры», перейдите на вкладку «Адаптер» и выберите «Список всех режимов». Параметры включают три элемента: разрешение, глубину цвета, частоту обновления. Остается выбрать один из них и нажать кнопку ОК.

В Windows 10 масштаб страницы меняется иначе. Сначала нужно попасть в меню «Параметры экрана» (клик ПКМ по пустому месту рабочего стола).

В следующем окне нажать на ссылку «Дополнительные параметры экрана».

Указать приемлемое разрешение и нажать кнопку «Применить», а затем «Сохранить изменения».

Вот как быстро увеличить или уменьшить масштаб экрана.

Другие способы

В окне «Настройки экрана» можно изменять размер текста. Пользователю достаточно указать элемент (значки, название панелей, меню сообщений), величину шрифта и нажать кнопку «Применить». В редакции ОС 8.1 для доступа к меню следует отметить флажком опцию выбора масштаба.

Изменять размер текста в ОС Виндовс 7 и 8 можно через реестр. Соответствующее меню расположено в разделе «Desktop», в параметре «LogPixels». В новом окне указать систему счисления «десятичная» и задать значение в пикселях.

Далее представлена таблица соотношений пикселей к масштабу.

Масштаб в процентах	Значение в пикселях
Мелкий 100%	96
Средний 125%	120
Большой 150%	144
Огромный 200%	192
Пользовательский 250%	240
Пользовательский 300%	288
Пользовательский 400%	384

Вот как быстро изменить параметры отображения информации на экране.

Всплывающий текст-подсказка у изображений в HTML

Как и у многих других HTML-тегов, у тега <IMG> есть атрибут title, выводящий текстовую подсказку при наведении курсора мыши на изображение.

title=»Любой текст.»

Примера не будет, так как тут все элементарно. Главное не путайте title и alt. Содержимое alt отображается, если в браузере отключен показ картинок и, в отличие от title, он является обязательным атрибутом.

Иногда у меня возникает чувство, что я пишу учебник по CSS, а не по HTML — так часто мы используем style. Но что делать, если столько тегов или их атрибутов стали устаревшими в современном HTML. Ну вам-то это только на пользу — не будете, как я, переучиваться.

Домашнее задание.

1. В папке, где находится ваша страничка, создайте подпапку с названием image и пусть все ваши рабочие изображения хранятся там.
2. Создайте первый параграф и укажите там одно изображение, но три раза: в натуральный размер, в два раза больше, увеличьте только ширину.
3. Во втором параграфе сделайте рисунок среди текста, пусть его боковые поля будут по 30px и имеется всплывающая подсказка.
4. Ниже создайте изображение и пусть его левое и нижнее поля будут равны 20px
5. Еще ниже напишите два параграфа и сделайте так, чтобы текст первого обтекал указанное выше изображение слева.
6. В конце сделайте так, чтобы один из рисунков примеров данного урока загрузился на вашу страницу прямо с сайта Сеодон. Как? Подумайте.

Якоря — создаем закладки

←  →

Изображения для фонов

Как вставить изображение в HTML?

Для того чтобы вставить изображение на HTML-страницу, используется одиночный простой тег:

,

где xxx
— адрес изображения. В том случае, если картинка находится в одной директории со страницей, тег будет выглядеть как:

Однако скоростной и стабильный интернет добрался ещё не во все уголки земного шара, и бывает так, что изображение на веб-сайте попросту не загружается. Для таких случаев существует понятие альтернативного текста.

Он показывается на месте картинки в момент его недоступности, загрузки или в режиме работы браузера «без картинок
». Добавляется он с помощью атрибута alt тега .

Пример добавления альтернативного текста к графическому файлу:

Альтернативный текст

Назначение размеров картинки в HTML

Для того чтобы изменить размеры отображения графического файла, используют теги height
и width
, где height
— высота, а width
— ширина, измеряемые в пикселях.

При использовании данных атрибутов браузер сначала выделяет место для графического контента, подготавливает общий макет страницы, отображает текст, после чего загружает саму картинку.

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

Если атрибуты height
и width
не используются, браузер загружает изображение сразу, задерживая отображение текста и прочих элементов страницы.

Данные параметры можно указать как в пикселях (размер картинки постоянен и не зависит от разрешения экрана пользователя), так и в процентах (размер картинки зависит от разрешения экрана).

Например:

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

Для этого достаточно указать значение только одного из параметров (ширины или высоты
), а значение второго браузер вычислит в автоматическом режиме.

Расположение картинки в HTML

Как и ко многим тегам HTML, к применим атрибут align
, который выполняет выравнивание изображения:

— картинка располагается выше текста;

— картинка располагается ниже текста;

— картинка располагается слева от текста;

— картинка располагается справа от текста.

Картинка-ссылка

Делается это следующим образом:

Как видите, графическая вставка может быть ссылкой и при клике переадресовывать на любой адрес, записанный в полном или сокращённом варианте.

Как можно сделать картинку фоном в HTML?

Изображение можно не только вставлять на страницу в качестве видимого объекта, но и сделать фоновым. Для определения картинки как фона необходимо в теге прописать атрибут background=”xxx”
, где xxx
— адрес картинки, указанный таким же способом, как в примерах выше.

Для примера зададим такую текстурную картинку в роли фоновой:

Сохраните изображение в папке с заготовленной заранее страницей и пропишите следующие строки:

Страница с фоновой картинкой

Фоновая картинка на странице задана.

Выравнивание изображений

В старых версиях HTML для выравнивания изображений у тега <IMG> имелся уже известный вам атрибут align, но в современном HTML его нет, поэтому будем использовать тоже уже знакомый вам, и, надеюсь, ставший родным style.

Вы уже сталкивались с выравниванием в уроке о Выравнивании содержимого тегов, но как вы знаете, его нельзя применять к встроенным тегам, таким, как <IMG>, да и никакого эффекта это не даст. Поэтому и значения атрибута style будут совершенно другие, предназначенные для выравнивания не содержимого, а HTML-элемента целиком:

style=»float:left» — прижимает изображение к левой стороне блока, в котором находится изображение, а весь текст обтекает его справа.

style=»float:right» — прижимает изображение к правой стороне блока, а текст обтекает его слева.

Пример выравнивания изображения по левому краю.

Результат в браузере

Первый параграф.

Текст перед картинкой. После картинки.

Последний параграф.

Как видите, первый параграф-блок выравнивание не затронуло, зато весь текст второго параграфа и третьего параграфа обтекли картинку справа.

Хорошо, а если нам не надо, чтобы нижестоящие блоки обтекали изображение? В этом случае вам поможет еще одно значение атрибута style, которое вы можете применить внутри любого блочного тега.

style=»clear:left» — прерывает обтекание изображений выровненных по левой стороне.

style=»clear:right» — прерывает обтекание изображений выровненных по правой стороне.

style=»clear:both» — прерывает обтекание изображений выровненных по обеим сторонам.

Пример прерывания обтекания изображения

Результат в браузере

Первый параграф.

Текст перед картинкой. После картинки.

Последний параграф.

Как вставить картинку в HTML?

За вставку картинки в HTML отвечает тег img, который имеет свои атрибуты

PHP

<img src=»images/example.jpg»>

1	<img src=»images/example.jpg»>

В атрибуте src мы указываем путь к изображению, причём путь может быть относительным или абсолютным.

Например, если у вас есть файл index.html, в который вы хотите вставить картинку, расположенное в папке images, находящейся в одной и той же папке с index.html, то относительный путь будет выглядеть так:

PHP

<img src=»images/example.jpg»>

1	<img src=»images/example.jpg»>

А абсолютный так:

PHP

<img src=»http://site.ru/images/example.jpg»>

1	<img src=»http://site.ru/images/example.jpg»>

Атрибут alt используются для задания альтернативного текста

Именно на него обращают внимание поисковые системы чтобы понять что изображено на картинке и определить по какому запросу нужно высвечивать эту картинку в «Поиске по картинкам»

Так же если у посетителя сайта в браузере отключен показ изображений или картинка по каким либо причинам не загрузилась то на его месте должен будет высветиться этот альтернативный текст, указанный в атрибуте «alt»

Например:

PHP

<img src=»http://site.ru/images/example.jpg» alt=»Вставка изображения»>

1	<img src=»http://site.ru/images/example.jpg»alt=»Вставка изображения»>

Обратите внимание, что альтернативный текст должен соответствовать тому что изображено у вас на картинке, в противном случае вы рискуете попасть под один из фильтров поисковых систем!

Однако это не значит, что на картинке с изображением дивана в атрибуте alt можно написать «диван» и ничего более. Это может быть текст, соответствующий какому-то ключевому запросу, по которым вы продвигаете свой сайт, например, «перетяжка мягкой мебели» или «купить диван в Москве» и так далее.

В WordPress этот атрибут можно добавит при вставке или редактировании картинки:

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

Если у вас ещё нет семантического ядра для сайта, то вам могут пригодиться эти статьи:

• «Как сделать семантическое ядро для сайта?»
• «Как сделать анализ семантического ядра онлайн?»
• «Анализ семантического ядра сайта по частотности»

Атрибут title используется для задания заголовка картинки, которое высвечивается при наведении курсора на картинку:

Например:

PHP

<img src=»http://site.ru/images/example.jpg» alt=»Вставка изображения» title=»Пример вставки изображения»>

1	<img src=»http://site.ru/images/example.jpg»alt=»Вставка изображения»title=»Пример вставки изображения»>

В WordPress этот атрибут задаётся в окне редактирования картинки

Данный атрибут, в отличии от alt, является не обязательным и играет меньшую роль в поисковом продвижении. Хотя для SEO оптимизации его присутствие будет не лишним.

Элемент

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

Элемент содержит ряд элементов <source>, каждый из которых ссылается на различные источники изображения. Таким образом, обозреватель может выбрать изображение, которое наилучшим образом соответствует текущему виду и/или устройству.

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

Обозреватель будет использовать первый элемент с совпадающими значениями атрибутов и игнорировать любые следующие элементы .

Пример

Показать одно изображение, если окно обозревателя (видовой экран) не менее 650 пикселей, а другое изображение, если нет, но больше, чем 465 пикселей.

<picture>  <source media=»(min-width: 650px)» srcset=»img_pink_flowers.jpg»>
 
<source media=»(min-width: 465px)» srcset=»img_white_flower.jpg»>  <img src=»img_orange_flowers.jpg»
alt=»Flowers» style=»width:auto;»></picture>

Примечание: Всегда указывайте элемент в качестве последнего дочернего элемента элемента . Элемент используется обозревателями, которые не поддерживают элемент , или если ни один из тегов не соответствует.

Должен ли я использовать width?

Это поможет браузерам быстрее и более аккуратно отображать страницы, особенно в сочетании с элементом height. Рассмотрим приведенный выше пример.

В CSS width HTML устанавливается на 100%, а высота — на auto. Браузер не сможет узнать, сколько пикселей по высоте выделить для рисунка, пока не загрузит все изображение полностью и не проверит заголовок файла, чтобы узнать его размер. Если атрибуты width и height отсутствуют, программа не сможет этого сделать. Но если оба атрибута указаны, браузер сможет вычислить это с помощью математических расчетов:

display_height = img_height × ( display_width ÷ img_width )

Сделав это, можно предотвратить ситуацию, когда при загрузке изображения оно сдвигает контент вниз и происходит раздражающий резкий скачок, в результате которого пользователь теряет из виду часть текста. Используйте атрибуты HTML width height правильно – определяйте исходную высоту изображения, а не указывайте размер, в котором оно должно отображаться на странице.