ru
en


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

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

Правовой аспект

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

Где взять бесплатные картинки для сайта

Делая сайт или интернет-магазин воспользуйтесь сайтами-фотостоками бесплатных изображений. Они распространяются по лицензии Creative Commons, условия которой означают, что их автор добровольно отказывается от авторского вознаграждения и позволяет использовать его работы бесплатно по вашему усмотрению. Одним из самых известных и обширных банков фотографий, включая бесплатные, является сервис Flikr. Для поиска нужного изображения достаточно задать ключевое слово, а затем на вкладке выбора вариантов лицензирования указать, что вы ищете бесплатные фотографии (All creative commons). Можно также искать фотографии по преобладающему цвету или сочетанию цветов. Это позволит подобрать картинки, максимально соответствующие цветовой гамме вашего сайта. Расширенные настройки поиска позволяют отфильтровать выдачу по ориентации и форме фотографии (горизонтальная, вертикальная, квадрат, панорама), размеру (S/M/L) или дате создания.

Форматы картинок

Существует множество форматов графических файлов. Иными словами, одна и та же картинка может быть сохранена виде файлов с разным расширением: JPG, PNG, GIF, AI, EPS, CDR, BMP, TIFF, PSD и других. Разница между картинками, сохранёнными в разных форматах, может быть незаметна невооружённым глазом. Но она будет заключаться, как минимум, в весе файла и возможности просмотра изображения некоторые из них не открываются браузером и потому не будут отображаться на вашем сайте.

1. Растровые форматы

Сжатые — подходят для сайта:

Файлы с расширениями JPG/JPEG, GIF, PNG. Эти картинки можно просматривать в любом браузере и в любой программе для просмотра изображений. За счёт сжатия достигается сравнительно небольшой вес файлов, поэтому они предназначены для размещения на сайтах.

Самый распространённый формат — JPG, он подходит для всех видов статичных веб-изображений.

Изображения с расширением PNG, как правило, больше весят, но и более качественные и чёткие, чем JPG. Кроме того, в них можно использовать эффекты прозрачности и полупрозрачности.

Файлы в формате GIF — обычно наиболее «лёгкие» по весу, но при этом отличаются самой низкой цветопередачей. Поэтому их используют для простых немногоцветных картинок (логотипы, кнопки, монохромные иллюстрации, графики, диаграммы). Преимущество GIF-файлов — в том, что они поддерживают простейшую анимацию: такие картинки можно сделать движущимися, добавив в них несложные анимационные эффекты.

Несжатые — НЕ подходят для сайта:

Файлы с расширениями BMP, TIFF/TIF, PSD
Эти файлы не используются в веб-контенте, поскольку имеют слишком большой вес. Их, как правило, применяют для печати, при сканировании, а PSD — в дизайне.

2. Векторные форматы — НЕ подходят для сайта:

Файлы с расширениями EPS, AI, CDR.
Векторные картинки обычно лучшего качества, они чётче и на них заметны даже самые мелкие детали. Но они совершенно не годятся для использования в вебе, поскольку не отображаются браузерами и стандартными программами для просмотра изображений. Такие файлы используют в полиграфическом дизайне и флеш-анимации.

Подбор цветовой гаммы

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

Особенно полезны будут эти инструменты, если вы хотите изменить дизайн сайта — фон, цвет меню, шрифтов, кнопок и т.п.

Они позволяют на наглядном цветовом круге подобрать цветовую палитру и сочетаемые с ней цвета, а также продемонстрируют, как ваша страница будет выглядеть на мониторе пользователя в конечном итоге. Можно подбирать сочетающиеся и контрастные цвета, оттенки в различных цветовых схемах, акценты, цвета шрифтов. И даже увидеть, как будут восприниматься выбранные вами цвета пользователями с отклонениями зрения (вкладка «Симуляция зрения» на сервисе Colorscheme.ru).

А дальше что?

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

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

К картинкам, которые вы используете при создании сайтов, существует и ряд технических требований, Важнейшие из них — формат и объём файла, размер и качество изображения.

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

Размер

Стандартная ширина области содержимого веб-страницы составляет до 984 пикселей (зависит от ширины монитора на устройстве того, кто её просматривает), поэтому рекомендуется для публикаций обрезать или уменьшать большие изображения примерно до 600-800 пикселей в ширину.

Вес

Размещение слишком объёмных файлов изображений может привести к увеличению скорости загрузки страницы. В этом случае на странице отобразится текст, а вместо изображений будут пустые места, что создаст впечатление некачественного сайта. Также это негативно скажется на быстродействии самой страницы: пока картинки не догрузятся полностью, любые действия (прокрутка страницы, кликабельность кнопок, заполнение полей) будут будут «притормаживать».

