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

Картинки являются неотъемлемой частью почти любого сайта или блога, ведь не зря есть поговорка – «Лучше один раз увидеть, чем сто раз услышать». И тут сразу возникает вопрос – Как добиться максимальной пользы от картинок, или другими словами, как правильно оптимизировать изображения для сайта? Вот об этом, читаем дальше.

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

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

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

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

7 основных советов по оптимизации изображений.

Большинство сайтов имеют проблемы — они используют превосходные изображения, но способ подачи картинок посетителю – плохой, а бывает и просто ужасный. Большие размеры (то есть без сжатия), излишне большие размеры в пикселях, плохая оптимизация, неправильный формат, ошибки в SEO, являются одними из наиболее распространенных проблем, с которыми сталкивается современный веб-сайт.

1.Не используйте большие картинки

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

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

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

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

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

процесс сжатия картинки

изменяем размер картинки

 

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

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

3. Используйте прогрессивный JPEG

Когда вы сохраняете картинку в фотошопе, выскакивает вот такое вот диалоговое окно.

разновидности форматов картинок

А не задумывались ли вы над тем, что такое «Разновидность формата»? Базовый (стандартный), базовый оптимизированный, прогрессивный?

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

прогрессивный формат загрузки картинок

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

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

выбираем формат сохранения файла

4.Используйте постепенную загрузку файлов.

В сайтостроении, есть интересная технология под названием «Lazy Loading». Вот в чем ее смысл. Предположим, вы должны в статье разместить много картинок. Если их сразу загружать, то это может занять определенное время. И вот, некоторые умные люди подумали: зачем загружать картинки все сразу? Не лучше ли будет, загружать картинки по мере того, как читающий страницу в интернете, будет спускаться вниз по тексту, и загрузить картинку, только тогда, когда он начнет приближаться к этой картинке?

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

5.Используйте CDN

CDN – если по простому, это сеть доставки контента (Content Delivery Network (CDN)). Предположим, сервер вашего сайта, находится в Москве, а просмотров много во Владивостоке, или еще дальше. В этом случае,  из-за большого расстояния, у вашего посетителя из отдаленного района, пойдет задержка в получении данных с вашего сервера. Чем больше расстояние, тем больше задержка. Сеть CDN, решает эту проблему, отправляя ему страницу с сервера, расположенного к нему ближе.

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

6.Используйте атрибут «alt»

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

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

7. Давайте осмысленные имена файлов.

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

И еще один момент. Задавайте имена файлов, латинскими буквами. Именно латиница, наиболее восприимчива поисковыми системами, а значит, и файл они будут ценить выше. Хоть немного, но выше. А значит, и посетителей будет чуть больше.

Заключение

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

А вы согласны со мной, что оптимизация важна? Как вы делаете оптимизацию? Жду ваших комментариев!

1 Star2 Stars3 Stars4 Stars5 Stars (2 оценок, среднее: 5,00 из 5)
Loading...
Случайные публикации:
  • Что такое абсолютная ссылка и относительная ссылкаЧто такое абсолютная ссылка и относительная ссылка...казывают на полный путь к файлу. Например, вот это - полный путь: 
  • Конкурс Летняя жара на $100K от WelcomePartnersКонкурс Летняя жара на $100K от WelcomePartners...гаджеты. Баллы начисляются за слитый трафик в WelcomePartners.
  • Как продлить домен (на примере регистратора 2domains.ru). Автопродление доменовКак продлить домен (на примере регистратора 2domains.ru). Автопродление доменовКупить доменное имя своему сайту - для многих процесс уже знакомый...
  • Статистика поисковых запросов от Mail.ruСтатистика поисковых запросов от Mail.ruВ завершение темы добавления сайта в поиск Mail.ruстоит немного рас...
  • Как заработать на студентах — обзор партнерской программы Edu-revenue.comКак заработать на студентах — обзор партнерской программы Edu-revenue.comМежду буржем и рунетом есть определенная разница. В первую очередь, это...
Оставьте комментарий:
Один отзыв
  1. k0ttee:

    Практика показывает, что Alt нужен. Я ленился и проигрывал по причине его отсутствия.

    Ответить
Я не спамлю...