Оптимизация картинок

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

Роль картинок на сайте.

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

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

Что такое  оптимизация картинок

Каждое изображение, загруженное на сайт, занимает определенное место на сервере. Чем оно больше, тем больше места занимает. Если изображений много, то и места на сервере они занимают очень много.

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

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

С чего начинается  оптимизация картинок

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

У меня пока нет окончательного решения, как поступать правильно, приходится, что то изобретать. Временно решил вопрос таким образом: После загрузки всех картинок для статьи захожу в папку content => upload и лишнее просто удаляю. Занимает время две три минуты. Можно использовать, для этой цели, ftp-клиент текстового редактора Notpade++.

Форматы файлов с картинками

Графические приложения позволяют сохранять изображения в различных форматах файлов. Наиболее часто используемые форматы файлов JPEG, PNG,GIF.

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

Инструменты для оптимизации картинок

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

Для блогера, по крайней мере для новичка, важна одна единственная функция: пункт меню файл => сохранить для Web и устройств или клавиши Shift+Ctrl+Alt+SРабота с картинкой в фотошопе

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

Это верхняя правая часть открывшегося окна. Здесь можно выбрать формат файла, в котором картинка сохранится GIF, JPEG, и PNG 8 или PNG 24. Можно также указать желаемое качество: низкое, среднее, высокое, очень высокое и наилучшее. Как выглядит оптимизированная картинка можно посмотреть в левойОптимизация картинок в фотошопе

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

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

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

Программу Riot, чисто случайно, нашел на сайте русификация программ, помощь и обучение. Кстати очень полезный сайт, там много чего интересного есть, но для того, чтобы иметь возможность скачать, надо зарегистрироваться. Такие правила. Что она из себя представляет — на скриншоте ниже. Как на мой взгляд,Оптимизация картинок в программе Riot вполне достойная программа. Интерфейс интуитивно понятен. Задача у нее одна — оптимизация картинок для сайтов, а поэтому и функционал программы, конечно, куда как меньше, чем в фотошопе. Отредактировать изображение не получится. Единственное, что можно сделать — изменить размер.

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

Заполнение атрибутов alt и title

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

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

Для меня так и осталось непонятным как писать атрибут alt. Если он для поисковиков, то напрашивается вывод — латиницей. Что касается title, то кирилицей, поскольку блог для русскоязычных пользователей. Этим вопросом надо еще позаниматься.

На этом все! Удачи.

 

 

 

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

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