Ширина картинок


Содержание

Как изменять размеры изображения в css на html

Изображения — составляющие практически любого сайта, поэтому без изменения размера не обойтись. Изменять размер картинки можно 2 способами: в графическом редакторе или программно в коде html на css .

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

1. Изменение картинки в графическом редакторе

Изменять размер изображения вы можете в любом графическом редакторе(photoshop, gimp, xnview) и оно автоматически будет меняться на сайте в соответствии с оригинальными размерами.

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

— графические редакторы некачественно сжимают картинки менее 200 пикселей по ширине и высоте.

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

2. Изменение картинки в коде css на сайте

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

— Качественно сжимаются небольшие картинки, менее 200 пикселей по высоте или ширине в отличие от графических редакторов. Если вы хотите, чтобы на сайте размер изображения был меньше 200 пикселей, то лучше, чтобы исходный размер был больше на 30-50%(260-300 пикселей), чтобы сохранить хорошее качество при уменьшении.

При этом разница в скорости загрузки сайта чувствоваться не будет т. к. небольшие изображения занимают очень мало места и при увеличении их размера на 30% вы не заметите изменений. Но разницу в качестве заметите.

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

Как изменить размер картинки в html с помощью css

Чтобы изменить размера изображения в html средствами css используются свойства width(ширина) и height(высота) внутри атрибута style. Вы можете написать только width или height , и оставшееся неуказанное значение автоматически изменится с сохранением пропорций картинки. Например, указав только ширину изображения с помощью width, его высота(height) изменится автоматически, сохранив пропорции. И наоборот, при указании только высоты(height), его ширина также автоматически поменяется, сохранив пропорции картинки.

Изменение размера изображения в пикселях онлайн

Главное нужно указать файл на вашем компьютере или телефоне, ввести размеры в пикселях и нажать кнопку ОК. Остальные настройки выставлены по умолчанию. Ещё можно изменить размер фото в: Сантиметрах для печати | Мегапикселях | Процентах | Мегабайтах (сжать), а также качественно Увеличить маленькую картинку.

Для изменения размера «С соблюдением пропорций» можно указывать не только обе стороны (ширину и высоту), но и одну из этих сторон, например, ширину указать 1366 пикселей, а поле для ввода высоты можно оставить пустым или наоборот. Таким образом второй параметр автоматически подстроится под нужное значение.

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

Чтобы сделать квадратную картинку, нужно указать одинаковую ширину и высоту в пикселях, например, 1080×1080 (такой размер используется на сайте Instagram.com) и выбрать в настройках «Обрезка лишних краев, точно до указанных размеров», при необходимости можно указать ту часть картинки, которую обрезать не нужно.

Здесь также можно уменьшить и автоматически обрезать обои или картинку точно под размер своего рабочего стола. Для этого нужно ввести ширину и высоту своего монитора в пикселях и выбрать тип изменения размера «Обрезка лишних краев, точно до указанных размеров», для более точного позиционирования можно предварительно обрезать картинку, примерно как нужно в итоге, и уже после этого обработать на этой странице.

Исходное изображение никак не изменяется. Вам будет предоставлена другая обработанная картинка, а также её размеры в пикселях и мегабайтах до и после обработки.

Картинки в HTML – шпаргалка для новичков

Прежде, чем ответить на вопрос « как вставить картинку в HTML? », следует отметить, что перегружать веб-страницы огромным количеством графического материала не стоит, поскольку это не только улучшит визуальное восприятие ресурса пользователем, но и увеличит время загрузки страницы.

При создании веб-сайтов чаще всего используют графические форматы PNG , GIF и JPEG , а для дизайнерских работ с изображениями — графический редактор Adobe Photoshop , обладающий богатыми возможностями для сжатия и изменения размера изображений без потери качества, что является невероятно важным для веб-разработки.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Какие форматы и размеры фотографий существуют, как выбрать правильный?

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

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

Основные термины для понимания темы

Пиксели – маленькие квадратные точки, окрашенные в определенный свет, которые составляют единое целое – изображение.

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

Существует особенность: чем число точек растра выше, тем больше деталей прорисовывается и фотоснимок качественнее.

Линейный размер – это данные о ширине и высоте напечатанного снимка, выраженные в миллиметрах. Их можно узнать при помощи обычной линейки. К примеру, линейная величина снимка с параметрами 10*15 см –102*152 мм.

Параметры в пикселях – это данные о ширине и высоте цифровой картинки.

Существует одна особенность. Цифровые фотокамеры делают снимки одних размеров: 640*480, 1600*1200, а на мониторе мы видим 800*600,1024*768,1280*1024. То есть существенное несовпадение.

Рассмотрим примеры. Если картинка имеет величину 450×300 точек растра, то снимок будет повернут под альбом, то есть располагаться горизонтально. От чего это зависит? Ширина снимка больше, чем высота.

Если взять величину картинки 300*450, то она будет располагаться в книжной ориентации, то есть вертикально. Отчего так? Ширина меньше, чем высота.

Разрешение – число, которое связывает между собой величины в миллиметрах и в пикселях, измеряемое в dpi (от англ. «dots per inch» – количество точек на дюйм).

Специалисты советуют ставить разрешение – 300 dpi, предназначенное для получения высококачественных фотоснимков. Минимальное разрешение – 150 dpi.

Чем выше показатель, тем качественнее фото.

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

Разрешение может меняться в зависимости от различных моделей фотокамер. В чем же секрет? Производители фототехники указывают неточное число мегапикселей, к примеру, 12 МП. На самом деле может оказаться 12.3 или 12.5 МП. Но качество печати не ухудшится от этого факта.

Стандартные размеры

Какие есть форматы фотографий? Выясним.

  1. Самый популярный размер печати – 10*15 см. Он применяется для формирования семейного архива.
  2. Следующий – 15*20 см или А5.
  3. А4, 20*30 см или 21*29,7 см. Применяют для украшения стен фотографиями. Поскольку А4 – размер офисной бумаги для печати, то распечатка не составит труда, так как в основном принтеры разработаны под изготовление А4.
  4. 30*40 см – сложный формат. Имеет два других названия: А3 или А3+. Почему сложный? Потому что идет путаница. Размер А3 имеет параметры 297*420 мм, но таких фоторамок подобрать нельзя, их нет в продаже. Самая близкая фоторамка к этому фотоснимку – 30*40 см. Будьте внимательны при заказе. Фоторамки изготавливаются со стеклом.

Нестандартные размеры

Часто нам приходится заказывать фото не стандартной величины, а уникальной – нестандартной.

  1. 13*18 см. Применяется крайне редко. Печать затруднена.
  2. 40*50 см или 30*40 см. Картинки с данными параметрами помогут украсить интерьер, поскольку довольно велики. Поэтому качество должно быть высокое.

Как рассчитать размеры для получения высокого разрешения

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