Изображения с цифровых камер или библиотек фотографий могут быть очень большими, как по размеру (до 4 000 пикселей в ширину), так и по весу (от 2Мб до 10Мб).

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

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

Как определить размер и вес

Чтобы определить размер и вес изображения, достаточно навести на него мышь в файловом менеджере или кликнуть правой кнопкой мыши, выбрать «Свойства - Подробно» . Например, на картинке ниже изображение имеет размер 1024х768 пикселей и вес 873 Кб.

Размер также можно узнать, нажав на иконке файла правой клавишей мыши и выбрав из выпадающего меню функцию «Свойства».

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

При отсутствии такой необходимости, вы легко можете изменить размер изображения, используя простейшие графические редакторы, например, Paint, который входит в стандартные программы Windows. Откройте файл в этой программе и выберите функцию «Изменить размер». В выпадающем меню и задайте ширину в пикселях, например, «800». Уменьшение размера автоматически сокращает вес изображения — теперь размер файла почти в 4 раза меньше (224 Кб).

На Mac OS то же самое делается через стандартную программу просмотра изображений:

Кроме того, есть и специальные инструменты для оптимизации изображений перед публикацией их на сайте, например FastStone или PIXresizer для Windows. Обе программы бесплатны.

Но и 200 Кб — это слишком большой вес для картинки на сайте. Его можно уменьшить, сжав изображение в два, и даже в четыре раза, без потери качества. Для этого вы можете использовать конвертеры изображений, например, Irfanview или Imagemagick. Можно, конечно, воспользоваться и фотошопом. После редактирования изображения достаточно сохранить его в качестве, позволяющем публикацию в интернете. Для этого в меню «Файл» нужно выбрать функцию «Сохранить для Web...».

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

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

Редактор изображений Irfanview

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

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

Для примера, изменим предлагаемое изображение, превратив его чёрно-белое. Для этого на выпадающем меню «Image» выберем функцию «Convert to Grayscale».

А теперь добавим рамку, выбрав в том же меню функцию «Add border/frame». Из предложенного набора выбираем тип рамки и в появившемся диалоговом окне настраиваем её.

Вот что у нас получилось:

Осталось сохранить результат работы на компьютере. При этом, программа предлагает сохранить файл в заданном качестве и даже ограничить его размер. В меню «File» выбираем вкладку «Save as…», указываем путь сохранения и в дополнительном окне — специальные возможности — качество и размер.

Первоначальный объём нашего файла был 111 Кб. В результате преобразований его размер сократился до 25 Кб.

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

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

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

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

Онлайн-компрессор изображений Optimizilla

Достойный сервис оптимизации изображений с одновременной загрузкой до 20 изображений, после сохранения они скачиваются одним архивом. Позволяет значительно (до 70-80%!) уменьшить вес картинки, при этом совершенно не теряя в качестве изображения. Можно вручную регулировать уровень сжатия (размер/качество) изображения. Прост и понятен в использовании.

Онлайн-компрессор изображений JPEGmini

Этот сервис способен уменьшить размер изображения до 5 раз при полном сохранении качества. В приведённом примере исходное изображение было сжато со 137 Кб до 98 Кб — то есть в 1,4 раза. В рабочем окне сервиса, где видно картинку до и после сжатия, наглядно показаны результаты его работы — вы можете увидеть, что результат работы сервиса действительно не меняет качество изображения.

Онлайн-компрессор изображений PunyPng

Это хороший бесплатный сервис, который отлично подойдет для обработки изображений для сайтов. Он предназначен для сжатия файлов JPG, GIF, PNG-форматов и позволяет за раз загрузить до 20 файлов максимальным объёмом до 500 Кб каждый. Обработанные изображения можно скачать в виде архива.

Онлайн-компрессор изображений TinyPNG

TinyPNG по своим функциям аналогичен предыдущему сервису. Его отличие состоит в том, что он позволяет загружать до 20 файлов форматов JPG и PNG, объём каждого из них не должен превышать 5 Мб. Результаты работы также можно скачать архивом или сохранить в DropBox.

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

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

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

Правильно называйте файлы изображений

Это нужно сделать ещё до загрузки изображения на сайт. Переименуйте файл так, чтобы название отражало содержание картинки. Например, если на фотографии изображен красный диван, назовите файл «krasnyj divan.jpg». Используйте латинские буквы, чтобы поисковик мог корректно их распознать.

Заполняйте alt и title изображения

Правильно заполненные alt и title изображения положительно скажутся на SEO-оптимизации и позволят попасть изображениям с вашего сайта в выдачу поисковиков по картинкам. Разберёмся по-быстрому, что есть что.

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

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

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

Ваше имя
Ваш e-mail
Текст комментария