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

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

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

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

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

Чистка фоновой графики для уменьшения HTTP запросов

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

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

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

Вывод подобной фоновой графики реализуется посредством значения «url» CSS свойства background или background-image, указывающего путь до картинки:

background-image: url(images/image-1.jpg);

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

background:url (//goldbusinessnet.com/wp-content/themes/tiny-forge/images/spriteme1.png) no-repeat;

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

В WordPress, например, за оформление вебстраниц отвечает style.css (тут читайте подробности того, как вообще устроена тема для движка Вордпресс). Именно в этом файле необходимо будет ликвидировать правила background и background-image для фоновых изображений, которые вы пожелаете удалить за ненадобностью. Точно таким же образом следует поступать и в дальнейшем при редактировании шаблонов, когда возникнет необходимость корректировки.

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

Очень удобным для подобных целей является Web Developer для Firefox (впрочем, для Хрома тоже имеется своя вариация). После установки расширения в верхнем правом углу окна браузера появится значок шестеренки, при нажатии на который откроется список возможных опций:

Если выберете пункт «Outline Background Images», перейдя во вкладку «Images», то все графические элементы, отображаемые посредством CSS, будут обведены красной рамкой. Таким образом вы сразу сможете их отсортировать.

Для того, чтобы узнать свойства, которые нужно удалить из файла style.css, просто щелкните правой кнопкой мышки по нужной картинке и из появившегося контекстного меню выберите пункт «Просмотреть код», если пользуетесь Хромом (для других браузеров название опции может быть другим, но суть при этом не меняется).

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

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

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

1. Вы желаете просто убрать фоновую картинку, но сохранить блок, в который она входит. При этом изображение может являться анкором ссылки на другую страницу или на внешний ресурс, правда, реализованным посредством CSS. Тогда возможно, например, заменить изображение текстом, вставив его между открывающим и закрывающим тегом a. При этом, естественно, следует удалить свойство «background».

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

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

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

Поэтому лучше для начала удалить из стилевого оформления правила «background-image» и/или «background», а уж затем подчистить весь файл style.css с помощью специальных средств.

Завершающим аккордом вы можете объединить некоторые фоновые картинки в так называемые CSS спрайты, что тоже поможет уменьшить количество HTTP запросов к серверу.

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

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

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

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

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

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

2. Выбор формата картинки. Если вы используете обычные изображения со сложными переходами, то для веба их лучше всего сохранять в форматах растровой графики GIF, PNG или JPEG. А вот для картинок, состоящих из простых геометрических фигур, лучше использовать векторный формат SVG (он нередко применяется для создания логотипов).

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

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

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

3. Сжатие картинок. После того, как изображения соответствующим образом подготовлены, в том числе оптимизированы их размеры по ширине (width) и высоте (height) в пикселах, самое время уменьшить их размер в байтах (что это?), который во избежание путаницы вполне можно именовать «весом», хотя это и не совсем корректно.

Минимизация веса графики, включая фотографии, и является по своей сути процессом сжатия, который можно осуществить с помощью специализированных средств (онлайн сервисов либо программ). В этом плане мне давно уже приглянулся сайт PunyPNG, в котором лучше всего сжимать графические файлы в формате PNG (хотя JPEG и GIF там тоже поддерживаются):

Жмете кнопку «Upload Images» для загрузки одного или нескольких файлов и спустя мгновения уже получите результат. На скриншоте видно, что подвергнутые стандартной компрессии (без потери качества) изображения сжаты весьма эффективно (на 38 и 39 процентов).

Обратите внимание, что наряду с ними PunyPNG выдал образцы, подвергнувшиеся сжатию с потерями (lossy), вес которых меньше веса оригинала в 3 раза и даже больше (на 63% и 71%). При этом совсем необязательно, что их итоговое качество при визуальном восприятии окажется заметно хуже по сравнению с картинками, сжатыми без потерь.

В любом случае, вы вольны скачать полученные файлы выборочно (кнопки «Download» напротив каждого файла) либо все разом в уже упакованном архиве ZIP для визуальной оценки. Правда, имейте ввиду, что сжатые с потерями изображения доступны для скачивания только после регистрации и последующего приобретения одного из платных тарифов (надпись «PRO ONLY»).

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

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

Можно, например, поступить следующим образом. Создать нужную картинку в Pixlr, предварительно сохранить ее в нужном формате (как его выбрать, описано в пункте 2), а затем применить возможности программы FastStone Image Viewer и сжать до оптимальных кондиций.

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

4. Указание реальных размеров изображения. Оптимизация картинок непременно включает и это условие в том числе. Добавляя атрибуты widht и height при вставке картинки в HTML код страницы, обязательно указывайте их действительные значения.

Скажем, если размер фотографии 550 × 300 после завершения всех шагов оптимизации и в таком виде она загружена на хостинг, то параметры ширины и высоты должны быть соответствующими:

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

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

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

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

Выполнение рекомендаций PageSpeed по сжатию картинок

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

В самом верху страницы анализа Пейдж Спид выводит оценку общего уровня оптимизации по 100-бальной шкале. Данная веб-страничка изначально получила всего 62 балла из 100 для мобильных устройств (вы можете в этом убедиться, если, перейдя по данной выше ссылке, ознакомитесь с материалом о PageSpeed Insights, в котором есть соответствующий скриншот).

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

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

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

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

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

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

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

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

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

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

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

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

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

//goldbusinessnet.com/wp-content/uploads/2012/06/optimizatciia-izobrazhenii.jpg

Если у вас такая же ситуация, то поступать надо следующим образом. Взяли группу файлов из одной поддиректори (/2012/06/) и, загрузили на сервис, сжали их и вновь закачали туда же, заменив оригиналы. Затем процесс повторяется для другой подпапки и т.д.

Но, если файлов слишком много, вполне разумно будет зарегистрироваться на сайте PunyPNG и сделать апгрейд до нужного вам тарифа. Тарифный план Basic, например, облегчит ваш карман всего на 1 доллар в месяц, но зато позволит за тот же период подвергнуть качественной компрессии 3000 графических файлов. Более того, у вас появится возможность сжать их как с потерями, так и без потерь.

Другой способ осуществить пакетное сжатие — призвать на помощь ПО, установленное на компьютере. В качестве примера могу предложить тот же самый FastStone (ссылка на материал о нем в предыдущем разделе статьи), приглянувшийся мне еще и потому, что с помощью этой программы я делаю скриншоты для статей.

Чтобы провести операцию массового сжатия графических файлов, перейдите в нужную папку, где они располагаются, в верхнем меню нажмите «Сервис»:

Затем из контекстного меню выберите пункт «Пакетное преобразование/переименование», после чего откроется дополнительное окно с настройками, где следует открыть вкладку «Пакетное преобразование»:

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

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

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

Наверное, ради разнообразия следует еще добавить парочку плагинов для WordPress, которые помогают оптимизировать уже имеющиеся изображения на сайте:

  • WP Smush.it — сжимает картинки, находящиеся в любом каталоге, имеет совместимость практически со всеми медиа-библиотеками;
  • EWWW Image Optimizer. Основные преимущества: автоматическая оптимизация фона, плавная обработка пикселов, наилучшее соотношение «сжатие — качество», высокий уровень безопасности, хранение бесплатных оригиналов в течении 30 дней;

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

Поделиться с друзьями
Игорь Горнов

Создатель и администратор сайта Goldbusinessnet.com. Участник нескольких успешных проектов и автор более 1000 статей о работе в интернете, создании сайтов, полезных программах и сервисах.

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

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

  1. Дора

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

    Ответить
  2. ZD

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

    Ответить
  3. Лиора

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

    Ответить
  4. Айк

    А как оптимизировать 40.000 изображений которые на сайте уже,кто знает хороший плагин?

    21 век на дворе,нужно автоматизировать процесс сжатия,а не оптимизировать каждое изображение по отдельности.
    Загрузил на сайт-плагин оптимизировал и все -автоматизировать,не все нужно руками делать,цените время друзья !

    Ответить
  5. Светлана

    Игорь, а вот и не потребовалась ссылочка.
    Я просто нажала заветную клавушу с горяча переустановить и вот оно чудо, маленькое но чудо — все заработало!!!!
    Вам за ваше время и внимание -от всей души желаю процветания и благополучия!!!!!

    Ответить
    1. Игорь Горнов автор

      Светлана, Вы даже представляете, насколько я рад за Вас! 🙂

      Ответить
  6. Светлана

    Игорь, благодарю за столь быстрый ответ. Ссылочкой воспользуюсь обязательно.
    Проблема в том, что я не помню точно когда конкретно возникла данная проблема.
    Всё началось с того, что сайт стал очень большим. Я подумала, что за три-то года может это и нормально. И просто поменяла тариф на побольше. Но когда дня через три и его не стало хватать, тут я плотненько села за изучение вопроса внутренней оптимизации. Так вот на Ваш сайт и попала, большое Вам спасибо!!!
    И статьи в это время не писала. только неделю назад заметила, что картинки из статей частично исчезли а поправить я это не могу, поскольку чудова библиотека у меня скрыта.
    На форумах все что нашла выполнила поочередно. Тех поддержка хостинга поочередно отключила мне все плагины и проделала еще какие-то манипуляции и сообщив, что при проверке сайта ошибки в отработке скриптов или некорректного результата их обработки не обнаружена. Само удалились.
    Пробовала ставить стандартную тему результат прежний -0.
    Откатила на семь дней назад, опять ничего.
    Пробовала дописать что-то в коде, не помогло вернула все обратно. Так что теперь видимо мне одна дорога на форум.
    Если вдруг еще чего сможете посоветовать, буду очень рада.

    Ответить
  7. Светлана

    Еще немного поясню. Загружать могу вставлять миниатюры и в текст не могу.

    Ответить
    1. Игорь Горнов автор

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

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

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

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

      https://ru.forums.wordpress.org/forum/how-to-and-troubleshooting

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

      Ответить
  8. Светлана

    Игорь, если у Вас будет время, может поможете разобраться уже неделю мучаюсь. Начала оптимизировать сайт, с помощью Ваших статей. И тут дошла до картинок и поняла, что все приехали. Библиотека медиа файлов пуста. Нет так то там более 500 файлов но входя в нее через панель администратора там пусто. Только предлагает добавить новый файл.
    Не встречались с таким? Все новые плагины уже деактивировала — их всего-то 2 было, но результат 0.
    Сказали может закралась ошибка в файл htaccess. Убрала, не помогло, снова вернула.
    Может есть от этой беды напасти спасение?
    Заранее спасибо, вордпресс 4.2.2

    Ответить
  9. Сергей

    Здравствуйте! Очень полезный у Вас блог!
    Мы только начинаем продвигать свой сайт. Я новичок.
    так вот, в теге тайтл я пишу то, как будет выглядеть всплывающее название при наведении курсора.
    А в теге alt могу ли я прописать через запятую ключевые слова либо мне это нужно вместить в одно предложение? К примеру, достопримечательности, Минск, Беларусь, собор либо по иному..?

    Ответить
    1. Игорь Горнов автор

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

      Ответить
  10. Лия Сорока

    Очень интересная информация. У меня молодой блог, мне все это полезно. Откуда берутся alt2 и alt3? Это когда картинок много в статье?
    Правильно ли я поняла, что название заголовка и alt должны быть разными?
    Наталья выше писала о том, что перед загрузкой на сайт картинки переименовывает — насколько это важно? Я как-то даже об этом и не думала — просто загружала и не смотрела на то, как называется файл. Так картинку действительно нужно переименовывать?
    Сейчас посмотрела, есть картинка, которую вообще зовут «без имени».

    Ответить
    1. Игорь Горнов автор

      Лия, видимо, ALT2 и ALT3 дополнительные атрибуты, они никак не зависят от количества изображений. Я, например, использую только атрибут ALT и то дозирую его применение, если в статье много изображений. Излишнее их употребление может привести к спаму ключевыми словами и, соответственно, санкциям со стороны поисковых систем.

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

      Ответить
  11. Валерий

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

    Ответить
    1. Игорь Горнов автор

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

      Ответить
  12. Наталья

    Большое спасибо!

    Ответить
  13. Наталья

    А что значит «если у Вас картинок в статье немного»? если у меня бывает 3-4 картинки на статью от 3000 до 5000 знаков? как определить это считается много или нет? И еще, если я правильно поняла, то когда пишешь название картинки еще на компьютере, то лучше использовать КС в неточном вхождении, но с «хвостом» или без него. Я приводила пример в предыдущем сообщении (писать в названии «ваш дом» или «ваш дом у дороги», если КС у меня «ваш дом» и картинок под это слово 3)? И тайтлы на картинках лучше убрать? но при наведении на картинку не будет всплывающего названия, это нормально?

    Ответить
    1. Игорь Горнов автор

      Наталья, в Вашем случае, когда 3-4 картинки на статью, использование ALT и Title вполне нормально. Просто я Вас хотел предостеречь в том случае, если вдруг у Вас появятся супер объемные статьи. У меня, например, есть такие посты, включающие 2500 слов и более (именно слов, а не знаков) с 20-30 скриншотами и картинками, вот в этом случае надо быть осторожным. Действительно, КС лучше разбавлять, Вы все правильно поняли. «Ваш дом» можно использовать 3-4 раза, думаю, это не смертельно.

      Ответить
  14. Наталья

    Добрый день, Игорь. Подскажите, пожалуйста, как все таки правильно заполнять title и alt если в статье с одним ключевым словом используются 2 и больше картинок? я делаю следующим образом, например КС «ваш дом» картинок 3, в тайтле этих картинок я пишу «ваш дом», в альте 1 «ваш дом по фен-шуй», в альте 2 «ваш дом музыка ветра», в альте 3 «ваш дом у дороги». Называю картинки перед тем как загрузить на сайт соответственно альту, но на латинице и через транскрипцию (например, vash-dom-y-dorogi.jpg) Правильно ли это?

    Ответить
    1. Игорь Горнов автор

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

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

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

      Ответить
  15. Василий

    ну точнее конечно не правильно я сказал про отключение картинок из-за интернета — это как раз альт тогда показывается, но суть прежняя — тайтл не сильно нужен (кому вот надо наводить на картинку, чтобы прочитать подпись к ней?), а альт наоборот…

    Ответить
    1. Игорь Горнов автор

      Василий, Вы правильно мыслите и в нужном направлении. Но дело в том, что SEO оптимизация дело непростое и каждому ресурсу требуется индивидуальный подход. Я пишу для начинающих и для вебмастеров, в большинстве своем имеющих стандартные блоги Вордпресс, на которых умеренное количество контента с изображениями и все написанное справедливо. ALT позволяет продвигать ресурс по картинкам, поэтому должен включать в себя КС, по которым продвигается статья. Однако, в моем случае после некоторого анализа своего блога я пришел к выводу, что по причине большого количества изображений в некоторых из постов я слишком близко подхожу к переспаму ключевиками, ведь поисковые системы учитывают не только КС в теле статьи, но и в содержании ALT и TITLE! В целях уменьшения содержания ключевых слов мне пришлось начать производить титаническую работу и начать ликвидировать вообще тег TITLE к некоторым картинкам, а в теге ALT использовать поменьше прямых вхождений по продвигаемым запросам. До этой статьи еще пока руки не дошли, хотя здесь тоже собираюсь редактировать. В конце добавлю, что хотя положительное влияние TITLE для продвижения сомнительно, навредить он может прилично по выше названной причине, если сильно увлекаться использованием в его составе КС. Надеюсь, я доходчиво объяснил.

      Ответить
      1. Василий

        Спасибо за ценный ответ!

        Я вчера как раз озадачился вопросом чего делать с этими атрибутами и в итоге определил для себя следующую технологию —

        1. установил плагин WordPress SEO For Image (там в отличие от Seo Friendly Images поддерживается кириллица, правда я в итоге решил отказаться от использования слов вроде «фото», поэтому кириллица роли не играет:)
        2. там для альта оставил дефолтную настройку %name %title — то есть в альт записывается название файла и тайтл поста
        3. для тайтла тоже оставил дефолтную настройку %name
        4.%name, то бишь название изображения делать так. Допустим, статья называется «вязаные платья», а на фото вязаное платье Chanel — %name делаю «Chanel» и в итоге имею альт «Chanel Вязаные платья», а тайтл «Chanel» — пользователь догадается что это платье из заголовка статьи

        5. если следовать вашей логике, то таким макаром образуется дикая переоптимизация, особенно если будет слайдер с 5 платьями у которых будет отличаться порядковый номер «»Chanel Вязаные платья 1,2,3…»
        6. то бишь, если есть желание заморочиться с автоматикой — то тайтл нужно вообще убирать, а из альта убирать тайтл поста и оставлять только название…
        6. таким образом, вопрос встаёт ребром из-за момента — действительно ли ПС считают ключевики в этих атрибутах стоящими внимания и могут пессимизировать за переоптимизацию или это не так… у Деваки есть пост на эту тему http://devaka.ru/articles/alt-title-linkjuice 2009 года правда — он о том, что на тайтл ПС вообще не смотрят

        7. знаменателен кстати тот факт, что WordPress с версии 3.5 решили отказаться от автовставки title при загрузке медиафайла, только ручками можно прописать и плагинами — уж наверное ни с проста, видимо они считают этот атрибут абсолютно ненужным

        8. короче я не знаю, что теперь делать… мысль только одна — тестирование, в одних постах сделать как описано в технологии выше, в других — отказаться от тайтла, а в альт вставлять только %name. а у вас, кстати, есть какая-то статистика по появлению в сервисах картинок в зависимости от технологии?

        Ответить
        1. Василий

          а ну собсно глянул ваш последний пост — у вас так и сделано — тайтла нет, а в альте название картинки… 🙂 не подскажите, кстати, три момента —

          1. вот у вас название картинки по-русски, но в английском алфавите — у вас изначально картинки в транслите, или при загрузке в WP транслитерируются?

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

          3. чисто технический момент — вот у вас в посте обычно много картинок — каким образом вы их сортируете в нужном порядке — просто добавляете по мере написания поста? а не бывает так, что пост написан и нужно найти картинки — набиваешь их в папку, а потом не знаешь в каком порядке вставлять? просто для меня кажется логичным нумеровать их — и в папке они расположатся по порядку, но тогда альт станет некрасивым, если в альт транслировать название картинки… короче загоняюсь я по-полной… 🙂

          Ответить
          1. Игорь Горнов автор

            Отвечаю по пунктам.
            1. Пользуюсь транслитератором при проставлении названия изображения перед загрузкой на сервер.
            2. Собственно, Вы правы и в какой-то мере это просто закостенелая привычка.
            3. Ну, Василий, Вы такой же перфекционист как и я, стремитесь к идеалу и совершенству, но я пока до такого не дошел пока. Вы правы, я вставляю картинки по мере написания поста, используя программу FastStone Image Viewer, в которой, кстати, сразу их и оптимизирую, сжимая без потери качества, очень удобно и не занимает много времени. Я не путаюсь в картинках, потому что в теле статей обычно использую скриншоты, которые создаю опять же в ходе написания статьи все в той же программе FastStone.

        2. Игорь Горнов автор

          Ого, Василий, Вы здорово копаете, мне это нравится. Такие комментарии идут на пользу всем и заставляют думать и анализировать. И Ваши рассуждения не безинтересные. К сожалению, таких блоггеров как Devaka, очень мало в сети, но это легко объяснимо. И Вас я в будущем вижу таим же. 🙂
          К слову, его пост, приведенный Вами в качестве примера вполне актуален и сейчас, хотя основные правила SEO и подвержены постоянным изменениям. С его экспериментами я тоже знаком, но все-таки принимаю решение сам на основании многих составляющих. А Ваше тестирование очень интересно, кстати, это может быть отличной темой для поста. Надо сказать, что нам, вебмастерам, на роду написано экспериментировать. В SEO не может быть раз и навсегда застывших универсальных моделей, все постигается опытным путем. Ведь многое зависит от направленности и тематики ресурса, от структуры сайта и еще многих вещей. Я стараюсь, например, писать материал, так сказать, для стандартных блогов Вордпресс, но даже здесь есть куча нюансов. Что касается 5 пункта, например, то да, по моему мнению, будет переоптимизация, но для нормального блога. Однако, если это какой-то интернет-магазин, то это уже другая история, мне кажется, поисковые системы учитывают направленность ресурсов. Видите, как все непросто. 🙂 Однако спасибо еще раз за комментарий, такие сообщения мне очень нравятся.

          Ответить
          1. Василий

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

            спасибо за ответы, очень приятно когда блоггеры дают столь подробные ответы, я уж привык, что меня динамят при попытке докопаться до истины 🙂 что ж, будем эксперементировать…

          2. Игорь Горнов автор

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

  16. Василий

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

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

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

    В чём логика? Может я чего-то не понимаю?..

    Ответить
  17. Светлана

    Игорь, спасибо большое за ответ!
    Да, Вы совершенно правы, ссылка создается, но она у меня не прописывается в окне, где задается по порядку Заголовок, Текст, Подпись, Описание и Ссылка.
    Графа «Ссылка» у меня остается пустая.
    Таким образом, если, к примеру, в Вашем этом посте навести курсор на картинку и нажать на нее левой кнопкой мышки, то попадаешь в рубрику «Оптимизация изображений». Это и логично, потому что статья про оптимизацию изображений.
    Теперь попробуйте кликнуть левой мышкой на картинку в моих публикациях, к примеру здесь: http://www.rakneprigovor.ru/rak-predstatelnoj-zhelezy-vashi-realnye-istorii
    (не сочтите за спам или можете удалить ссылку…)
    Как видите никаких переходов нет, потому что я не прописала ссылку.
    Надеюсь, что понятно объяснила.
    Так вот, мой вопрос: насколько важно прописывать эту ссылку, считается ли это внутренней перелинковкой?

    Ответить
    1. Игорь Горнов автор

      Да нет, Светлана, у Вас все в порядке. Для перелинковки важно наличие ссылки, по которой осуществляется переход к сопряженным материалам Вашего ресурса, а для изображений наличие значений атрибутов title (необходим для оптимизации поиска по картинкам), width и height (ширина и высота изображений, они очень важны для оптимизации скорости загрузки вебстраницы). Я проверил, они у Вас в наличии, так что не беспокойтесь.

      Ответить
  18. Светлана

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

    Ответить
    1. Игорь Горнов автор

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

      Ответить