Подробно рассмотрим фото с параметрами 10*15 см.

  • Линейные величины данных параметров (указанные обычно в специальных таблицах) – 102*152 мм.
  • Умножим ширину изображения (102 мм) на разрешение, которого хотим добиться, в нашем случае это 300 dpi.
  • Разделим результат прошлого шага на число мм в одном дюйме – 25,4.
  • Получим число точек растра исходной картинки по ширине 102*300/25,4 =1205.

Тот же самый алгоритм проведем для высоты.

Значит, делаем вывод, для любого фотоснимка, величина которого будет больше, чем 1205*1795 точек растра, при печати на формате 10*15 см разрешение будет больше 300 единиц.

Иногда получается так, что изображения с разрешениями 150 и 300 единиц выглядят совершенно одинаково. Почему так и отчего зависит? Зависит от жанра картинки и расстояния, с которого будут ее рассматривать.

Документы

Форматы для документов измеряются в см!

  • Для разного вида удостоверений – 3*4 см;
  • Для виз – 3,5*4,5 см;
  • На паспорт – 3,7*4,7 см;
  • В личное дело – 9*12 см;
  • На жительство – 4*5 см;
  • Для пропусков – 6*9 см.

Другая линейка форматов

Главное, чтобы фоторамка совпадала с фото. Поэтому производители выпускают специальную бумагу с определенными размерами:

Почему нужно правильно подобрать бумагу? В результате вам не придется смотреть на неполное, обрезанное изображение или же обрезать белые поля, которые оказались лишними. Обычно в фотосалоне представлены форматы для печати с примерами.

Особенности заказа

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

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

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

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

Как изменить размер изображения средствами HTML.

Хотите изучить HTML с помощью наставника бесплатно? Это здесь.

Осталось одно место.

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

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

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

В HTML есть возможность менять размер изображения программно. Это делается с помощью атрибутов width и height.

Отвечает за задание ширины изображения

задает высоту изображения

Вернемся к примеру из предыдущего урока и изменим размеры изображения, которое было там вставлено:

Первому изображению заданы атрибуты width и height, а второму нет. Посмотрите, как это будет в итоге выглядеть:

Числовое значение, которое задается в качестве параметра атрибутов width и height — это количество пикселей. Средсвами HTML можно задавать размер изображений только в пикселях.

Обратите внимание, что эти атрибуты меняют размер изображения именно при отображении его на веб-странице. Исходный размер при этом не меняется. Браузер программно, искусственно изменяет размер изображения. Объем данных загружаемых при этом никак не изменяется, как если бы вы меняли размер в графическом редакторе.

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

Посмотрите, как это может выглядеть на следующем примере:

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

Оптимальный размер фото для сайтов: пошаговая инструкция с фото

Оптимизация фотографий для публикации в интернете

Оптимизация графических файлов применяется в многих случаях, например, в web-дизайне – для уменьшения веса страниц; в компьютерных играх – чтобы уменьшить вес графики и увеличить скорость отображения; при загрузке фотографий в интернет – чтобы не перегружать сервер и экономить дисковое пространство хостинг-провайдера.

В данном материале я приведу пример как оптимизировать фото для загрузки в интернет. Статья будет полезна тем, кто впервые решил выставить на всеобщее обозрение свои фотографии.

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

Оптимизация фото для Web

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

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

д. (окно информации об авторских правах ищем в меню Файл > Сведения о файле > Описание), см. рис.10

Прежде чем открывать окно оптимизации, необходимо задать размеры файла в окне редактора, и только после этого оптимизировать. Вызываем меню «Изображение», в выпавшем меню нажимаем «Размер изображения».

В появившемся окне устанавливаем галочки как показано на фото внизу.

После этого необходимо установить разрешение. Я обычно устанавливаю значение 96 или 72.

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

Обычно я устанавливаю ширину от 800 пикселей до 1000, так как это оптимальный размер файла при котором качество и вес фото наиболее сбалансированы. Многие фоторесурсы не принимают фотографии весом свыше 250 Kb.

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

Интерполяцию оставляем бикубическую (по умолчанию).

Илон Маск рекомендует:  Как задать цвет посещённых ссылок

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

Для оптимизации фотографии переходим в меню «Файл», в выпавшем меню выбираем пункт «Сохранить для Web и устройств…»

В открывшемся окне появляется наша фотография которую будем оптимизировать для веб страниц. Сначала выбираем формат файла, в данном случае – Jpeg. Метод оптимизации – «Оптимизация», хотя вы можете выбрать «Прогрессивный» метод.

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

При обычном методе «Оптимизация», файл открывается сразу в нормальном качестве, но не весь сразу а постепенно сверху вниз (построчно). Тут всё зависит от скорости интернета, чем выше скорость, тем быстрей этот процесс происходит.

После выбора метода оптимизации переходим к коррекции веса и качества фотографии. Ползунком «Качество» устанавливаем наиболее приемлемое для вас качество фото. Здесь я выставил 85, так как выбранное мной качество вмещается в 234 Kb., чего вполне достаточно… Скорость загрузки с сервера составила 43 секунды при довольно низкой скорости интернета – 56,6 кбит/с.

Вызвав меню «Выбрать скорость загрузки», можете выбрать любую из доступных вам скорость загрузки, но помните что не у каждого на сегодняшний день скорость интернета равна 2Mb/s.

Если возникла необходимость в дополнительной коррекции параметров фотографии, на панели «Размер изображения» есть уже знакомые нам инструменты…

Чтобы мир узнал какой камерой вы пользуетесь, и какие параметры настроек при съёмке используете – выбирайте пункт «Все» на панели «Метаданные».

Надеюсь, я достаточно подробно рассказал о процессе оптимизации, если нет – оставляйте ваши вопросы в комментариях. Удачи!

Зачем уменьшать фотографии для сайтов

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


Максимальные размеры фотографии

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

Для отображения картинки пиксель в пиксель, ее разрешение должно быть меньше разрешения монитора компьютера.

Сейчас большинство пользователей имеет мониторы с размерами экрана 17 или 19 дюймов, их разрешение составляет 1280×1024 точек.

А стало быть 1280×1024 пикселей и есть тот максимальный размер фотографии, который может отображаться на мониторе компьютера у большинства пользователей, без потери качества.

Изображение таких размеров будет занимать весь экран, а если оно открывается на сайте, нужно еще учесть толщину рамки окна, адресную строку и т.п. Поэтому на практике максимально допустимый размер картинки для сайта должен быть еще меньше. Ширина не должна превышать 1200, а высота 900 пиксель.

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

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

Обычно размер лучших фотографий для сайта следует ограничить 800 пикселей по длинной стороне кадра, а остальных 600 пикселей по длинной стороне кадра.

Почему нужно уменьшать картинки для сайта

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

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

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

И так, если все ваши снимки действительно шедевры, и это вам сказал кто-нибудь посторонний и знающий, то уменьшайте их до размеров 800×600 пикселей. Если они нравятся не только вам, а хотя бы жене и лучшему другу, то уменьшайте их до 600×450 пикселей.

