Зачем нужна оптимизация изображений для сайта?

Быстрая навигация по этой странице:

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

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

Что это и зачем требуется?

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

Это действие по существу преследует две цели:
- удовлетворение поисковых систем;
- удовлетворение пользователей.

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

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

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

Как сделать?

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

Как известно, основными форматами изображений в Интернете являются jpg, png (png-8 и png-24) и gif. У каждого из них есть свое предназначение, и крайне желательно ему следовать.

Например, для графики самым оптимальным в настоящее время считается формат png (png-8 — для простых изображений с небольшим количеством цветов, png-24 — для изображений с большим количеством цветов и полупрозрачностью).

Формат gif к настоящему моменту морально устарел и используется в основном ради анимации. Обычные же кнопки и иконки лучше делать в png, так как они и весить будут меньше (чего мы и добиваемся), и выглядеть в сложных деталях будут лучше.

Формат jpg используется для фотографий и больших сложных изображений.

Исходя из этих правил, вам нужно взять дизайн своего сайта и проверить, в каком формате выполнены все изображения — нет ли излишних элементов дизайна в jpg или gif, а также не используются ли в постах картинки в формате png (или, что намного хуже, в bmp и прочих редких форматах), которые должны были бы быть в jpg.

2. Ширина и высота картинок

Каждая картинка должна загружаться только в том размере, в котором она реально показывается на странице. Это, кстати говоря, одна из распространенных ошибок, поскольку вебмастеры часто загружают картинки через админку, не уменьшая их размер. В результате, на странице картинка показывается в размере 300×200, а в реальности загружается файл размером 900×600 или даже больше, чем ширина страницы сайта.

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

В Paint.net Вам достаточно открыть фотографию, нажать CTRL+R, и в появившемся окне поставить нужную ширину, а высота будет изменена автоматически. Если же потом нужно обрезать и высоту, тогда нужно выделить нужную область (внизу программы будут показываться ее размеры) и нажать CTRL+SHIFT+X.

3. Размер файлов

Помимо изменения ширины и высоты, важнейшим показателем является размер файла. Если у Вас не фотопортал, то, поверьте, для пользователей вовсе не нужны фотографии со 100-процентным качеством jpeg, они не увидят никакой разницы между 90% и 100% качеством, а размер файла уже на одном только этом изменении существенно сократится. Можно понижать и до 60-80% — просто смотрите, чтобы не было ущерба качеству.

Я эту операцию, опять-таки делаю все в том же самом Paint.net — нажмите «Сохранить как» для открытого jpeg файла (CTRL+SHIFT+S) и далее при сохранении Вам будет предложено выбрать качество. Операция занимает где-то 2 секунды ))

4. Делать ли водяной знак?

На многих сайтах можно увидеть внизу картинки подпись с URL-адресом соответствующего проекта и/или его логотипом. Делается такой водяной знак множеством способов — можно в фотошопе (в том числе автоматизированно с помощью action), можно в Paint.net, можно средствами PHP или плагином для WordPress.

Вопрос в другом — стоит ли его наносить?

Здесь мое сугубо личное ИМХО состоит в том, что наносить его имеет смысл на те фотографии и картинки, которые сфотографированы, сделаны, нарисованы, созданы Вами. Это позволит защитить ваши авторские права, так как иначе ваш труд скорее всего будет скопирован десятками ресурсов, и вы с этим ничего сделать не сможете.

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

Если Вы нашли для себя что-то полезное на этой странице, пожалуйста, нажмите на одну из этих кнопок:
http://pedant-vologda.ru/remont-iphone-x
Комментарии
  1. Артём

    Есть хорошая программа Riot.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>