Урок 43. Оптимизация картинок для web и поисковых систем.

Последнее изменение поста: Декабрь 16, 2016

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

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

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

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

Переходите по этой ссылке: , нажимаете "UPLOADER", потом "Select Files And Smush". Появится окошко, в котором нужно выбрать графические файлы на Вашем компьютере и кликнуть "Открыть". Для компрессии можно выбирать много файлов. После того, как картинки будут обработаны, надо нажать "Download Smushed Images", и сохранить эти картинки на свой компьютер. Думаю, что многим этот сервис понравится.

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

Хочу Вам предложить еще один сервис "KRACEN", где можно так же загружать сразу много фотографий для оптимизации. Чтобы ознакомиться с этим сервисом, перейдите по этой ссылке: http://kraken.io/. Там Вы можете установить дополнительные плагины для браузера. На панели Вашего браузера появится дополнительная кнопка, нажав на которую Вы перейдете на этот сервис. Щелкните по верхней кнопке "Image Optimzer plugin for Firefox", если желаете установить плагин на браузер "Mozilla Firefox", или по нижней, если хотите установить на "Google Chrome".

Оптимизация картинок.На сервисе Вы можете оптимизировать следующие графические файлы: PNG, JPEG and GIF. После компрессии файлов они не теряют своего качества. Жмите вверху "IMAGE OPTIMIZER", если у Вас еще не выбрано. Потом Вы можете выбрать режим сжатия "ADVANCED" или "EXTREME"Оптимизация картинок.

  1. ADVANCED - Сжатие картинок по умолчанию (высокая скорость сжатия).
  2. EXTREME - Максимальное сжатие (сжатие происходит медленнее)

Ниже кликайте на оранжевую кнопку "Select files from disk" и выбирайте картинки, которые Вы собираетесь сжать. Если Вы хотите сжать много картинок, то выделите мышкой все графические файлы и нажмите "Открыть".

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

Так же Вы можете перетаскивать файлы из папки на Вашем компьютере в окно "Drag'n drop files here".

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

  1. Оптимизация картинок.Скачать все файлы одним архивом.
  2. Скачать отдельно выбранный файл. Для этого нужно напротив каждого файла кликнуть "Download this file".

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

У Вас, наверное, давно зародился вопрос: так как же эти картинки можно оптимизировать на блоге, если здесь идет речь об оптимизацию файлов с компьютера?

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

У меня папки с картинками находятся по следующему адресу.../public_html/wp-content/uploads/папки с картинками

Я эти сервисом никогда не пользуюсь, потому что сжимает он изображения не сильно, а для меня скорость загрузки страницы очень важна. Пользуюсь я Photoshop-ом, потому что картинку в 1.3 мб. можно уменьшить до 50-60 кб с потерей качества конечно. Качество и компрессию там можно регулировать, а в онлайн сервисе нет.

Единственный минус, это то, что в Photoshop-е нельзя делать пакетную компрессию

Оптимизация картинок под поисковые системы

  1. Обязательно заполняйте в картинках тег (alt.) и (title). Вписывайте в эти теги ключевое слово. Ключевые слова должны быть одинаковы в этих тегах.  Ключевые слова должны описывать изображение картинки.
  2. Не вставляйте анимированные изображения.
  3. Название файла картинки должно ассоциироваться с изображением, и содержать только латинские буквы, например: Uznai_kak_ne_napryagayas'_zarabotyvat'_v_Internete. Слова в имени файла соединяйте или тире или нижним подчеркиванием.
  4. Не добавляете картинки в gif формате.

___________________________
К Уроку 44. Создание логотипа on-line

Получайте свежие статьи на свою почту

Поделиться статьей с друзьями


14 Comments

  1. Юрий, Спасибо, у меня как раз была проблема долгой загрузки моего сайта, до Вашей статьи и не планировала разбираться с этим вопросом. Осталось только внимательно разобраться с использованием этого сервиса от Yahoo и вперед! и с песней)))

    Татьяна
    • Татьяна, на скорость загрузки влияют не только картинки 🙂

  2. Хм, не знал, что название картинки нужно писать латинскими буквами. Все время писал исключительно на русском. Это очень важно? ❓

    Семенов Алексей
    • Название картинки и нужно писать на русском языке. Латинскими буквами нужно писать имена графических файлов.

      • Вроде разобрался, спасибо вам 🙂

        Семенов Алексей
  3. Программой Riot (бесплатная) быстрее, проще и уровень сжатия выше, а за информацию спасибо.

    aleksandr
    • Спасибо, Александр. Надо будет попробовать.

  4. А чем gif-формат не подходит? Довольно популярный и часто, встречающийся.

    • Gif-формат поисковые системы могут принять за баннер. но я в этом на 100 процентов не уверен.

  5. А я меняю размер картинок просто в ACDSee, тоже можно и обрезать и просто “полегче ” сделать

    Татьяна Чернова
  6. Есть бесплатные программы, которые позволяют уменьшить размер картинок пакетно, FastStone Photo resizer например, и масса других. И возможностей у них намного больше, чем на онлайн-сервисах.

    Что касается оптимизации под поиск, то вы совсем мало внимания этому уделили, непонятно название статьи. А вопрос на самом деле не тривиальный, вертикальный поиск по изображениям до 30% трафика может давать…

    Дмитрий
  7. Самый лучший онлайн сервис, сжимающий JPEG файлы, который существует на данный момент – это однозначно http://CompressJPG.com (а для PNG файлов –

    Aime
  8. У меня файлы картинок подписаны по русски, может из за этого все ссылки на изображения быть битыми?

    Наталия
    • Не могу точно сказать, но мне кажется, что из-за этого ссылки не могут быть битыми.