Если же ваши фотоснимки нравятся пока только вам, то будьте самокритичны и уменьшайте их до 400×300 пикселей. Кроме уменьшения размеров фотографии, перед ее выкладыванием на сайт, нужно еще выбрать режим сжатия самого графического файла, проще всего это сделать через меню Фотошопа – “Save for Web…

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

Как оптимизировать фотографии для интернет-магазина: пошаговая инструкция и обзор сервисов

Изображение товара — первое, на что обращает внимание покупатель. Чтобы удержать это внимание, нужно сделать красивые фотографии. Но этого мало. Второй шаг — оптимизировать картинки так, чтобы смотрелось красиво и загружалось быстро. Статья об этом.

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

Все примеры в статье сделаны в Фотошопе. Если у вас его нет, в конце мы предлагаем альтернативы.

Размеры и пропорции картинок

Размер

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

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

У картинки два размера:

    Пространство, которое она занимает на экране. Этот размер измеряется в пикселях (px) — точках, из которых состоит экран.

В Эквид-магазин можно заливать картинки любого размера, они всегда оптимизируются под ширину окна браузера и загружаются одинаково быстро.

Если ваш магазин не на Эквиде и вы не знаете, оптимизирует ли он размер картинок, не пожалейте времени и уменьшите изображения товаров примерно до 1000*1000 px. Такой размер достаточно велик, чтобы рассмотреть товар, и достаточно мал, чтобы быстро загружаться.

  • Место, которое картинка занимает в памяти устройства. Память измеряется в килобайтах (kB).
  • Чем больше физические размеры картинки, тем больше ей понадобится места в памяти, тем дольше она загружается. Чтобы решить эту проблему, были изобретены форматы файлов картинок со сжатием. Картинка сжимается за счет оптимизации данных о цветах.

    Подходящий размер для фотографий товаров — 1000*1000 px на 200 kB

    Однако сильное сжатие ухудшает «качество» картинки: появляется характерный шум или резкие переходы цветов. Чтобы такого не произошло, достаточно сохранить картинки в правильном формате. Для файла габаритов порядка 1000 px хорошим результатом будет вес в 200 kB. Как для этого выбрать формат, мы расскажем ниже.

    Кадрирование

    • Картинка стала меньше, но пропали мелкие элементы, которые я хотел показать!

    Вы правы! Детали важны. Откадрируйте важные детали товаров, вырезав их из основного изображения. Залейте дополнительные картинки в галерею.

    Уменьшенное изображение и два кадра деталей с того же снимка

    Миниатюры товаров

    Мы разобрались с главным изображением товара, но для витрины нужны миниатюры. Об этом Эквид заботится сам. Миниатюры товаров создаются автоматически. Размер по умолчанию 230 px. Вы можете изменить его в настройках контрольной панели.

    Если у вас не Эквид, сделайте миниатюры размером до 40-50 kB.

    Пропорции

    Исследования показали, что не любое соотношение сторон приятно глазу. С годами был определен «стандартный» набор пропорций, пользуюсь которыми вы всегда получите приятный результат: 1:1, 4:3, 3:2, 16:9.

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

    Если вы уже пробовали уменьшать изображения, то скорее всего заметили, что после уменьшения снимки «тускнеют». Они теряют свою резкость. Как сделать, чтобы фотографии «звенели»?

    Простой способ

    В большинстве современных редакторов при сохранении для Web можно задать новые размеры снимка и алгоритм уменьшения, который напрямую влияет на резкость. В Фотошопе установив правильные параметры (Image Size не больше 1000 px и Quality = Bicubic Sharper), мы получим результат, не нуждающийся в последующей корректировке.

    Если изначальное изображение было очень большим, например более 5000*5000 px, не уменьшайте его сразу до нужного. Сделайте это в 2-3 этапа, поправляя после каждого резкость.

    Способ для опытных

    1. Уменьшите картинку до нужного размера: Image → Image Size + выберите Bicubic Sharper.
    2. Копируйте изображение на второй слой (Layer → Duplicate Layer).
    3. Повысьте резкость второго слоя (Filter → Sharpen → Sharpen).
    4. Откорректируйте прозрачность слоя, чтобы отрегулировать резкость (в окне Layer → Opacity), и готово.
    • Второй слой наложите в режиме luminosity, это позволит избежать возникновения цветных ореолов.
    • Нежелательную резкость уберите протерев второй слой стёркой (или маской).

    Итак, вот что у нас получилось в сравнении с оригинальным изображением:

    На тему резкости написано много статей, вы найдете их в поисковиках по запросу «как увеличить резкость фотографии».

    Выбор формата

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

    Самые популярные форматы:

    • GIF (англ. Graphics Interchange Format — «формат для обмена изображениями») способен хранить сжатые данные без потери качества в формате не более 256 цветов. Формат поддерживает анимационные изображения. Долгое время GIF был самым распространённым форматом в интернете, пока не был создан формат PNG.
    • PNG (англ. portable network graphics) использует сжатие без потерь и хранит неограниченное количество цветов.
    • JPEG (англ. Joint Photographic Experts Group, по названию разработчика) — самый распространенный формат для хранения фотографий и других изображений. Алгоритм JPEG позволяет сжимать изображение как с потерями, так и без потерь. Чем меньше потери, тем больше размер файла.

    Фотография в формате JPEG с уменьшением степени сжатия слева направо. Источник: Wikipedia

    Так что же выбрать?

    Действуйте по следующему алгоритму:

    1. Если у вас фотография, выбирайте JPEG со значением качества порядка 50-80 единиц.
    2. Если иллюстрация с большими ровными заливками, JPEG не подойдет. На ровных поверхностях будут видны артефакты (искажения изображений). Выбирайте PNG.
    3. Анимированная картинка? Ваш выбор GIF.

    И не используйте в интернете TIFF. Этот прекрасный формат создан для печати, но не подходит для web.

    Сохранение фотографии в разных форматах. Файл JPEG самый «легкий»

    А можно еще меньше? — Да!

    Сжатие файлов без потери качества делают специальные сервисы: TinyJPG, JPEGmini, TinyPNG.

    Если нет Фотошопа

    У Фотошопа есть бесплатный онлайн редактор, в нем доступны базовые манипуляции с изображениями (например, обрезать картинку или изменить размер). Или можно купить минимальную версию за 644 рубля в месяц.

    Для наших целей ничем не хуже бесплатные графические редакторы:

    Программа подходит для Windows, Mac и Linux. Есть всё необходимое для профессиональной обработки рисунков и фотографий: работа со слоями и масками, инструменты для цветокоррекции, ретуши и рисования. Gimp поддерживает все основные форматы графических файлов.

    Paint.NET

    Графический редактор для Windows. Простой, интуитивный и удобный интерфейс. Набор инструментов уступает Фотошопу, но для редактирования фотографий для интернет-магазина достаточно. Сохраняется вся история изменений, любое действие можно отменить. Редактор поддерживает работу со слоями, имеет большой набор инструментов и фильтров с гибкими настройками.

    PicMonkey

    Онлайн-редактор с простым интерфейсом. Есть все базовые функции: кадрирование, поворот картинки, управление резкостью, работа с цветом, выбор разрешения фотографии. Огромный набор фильтров от профессиональных (например, эффекта зернистости фотопленки) до шуточных (например, эффект облаков или зимы). Чтобы перейти на новую операцию, нужно сохранить или отменить предыдущую.

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

    Pixlr

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

    Pixlr Editor поддерживает все популярные форматы изображений, доступен на русском языке.

    Больше онлайн-редакторов в этом обзоре.

    Обрезать, откадрировать, настроить резкость, выбрать формат, потестить редакторы… На первый взгляд сложновато. Не опускайте руки. Внешний вид магазина — то, ради чего стоит попотеть. После первых 10 фотографий вы будете делать все играючи.

    Как правильно оптимизировать изображение для сайта?

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

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

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

    Правильно оптимизированная картинка на сайте это не только красиво и органично, но и бесплатный SEO способ привлечения трафика на Ваш сайт.

    Основные правила как оптимизировать изображение для сайта

    Я думаю, что Вы наверняка на некоторых сайтах наблюдали картину медленной (построчной) загрузки картинки. Такая медлительность загрузки страницы вызывает не только раздражение, но и желание уйти с сайта. Одной из наиболее вероятных причин является наличие на странице неоптимизированных изображений.

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

    Использование правильного формата

    У любого файла есть свое расширение (буквы после точки в названии файла), указывающее на его формат. Наиболее популярными графическими форматами изображений являются JPEG, TIFF, PNG, GIF.

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

    Сразу отметем формат TIFF как наиболее громоздкий и тяжелый для загрузки сайта и остановим свой выбор на оставшихся.

    Основные форматы изображений для сайта

    Как правило для сайта используется формат JPEG, его алгоритм имеет наилучшую степень сжатия. Лично я на своем сайте использую именно этот формат.

    Используйте оптимальный размер

    Итак вы написали интересную статью (создали текстовый контент), и Вам нужно добавить тематические содержанию статьи картинки. Кто-то может позволить себе сделать самостоятельную фотосессию по той или иной теме, загрузить авторские фото, но большинство сайтов используют уже готовые картинки, которые уже были загружены кем-то ранее в интернет пространство.

    Современные цифровые фотоаппараты позволяют получать изображения огромного разрешения. Размер полученного файле может доходить до 10МБ и более.

    Естественно выкладывать картинки в таком качестве на свой блог очень неразумно.

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

    Оптимальный размер фото для сайтов: пошаговая инструкция с фото, как понять в пикселях размер для веб сайта

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

    С чего все начинается?

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

    Исходный формат RAW имеет слишком большой объем данных, хотя он и хранит максимум информации об изображении, о снятом кадре. Можно сказать, что это копия матрицы камеры на момент съемки.

    Но в таком “сыром” виде его использовать нельзя. Поэтому RAW используют профессионалы, как отправную точку для дальнейшей обработки, – либо очень уж крутые фотохудожники, либо эксперты: в области науки, техники, криминалистики, или медицины. В тех случаях, когда надо вытянуть максимум качества из отдельного фрагмента изображения.

    Большинство репортеров и даже художников довольствуются JPEG, настраивая камеру под свои цели. (Любой фотограф вам скажет – дайте мне светосилу, а зерно во вторую очередь. Поэтому огромный объектив с просветленной оптикой ценится больше, чем матрица с огромным разрешением.)

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

    Делать веб-страницы с такими фотками, при всем их качестве, – дело неблагодарное. Они медленно грузятся.

    Скорость загрузки является одним из самых-самых важных параметров сайта, особенно коммерческого. Да и простые блоги быстро разочаруют своих поклонников, если появления какого-то интересного или интригующего фотосета придется ждать несколько десятков секунд или даже несколько минут. Так что тут важно, и что предпочесть, и как это сделать?

    Давайте разберем по порядку.

    Оптимальный размер изображения

    Во-первых, не только текст, но и изображения индексируются поисковыми системами, которые предпочитают большие картинки маленьким. Значит, размер картинки целесообразно брать побольше. Но до каких пор?

    Очевидно, что до размеров экрана устройства в пикселях. Это максимум, а еще на странице может быть использован двух- или даже трехколоночный макет. Много чего еще зависит от атрибутов тега img. Загруженное изображение может масштабироваться самим браузером, если это предписано в разметке страницы.

    Во-вторых, разрешающая способность экрана на большинстве устройств 72 пикселя на дюйм или 96. Совершенно незачем пытаться отображать на таких экранах изображения с 300 пикселей на дюйм. Лишние пиксели будут просто усреднены и будет взята их проекция на один.

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

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

    Процесс обработки

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

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


    Посмотрим на конкретном примере, как делается оптимизация фотографии, полученной с цифровой камеры, в редакторе Photoshop. В моей случае, я буду пользоваться Adobe Photoshop CS6 русской версией. Для тех шагов, которые мы с вами выполним, подойдет Photoshop любой версии. И так начнем.

    Илон Маск рекомендует:  Типовые макеты

    1. Открываем фотографию в редакторе

    ФайлОткрыть. В появившемся окне выбираем нужную фотографию.

    На рисунке мы берем фото, имеющее размер около 4,5 Мб. Этот файл у нас в формате JPEG, полученную с зеркальной фотокамеры.

    2. Уменьшаем размер фотографии

    • Разрешение, ставим 72 пикселя на дюйм, нам больше и не надо.
    • Размер. Ширину ставим 800 пикселей, он автоматически назначит высоту, в данном случае, он поставил 533 пикселей, согласно пропорций фотографии.

    Важно! Ставим все галочки, картинки. Это:

    • Масштабировать стили;
    • Сохранить пропорции;
    • Интерполяция: Бикубическая автоматическая

    3. Правильное сохранение

    Здесь, мы будем сохранять, специально для веб публикаций. Для этого заходим, ФайлСохранить для Web.

    4. Выставляем качество

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

    Выбираем «Высокое» качество 60%. У нас получилось в этом примере 193.5 Кбайт при качестве 60%. Ну и ладно. На вид обработанное изображение почти неотличимо от оригинала. Вот в таком самом виде его и сохраняем. Готово!

    5. Проверим в браузере

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

    На этом и все. Теперь вы можете выкладывать фотографию куда угодно, веб-сайт, социальные сети и так далее.

    На этом я буду заканчивать. Теперь вы знаете, секрет правильного оптимального размера фотографии для веб-страниц. Надеюсь статья вам понравилась, и было бы здорово, если вы поделились в социальных сетях со статьей. Это лучший ваш подарок для меня.

    Всех вам благ, Тимур Мустаев.

    Какие форматы товаров изображений нужны для Интернет-магазина?

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

    Как сделать качественную фото-сессию вы уже знаете — прочитайте цикл моих статей «Как организовать фотосессию товаров для Интернет-магазина? качественная фотография товара-залог успеха»

    Конечно, если вы потратили время и ресурсы на организацию фотосъемки товаров для магазина, у вас возникает желание защитить, или хотя бы, усложнить копирование конкурентами ваших фото. Для этого используется «водяные знаки» – это полупрозрачные логотипы или копирайт-надписи магазина поверх фотографий, например: – адрес магазина www.Moy-Magazom.com или его название “Мой магазин название”

    – логотип и УРЛ сайта (лого) + www.mymagazin.com

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

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

    Правильное расположение копирайта

    Возможное расположение копирайта с лого магазина (позволяет и раскрутить вашу торговую марку, делает ее узнаваемую).

    Копирайт очень просто вырезается различными графическими редакторами

    Точно также, эта же рекомендация касается и обзоров продуктов. Можете поставить «водяной знак» и туда же.

    Если уже у вас накопилось достаточное количество фотографий товаров для магазина — вы можете автоматизировать наложение «водяного знака» на них. Об этом я рассказывал в своей статье и видео-уроке «Как сделать копирайт на фото для 1000 картинок за 20 секунд для Вашего Интернет-магазина»

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

    Точно такая же функция уже есть в программе для управления магазином – Store Manager for PrestaShop (что это такое — смотрите в моей статье – «Управление интернет магазином с помощью Store Manager» )

    С этими важными моментами я прояснил ситуацию, а теперь перейдем к самому важному!

    В каком формате сохранять фото товаров?

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

    Формат JPG или JPEG – используется в 90% на всех магазинах. За счет того, что изображение сжимается при сохранении, позволяет существенно экономить размер графических файлов.

    А тут вытекает закон — меньше размер файла — быстрее передача его на броузер клиент. Следовательно ваш Интернет-магазин будет грузится быстрее, и вам не придется заставлять клиента ждать, пока загрузится витрина магазина со всеми товарами.

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

    Оптимальным является качество сжатия равным70-85% для фотографий. Не ставьте 100 % – изображение будет очень большое по размеру, а разницы клиенты не почувствуют. При этом, магазин будет грузится дольше за счет больших размеров картинок в Кбайтах.

    Размер файла — 92 Кб Размер файла — 48 Кб

    Не ставьте качество сохранения 50 и меньше — размер в Кб будет мал, но качество картинки будет хуже. Обратите внимание на текст, он уже начал портиться.

    Размер файла — 48 Кб Размер файла — 48 Кб

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

    Если же вы хотите добавить фото с прозрачным фоном — вам нужен другой графический формат — PNG.

    Формат PNG – это формат, аналогичный с GIF, однако он позволяет манипулировать со слоем прозрачности. Кстати, именно он нужен вам, если вы захотите использовать «водяные знаки».

    Детальнее про формат PNG – на сайте Википедии

    Минус этого формата — это форма сохранения данных с “без сжатия”. Хотя сжатие происходит по хитрому алгоритму Deflate. Размер фото продуктов для этого формата будет увеличиваться. За прозрачный фон и хорошую картинку придется расплачиваться.

    Используйте формат PNG если вы должны показать четкие схемы или графически чертежи или логотипы. Этот формат не годится для показа товаров в виде фотографий.

    Вы можете сами попробовать провести оптимизацию фото товаров через графические программы, например Adobe Photoshop (это платный редактор) или Pain.NET (это бесплатный редактор). Скачать Pain.NET вы можете по этой ссылке.

    Смотрите видео пример, как забрать фон на фотографии товара.

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

    Например XnViewer – www.xnview.org

    у него тоже есть функции выбора качества сохранения изображения и русский интерфейс.

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

    Вы можете скачать ее на сайте разработчика — www.irfanview.com
    Эта программа умеет добавлять «водяные знаки», массово меняет размеры фото, или меняет формат всех выбранных фотографий с нужной степенью сжатия за пару кликов.

    Привожу краткий видео-пример, как изменить много товаров в формат jpg и при этом изменить размер фотографии. Вы можете увидеть работу программы в оригинальном английском интерфейсе. Также есть возможность добавить и русский язык. Просто скачайте язык и добавьте его в папку программы – IrfanViewLanguages

    Какой размер фотографий нужен для Интернет-магазина?

    Некоторые мои клиенты делали фото размером 2560 х 1400 пикселей. Конечно, такой формат сможет показать все детали товара.

    Но будьте реалистами, как много пользователей имеют мониторы с таким расширением? Кроме того, такие файлы очень больше по размеру, следовательно занимают по 2-3 Мбайта даже в формате Jpg и не помещаются на монитор пользователей. Я бы рекомендовал для себя хранить минимально доступный размер фото товаров 1000 х 700 пикселей.

    Почему так мало?

    Во-первых, большинство современных ПК уже имеют подобные расширения экрана как оптимальные (1024 х 768). Добавьте сюда еще прокрутку, и панель закладок в броузере.
    Этот размер фото позволит вам комфортно просматривать изображения всем клиентам. Хотя большинство движков магазинов позволяют масштабировать крупные изображения при загрузке, я бы держал 2 набора фотографий.

    Набор 1 — для публикаций, для постеров, для дизайна — крупные фото, с высоким разрешением.

    Набор 2 — специально для веб-сайтов и магазинов — уменьшенные размеры фото, оптимизированные для быстрой загрузки в Интернет.

    На текущий момент (2013-2014 года) это разрешение 1280 x 1024 пикселей. Вы можете узнать стандартные расширения мониторов и подстраиваться под них.

    Резюмируем:

    Для фото товаров магазина используем JPG с степенью сжатия изображения 75 – 80%

    Размеры фото должны быть до 1000 х 700 пикселей.

    Если вам нужны фото с прозрачным слоем — используем формат PNG-24

    Если вам нужно изменить размеры 1000 фото — используем массовые преобразования IrFanViewer

    Если вы хотите удобно просмотреть все свои фото — используем XnViewer

    Если вы хотите учиться дальше — читаем мои статьи ��

    Что еще почитать из цикла “Как открыть Интернет-магазин?”

    Колонка редактора сайта

    Задаем фотографии оптимальный размер для интернета

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

    Вы даже освоили фотошоп и подреактировали яркость и контраст, убрали лишние элементы. Остановитесь.

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

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

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

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

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

    Picture Manager – одна из самых простых утилит, широко используемая для решения данной задачи.

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

    Вам предлагаются стандартная высота и ширина в каждом из перечисленных случаев. Для использования в интернете выбираете соответственно «веб», для отправки сообщения посредством электронной почты – «сообщение» и для использования фотографии для различных документов, например, для вашего curriculum vitae – «документ».

    Для того, чтобы уменьшить размер фотографии в фотошопе, необходимо зайти в меню “Image” и выбрать опцию “Image Size”.

    После этого перед вами появляется диалоговое окно, которое предлагает выбрать подходящие вам размеры с учетом соблюдения пропорций “Constain Proportion” или без их учета.

    Однако в последнем случае следует учесть, что полученное изображение может получить искажение при уменьшении размеров непропорционально.

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

    Источник: Масштабирование фотографии для веб ресурсов

    Оптимизация изображений для сайта

    Каждый день мы видим огромное количество изображений в Интернете: просматривая соцсети, читая статьи, выбирая товары и даже не замечаем, насколько они влияют на наше внимание и выбор.

    Какая из этих картинок привлекает больше внимания?

    Больше всего лайков собрала статья с первой картинкой.

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

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

    Для чего нужны изображения

    Давайте сначала определимся, что дают нам изображения:

    1. Помогают продвижению сайта
    2. При первом посещении страниц помогают понять тематику сайта и создать соответствующее настроение.
    3. Привлекают внимание к товарам или услугам, вызывают желание заказать.
    4. Становятся элементами навигации и помогают ориентироваться на сайте.
    5. Располагают к чтению текстов и облегчают их восприятие, так как позволяют разбавить длинные описания.
    6. Повышают доверие к компании и бренду, если речь идет о фотографиях офиса, процесса работы, сотрудников.
    7. Развлекают, особенно, если содержат юмор.

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

    На каких страницах картинки необходимы

    Выделим основные страницы сайта, где добавление изображений поможет вашему бизнесу.

    1. Главная страница

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

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

    Плохой пример: изображение больше ассоциируется с турагентством или блогом о путешествиях, но не с ремонтом квартир:

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

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

    Каждый слайд должен кратко отражать суть предложения и вести на соответствующую страницу.

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

    Хороший пример: простой и понятный слайд на сайте Зоомагазина

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

    Картинки должны быть небольшого размера и полностью кликабельными.

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

    Пример хорошо подобранных изображений для списка услуг:

    В основном тексте на Главной лучше использовать иконки для выделения преимуществ компании.

    Текст не должен быть длинным (рекомендуемый объём 1500-2000 символов), поэтому нет смысла «разделять» его изображениями.

    Иконки следует выбирать в едином стиле и одного размера, тогда информация будет выглядеть аккуратно:

    2. Страница о компании

    Страница является продолжением Главной и закрепляет впечатление о компании.

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

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

    Пример фотографии процесса работы:

    Также хорошо повышают доверие фотографии сотрудников, которые можно дополнить контактами отделов.

    Если компания большая, то покажите хотя бы основные лица компании:


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

    3. Страницы товаров

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

    Покажите товар с разных ракурсов (не более 10 штук, не менее трех), чтобы пользователи смогли рассмотреть его с разных сторон. Так клиент быстрее примет решение о заказе.

    Для таких изображений необходимо добавить возможность их увеличения.

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

    И хороший пример того, как подробно показать товар

    4. Портфолио

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

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

    Хороший вариант деления работ: можно отфильтровать проекты по виду дизайна:

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

    Пример, как делать не нужно:

    5. Блог

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

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

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

    Пример непривлекательного раздела статей:

    С изображениями анонсы выглядят ярче:

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

    Фрагмент статьи с правильным использованием изображений:

    Какими должны быть изображения

    Правила общие для всех страниц, некоторые из них уже указаны выше, а также в статье «Добавляем картинки и видео на сайт: на что обратить внимание?» – прочитайте обязательно, но повторим их для закрепления информации.

    1. Соответствовать тематике и аудитории сайта, а также тексту рядом. Не путайте пользователей.
    2. Быть качественными. Фотографии с потерей резкости, мутные и содержащие «шум» только испортят впечатление о сайте и помешают клиенту выбрать товар.
    3. Быть реальными. Изображения из фотобанков кочуют с сайта на сайт, и пользователи уже легко узнают их и не верят им. Для статьи в блоге, конечно же, можно взять шаблонную картинку, но ни в коем случае не добавляйте ее на страницу о компании или в портфолио, и уж тем более для карточки товара.
    4. Быть без водяных знаков. Они не спасают от копирования и только портят изображения. Как уберечь фото и видео от копирования, читайте здесь.
    5. Быть в едином стиле. Понимаем, что для всего сайта сложно выполнить данное условие, но хотя бы для одной страницы они должны быть похожими: одинаковой ширины и выровнены по одной линии.
    6. Иметь небольшой вес, то есть быть размером не более 80-100 килобайт, чтобы не увеличивать время загрузки сайта. Исключение составляют увеличенные версии изображения, которые могут быть тяжелее.
    7. Быть в формате GIF, PNG или JPEG. Не рекомендуем использовать форматы BMP и TIFF, чтобы не было проблем с корректной загрузкой контента.
    Илон Маск рекомендует:  Что такое код url

    В дополнение к правилам рекомендуем посмотреть статью «На что люди обращают внимание при просмотре сайта».

    Где брать изображения для сайта?

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

    1. Услуги фотографа

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

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

    Для изображений товаров и речи быть не может на экономии, тут придется регулярно проводить фотосъемки, чтобы на сайте не было «пустых» карточек товара.

    2. Фото производителей

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

    3. Фотостоки и фотобанки

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

    Оптимизация изображений

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

    Название изображений

    Чтобы избежать проблем с отображением картинок на сайте, рекомендуем указывать название файлов только на латинице. Если есть сложности в транслитерации кириллицы, то поможет данный сервис.

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

    Примеры плохих названий:

    • Kniga065745932.png – непонятные цифры
    • IMG85416.jpg – неинформативный вариант
    • kupit-sumka-nedorogo-gucci.jpg – спам

    Хорошие варианты:

    Атрибут alt

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

    Атрибут alt нужен поисковым системам и пользователям, у которых по каким-либо причинам не отобразилось картинка (на ее месте будет отображаться указанный текст).

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

    Неудачные примеры alt:

    • alt=”туфли pollini белые, черные, красные, фото, цена, отзывы” – снова спам
    • alt=”блузка” – мало информации
    • alt=”78823094093″ – неинформативный вариант

    Правильное заполнение alt:

      alt=”кеды ad >После размещения изображений обязательно проверьте в robots.txt, доступны ли к индексации страницы, на которых вы разместили картинки. Сами изображения тоже не должны быть закрыты от индексации. Подробнее о настройке robots.txt

    Заключение

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

    © 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна.

    Как уменьшить размер фото для размещения в интернете

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

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

    Для этого наш файл с фотографией щёлкаем правой мышкой, открывается меню: нажимаем левой мышкой “открыть с помощью”, открывается ещё меню: выбираем в меню программу Paint. Итак наше фото открыто програмой Paint.

    (Кстати можно по другому сделать: сперва отрыть програму Paint, потом в верхнем меню Файл —> Открыть, ищем нашу фотку на компьютере и открываем её.

    ) Затем в верхнем меню нажимаем левой мышкой “Рисунок” далее в открывшемся меню “Растянуть/наклонить” или вместо этого нажимаем на клавиатуре одновременно две кнопки Ctrl W и открываются настройки “Растянуть” и ниже “Наклонить”. Нам нужно работать с настройками “растянуть”.

    По умолчанию вы видите в настройках “100%” по горизонтали и вертикали. Уменьшаем фото, поставив на глазок 70% в окне “по горизонтали” и 70% в окне “по вертикали”. Затем нажимаем в этом окне “ОК” и смотрим на сколько уменьшилась фотка.

    Если нас это уменьшение не устраивает, то в верхнем меню нажимаем “Правка”, затем отменить или вместо этого нажимаем на клавиатуре сразу две клавиши “Ctrl Z” и все ваши изменения в размере фото отменятся, т.е. фото будет прежнего размера. И теперь начинаем сначала подставлять цифры в процентах в окно “по горизонтали” и в окно “по вертикали. (В эти окна обязательно надо ставить одинаковые цифры, иначе изображение на фото исказится.)

    После очередной попытки, когда вас размер фото устраивает, то в верхнем меню нажимаем “Файл” затем “Сохранить как”. У нас выскакивает окно сохранения файла.

    Здесь надо внизу окна указать “имя файла” (латинскими буквами или цифрами) и тип файла, для интернета обычно подходит “JPG” или “JPEG”. Потом нажимаем кнопку справа “Сохранить”, предварительно запомнив в какую папку на компьютере вы сохранили своё фото.

    Открываем эту папку на компьютере, находим эту фотку, которая уменьшилась в размерах и загружаем её на сайт в интернете.

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

    Нажимаем в верхнем меню Изображение —> Размер изображения. В табличке уменьшаем ширину или высоту изображения, например ширину поставим 900 и высота соответственно уменьшится (галочка Сохранить пропорции должна стоять. Нажимаем Да и фото уменьшилось в размерах.

    Затем в верхнем меню нажимаем Файл –> Сохранить, в появившемся окне можно немного изменить качество изображения, но лучше оставить по умолчанию 80, формат оставить JPEG, имя файла можно оставить как есть или переименовать латинскими буквами или цифрами, но обязательно в конце имени файла добавить .jpg ( например файл назовём fotka.

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

    Кроме уменьшения фото в этой программе можно изменить яркость, цветность, контрастность фото, применить многие спецэффекты.

    Если что-то непонятно ниже в комментариях задавайте вопросы.

    Поделитесь этой страничкой со своими друзьями.

    Ширина картинок

    Цифровые изображения имеют свои размеры и вес. Например, стандартное фото хорошего качества в формате JPEG может весить 5 MB мега байт и иметь размеры 4200х2800 px пикселей ширины и высоты. Стандартное же разрешение монитора тоже считается в пикселях. Самые популярные размеры — это 1024×768, 1152×864, 1280х960.

    Теперь, если сопоставить разрешение монитора 1024х768 и размер картинки 4200х2800, то становится очевидным, что она более чем в 2 раза шире самого монитора, а значит браузер (Опера, Мозила и пр) будет сжимать картинку до нужных ему размеров, или появятся ползунки, и придется прокручивать её. Зависит от установок сайта. К тому же изменятся только видимые размеры картинки.
    Мы, конечно, можем впихать в наш сайт подобные габариты, но такие фото занимают много места на хосте т.к. весят много. Вдобавок тормозят браузеры и компьютер посетителей. Все это добро чрезвычайно долго открывается, что отпугивает немалую часть посетителей. Я, например, долго прогружаемые сайты закрываю и гуглю дальше.

    Как узнать оптимальный размер картинки для той или иной статьи?

    В принципе можно и на глаз, если размер монитора 1024х768, то возьмем примерные размеры поля браузера и вычтем из размера монитора. Поля сайта тоже вычтем, то получим примерно 900х700 +- px то есть, фото можно смело уменьшать до таких размеров. А вообще 600х400 самое оно.

    Если вы хотите поместить картинку в определенное место на сайте, определенных размеров, то можно взять спец. инструмент для веб дизаинеров – линейка ( к примеру mySize ) и прям в браузере померить место, куда вы хотите вставить картинку. Это нужно для того, чтоб посмотреть пропорции, и если надо подрезать фотографию, чтоб её не сплющило.

    Изменить размеры и вес фото можно в фотошопе.

    Размер изменяем таким образом. Image(Изображение) — Image Size – В полях width и height ставим нужные значения в пикселях, и в поле ниже constrain proportions(сохранять пропорции) ставим галочку. Скрин ниже.

    Изменяя вес, мы изменяем качество изображения. Например с 5мb можно смело опускать качество до 50-200 кв, и на мониторе это будет не заметно. На некоторых картинках и при 15кв особо не заметны ухудшения. Зато места занимают в десятки раз меньше. Слева картинка сжатая — 500х630 26,7кб, справа нет — 1269х1600 1.35Мб. Вышло в 6 раз меньше. Если не придираться, то и не заметно.

    Как изменить вес фото или картинки? Все просто. Меняется вес в фотошопе несколькими путями. 1) Просто изменить размер image- image size и если недостаточно уменшили , 2) File — Save for web & devices . Появится окошко с установками параметров, в верхнем правом будет ползунок Quality (качество) , в нижнем левом показатель веса картинки. Качества ставите Low – низкое , следите на сколько уменьшается вес и возюкаете ползунок до нужного значения. Скрин ниже.

    Или можно таким образом. File — save as — появится список форматов, выберите например Jpeg далее жмём «сохранить», появится окошко JPEG options. Там в окошке image option будет ползунок, перемещая его увидите справа цифры — сколько весит.

    Еще один способ сжать картинку разлицных форматов — это специальные сайты, веб сервисы например вот tinypng . com

    Как сделать одинаковые размеры картинок в списках, галереях без создания миниатюр за счет css

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

    Обычно я решал данную проблему через overflow: hidden; и div, на который устанавливал ограничение по высоте картинок. Подробнее расскажу чуть позже. Сначала давайте поэтапно рассмотрим разные возможности по созданию миниатюр картинок одинакового размера от худшего к лучшему.

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

    HTML Изображения

    Изображения &#8212 лучшее украшение веб-документа. Благодаря изображениям мы можем улучшить вид сайта, сделать его ярче, интереснее и удобнее для пользователей. Под изображениями подразумевают значки, рисунки, фотографии и карты изображений, занимающие часть окна браузера. Для вставки изображения в веб-страницу используется одинарный строчный тег . Для него должны быть указаны следующие два атрибута:

    Атрибут «src».

    Собственно, по-настоящему обязательный атрибут у тега только один &#8212 это атрибут src. Атрибут src (от англ. source — источник) позволяет указать путь к изображению, которое должно быть отображено в HTML-документе. URL &#8212 обязательный параметр, который указывает браузеру, где находится изображение. В основном на сайтах используется графика файловых форматов: JPEG, GIF, PNG, BMP и SVG.

    Если изображение находится в том же каталоге, что и содержащий его HTML-документ, достаточно указать только имя этого файла, например:

    Если изображение находится на том же сервере, что и содержащий его HTML-документ, но в другом каталоге, следует указать имя каталога и имя файла с изображением, например:

    Если изображение находится не на том сервере, на котором находится содержащий его HTML-документ, необходимо указать полный адрес файла с изображением, например:

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

    Атрибут «alt».

    При отображении веб-документа прежде всего загружается текстовая часть, а затем — более ёмкие графические файлы. При медленном Интернете вы можете заметить как в окне браузера вместо этих файлов сначала появляются прямоугольные области, зарезервированные под рисунки. Img является строчным элементом. По умолчанию изображение будет выводиться в общем потоке как одна большая буква в том месте, где встретится элемент img. Как правило, первоначальные изображения представляются в виде небольшой пиктограммы в виде прямоугольника. Уже на этом этапе можно дать знать пользователю, загрузку какого изображения он ожидает. Это очень полезно для пользователей текстовых браузеров или для тех, у кого отключено воспроизведение графики. Для отображения такого поясняющего текста служит атрибут alt. Он позволяет добавить альтернативный текст, который будет отображаться вместо изображения, если по каким-либо причинам графический файл загрузить не удалось. Кроме того, атрибут alt используется поисковыми системами для поиска по содержимому альтернативному тексту картинок в Интернете.

    Даже если вам нечего сказать об загружаемом изображении, атрибут alt все равно нужно указывать, присваивая ему пустое значение: alt=»». Иначе валидатор обнаружит изображение без атрибута alt и сообщит об ошибке.

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

    Атрибуты «width» и «height»

    Вы уже знаете, что браузер загружает изображения после того, как загрузит HTML-документ и начнет отображать веб-страницу. И если вы отдельно не укажете размеры изображения, то браузер не будет их знать до тех пор, пока не загрузит рисунок. В этом случае вместо изображения сначала отображается квадратик, а после загрузки графического файла происходит обновление страницы с соответствующим перемещением текста, других объектов страницы и потерей времени. Если же размеры заданы, то браузер оставляет место для изображения и страница загружается быстрее. Вы также можете указать значения атрибутов width и height, которые меньше или больше, чем фактические размеры изображения, и браузер установит пропорции рисунка так, чтобы они соответствовали новым размерам. Их значения можно указывать в пикселах или процентах от размера окна (в этом случае после размера ставится знак %). Если после числовых значений атрибутов размерность не указана явно то, по-умолчанию, браузер интерпретирует эти величины в пикселях.

    Пример: использования атрибутов width и height

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

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

    Если вы используете атрибуты width и height для того, чтобы изменить размеры изображения в браузере, то можно сказать, что вы применяете их для оформления веб-страницы, а в этом случае, лучше использовать CSS, что позволит добиться тех же результатов. Вы можете использовать атрибут style указав свойства width и height изображения:

    Пример: задание размеров изображения с помощью атрибута style

    Размеры изображения и CSS

    В HTML5 приемлемы оба вышеприведенных способа задания размеров изображения. Однако, вместо того чтобы использовать атрибуты w > , как указано выше, целесообрзнее установить размер с помощью CSS. Это может дать вам дополнительную гибкость при отображениии картинки на странице.

    Если изображение не помещается внутри области содержимого при просмотре на устройстве с небольшим экраном (например, мобильный телефон), пользователю приходится прокручивать страницу по горизонтали или уменьшать масштаб, чтобы увидеть картинку полностью, при этом, он испытывает большие неудобства. В таких случаях предпочтительнее указать в атрибуте style значения max-width или max-height вместо абсолютных размеров. В следующем примере мы используем max-width:100% для того, чтобы изображение не было слишком большим для своего контекста. При использовании только max-width (без использования max-height), браузер будет масштабировать изображение пропорционально. Другими словами, высота будет масштабируется вместе с шириной, а изображение не будет искажаться.

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

    Пример: задание размеров изображения с помощью max-width

    Карты-изображения

    Карта изображений (Image Map) позволяет привязывать ссылки к разным областям одного изображения. Щелкая мышью по отдельным фрагментам изображения, пользователь может переходить по той или иной ссылке на разные веб-страницы. Карты в HTML создаются с помощью тега , а области-ссылки в них с помощью тега . Атрибут name тега связан с атрибутом usemap и создает связь между изображением и картой.

    Пример карты-изображения (по фрагментам изображения можно щелкать):

    Пример: Создание карты изображений

    Атрибуты тега :

    Название атрибута Описание
    shape Очертания области. Возможные значения атрибута:
    rect – прямоугольник;
    circle – круг;
    poly – многоугольник.
    coords Координаты области:
    Для прямоугольника – координаты левого верхнего и правого нижнего углов.
    Для круга – координаты центра и радиус.
    Для многоугольника – координаты всех углов.
    href URL-адрес файла, на который делается ссылка.
    title Всплывающий текст, появляющийся при наведении курсора на заданную область.
    alt Текстовое описание области. Служит альтернативой при отключенной в браузере загрузке изображений.

    Путь к изображению

    В приведенном коде ошибочно указан путь к изображению «face_smiley.jpg» вместо «smiley.jpg». Исправьте ошибку.

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

    Изображение в данном примере не может быть отображено веб-браузером. Укажите для изображения альтернативный текст «wm-school.ru», который необходим для пользователей текстовых браузеров или для тех, у кого отключено воспроизведение графики.

    Изображение-ссылка

    Сделайте изображение абсолютной ссылкой, ведущей на сайт «www.wm-school.ru».

    Размеры изображения

    С помощью HTML увеличьте изображение в 2 раза.

    Изображение в 100%

    Сделайте чтобы изображение отображалось полностью вне зависимости от ширины окна браузера.
    Изменяйте размер окна браузера с помощью растягивания/сужения размера или меняйте масштаб с помощью Ctrl+»+» / Ctrl+»-«.

    Размеры изображения

    Это задание архивной главы. Перейдите по ссылке, чтобы пройти задание в актуальной главе.

    Чтобы управлять шириной или высотой изображения, нужно использовать атрибуты width и height . Пример:

    В примере изображению задана ширина 100px . Обратите внимание, что в атрибуте width после цифры нет px . Если вы задаёте размер картинки в пикселях, то используйте просто цифры. Добавлять px не нужно, таков стандарт.

    Во втором примере изображению задана относительная ширина, 50 процентов:

    Высоту в процентах обычно не задают.

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

    Если же задать и ширину, и высоту для картинки:

    То браузер может нарушить пропорции исходного изображения.

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL