Работа с изображениями, картинками сайта. Формат

Работа с изображениями, картинками сайта. Формат

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

Форматы изображений.
Рассмотрим только самые популярные форматы, применяемые в веб публикациях:
.jpg (.jpeg) - обычный, часто встречающийся, формат.
.png - изображение поддерживает прозрачность фона, в фотошопе и подобных программах Вы легко сможете выделить изображение и перенести (наложить) его на другое.
.gif - формат, поддерживающий анимацию, движение. Часто этот формат применяется для создания обычных баннеров (не flash). Имеет большой объем в килобайтах, при крупных размерах исходников для анимации.

Код, теги выводимого изображения.
Для того, чтобы картинка отображалась на странице сайта, HTML документ (файл) должен содержать, в определенных Вами местах, следующий код:
<img border="0" src="images/izo.jpg" width="300" height="200">,
где:
images - папка в которой лежит изображение
izo.jpg - имя и формат этого изображения
width="300" - ширина картинки
height="200" - высота картинки
выделенное зеленым - стандартный HTML код
Расположение картинки images/izo.jpg, может иметь абсолютный адрес типа: https://sitey.ru/images/izo.jpg - подробнее в статье "Установка и назначение ссылок в HTML документе"

Для ублажения капризов поисковиков, код должен иметь расширение:
<img border="0" src="images/izo.jpg" width="300" height="200" alt="Подсказка" >, где alt="Подсказка" - это надпись, которая будет выводиться пока картинка загружается браузером или отсутствует по ряду причин, а также при наведении на нее курсора мыши.

В случае если адрес картинки не абсолютный, а типа images/izo.jpg - должно соблюдаться условие: HTML документ (страница, файл) должен находиться в одной папке с картинкой.
Возможны варианты: images/big/izo.jpg - картинка лежит в папке big, которая в свою очередь находится в папке images, при этом HTML документ (страница) должен находиться в одной директории с папкой images. В таких случаях http://sitey.ru/ прописывать не обязательно.

Размеры изображения.
В HTML коде для задания и регулирования размеров картинок применяются следующие теги:
<img border="0" src="images/izo.jpg" width="300" height="200">
где: width="300" - ширина картинки, height="200" - высота картинки. Для лучшего запоминания: начальная буква тега height - h, а это обозначение высоты в математике и физике.
Размеры изображений можно не указывать. Но браузер будет открывать картинку несколько быстрее, если прочтет, указанный Вами размер. Ему не придется самому рассчитывать размеры изображения.
Тегами размеров можно регулировать величину отображения картинки, например для превью. Допустим изображение имеет размеры 500х300 пиксел и выводится в определенном месте страницы. Ваша цель разместить уменьшенную копии этого изображения в другом месте сайта. При этом не зачем уменьшать его, достаточно, используя тот же адрес ссылки, прописать уменьшенные размеры в тегах, в нашем случае это будет, допустим, 250х150 пропорционально начальному.
Внимание! Уменьшение существующего размера должно осуществляться пропорционально: рассчитайте в уме или используя графический редактор, подсмотрите уменьшенные габариты.
Помните, что при уменьшении изображения тегами с большего размера на меньший, страдает качество отображаемой картинки. Естественно с меньшего на больший тоже.

Размер в пикселах и объем в килобайтах, естественно, связаны прямо пропорционально. Картинка объемом в 1 Мб, при среднестатистической скорости Интернета и услуги хостинга, будет открываться 10-15 секунд. За это время все посетители сайта убегут к конкурентам.

Самый оптимальный объем изображения в районе 30-50 Кб, если на странице всего одна картинка, то до 100 Кб. Ближе к началу страницы лучше размещать наиболее легкие картинки.
Здесь я имею ввиду обычные сайты без встроенного в них кеширования (памяти) и Gzip сжатия HTML страниц. Подобные навороты встроены обычно в CMSы (Система Управления Контентом - портал). Могу помочь установить CMS, настроить, первоначально раскрутить, заполнить и подкинуть Журналистов.

Для работы с изображениями используйте графические редакторы, которых в сети великое множество. Конкретно не могу посоветовать - каждый привык к своему. Некоторые из них можете скачать по прямой ссылке с этого сайта в разделе: "Редакторы текста и графики".
Лично я, помимо громоздкого Photoshop, привык к Microsoft Office Picture Manager - для быстрого пакетного просмотра и мелких операций.
Для более серьезной работы с картинками работаю с SnagIt 11, который удобно снимает скриншоты, видео с экрана, рисует, пишет, имеет шаблоны для изощрения над картинками... Главной его особенностью является преобразование любых форматов изображений и при их сохранении оптимально уменьшает объем, сохраняя качество. Скачаете его в Интернете (поиск Google: скачать Snagit rus crack), он довольно хорошо крякается.
При работе с Фотошопом не забывайте, что при сохранении изображения, есть функция "Сохранить как Web (Веб)", при этом происходит более оптимальная обработка по объему и качеству для размещения изображения на сайте.

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

Автор: Saah | Просмотров: 30 625 | 24-04-2012,Вт, 11:46  

Похожие публикации

Добавить свой комментарий:

@