Оптимизация картинок для блога
Опубликовано: 02.09.2018
Здравствуйте, друзья. Сегодня, по многочисленным просьбам, я хочу разобрать вопрос уменьшения и обрезки картинок или фотографий, для публикации на блоге. Хотя на эту тему уже много чего написано, опишу весь процесс еще раз, как смогу подробно.
Зачем нужно уменьшать картинки? Просто чтобы страница быстрее загружалась, и сам блог занимал меньше места на хостинге. В одном посте может быть и одна картинка, и десять, и двадцать… Представляете, сколько будет загружаться страница с десятком полноценных фотографий, по 5-10 мегабайт каждая? Десяток таких страниц могут исчерпать лимит дискового пространства на хостинге, даже если он составляет несколько гигабайт. Кроме того, картинки очень быстро множатся – из одного оригинала WordPress автоматически создаёт миниатюры, разные копии различных размеров и т.п.
Оптимизация изображений для сайта - Константин Хмелев
Например, на моем блоге на данный момент всего 67 постов и несколько страниц, а картинок – более 1700 штук! И это только иллюстрации, которых самое большее 5-10 штук в каждом посте. При этом весь объем блога – всего около 130 мегабайт, включая несколько скрытых разделов. Поэтому мне до сих пор хватает дешевого тарифа на хостинге, где выделяется всего 200 мегабайт, а это уже финансовая экономия. Чувствуете силу оптимизации картинок?
Итак, перейдем к делу. На самом деле способов уменьшения веса картинок и их размеров очень много. Это можно делать в любом графическом редакторе, некоторые даже умудряются использовать для этого всем известный Paint. Ну да ладно, рассмотрю несколько самых доступных и простых способов. Но сначала немного теории, чтобы Вы могли заниматься этим осмысленно, а не повторять заученное.
Популярные графические форматы
Картинки бывают разные – я имею в виду их формат, то есть способ, которым они были сохранены. Этот способ можно узнать, посмотрев на расширение файла. Самые популярные из них:
JPG – имеет наименьший размер файла, но может снижаться качество. PNG – отличное качество картинки, но большой размер файла. GIF – может сохранять анимацию, небольшой файл.Эти форматы в основном и используются на сайтах и блогах. Есть, конечно, много разных других, но все они имеют очень большой размер файла, и такие картинки все-равно надо преобразовывать в один из этих трех форматов. Теперь немного расскажу о достоинствах и недостатках каждого из них.
Формат JPG дает наименьший объем файла, даже если это большая фотография. Этот формат используется сейчас чаще всего, в том числе и в фотоаппаратах. Такие файлы легко поддаются оптимизации за счет снижения качества, не заметного для глаза. Поэтому его и будем рассматривать дальше.
Формат PNG может использовать прозрачный фон, поэтому такие картинки надо использовать только там, где нужна эта особенность, в остальных случаях надо использовать формат JPG. Картинки в этом формате довольно “увесистые”, даже если небольшие по размеру. Хотя, если отключить прозрачность и пожертвовать качеством, переведя их в 8-битный цвет, то можно получить очень маленький размер файла. Но так стоит делать только если используется немного цветов, то есть картинка не пестрая.
Формат GIF сегодня потерял свою популярность – из-за низкого качества картинок. В них используется слишком мало цветов, поэтому фотографии в таком формате сохранять глупо. А вот всякие анимированные кнопки, стрелки и прочие “живые” малоцветные элементы делают именно в этом формате. Кроме того, здесь тоже можно использовать прозрачный цвет. Размер файла с такой анимированной кнопкой получается довольно маленький.
Итак, выводы:
Формат JPG используем для обычных иллюстраций, в том числе для вставки фотографий и вообще везде, где нужны полноцветные картинки хорошего качества, но маленького объема.
Формат PNG используем там, где нужна небольшая картинка с прозрачным фоном, например, чтобы наложить ее на пёстрый фон сайта или эта картинка будет смещаться. Кнопки “Вверх” на многих блогах – в этом формате, они выглядят одинаково на любом фоне. у меня Вы можете увидеть такую кнопку внизу справа.
Формат GIF применяем, если надо вставить анимированный элемент – привлекающую внимание стрелку, кнопку или еще что-то. Правда, некоторые настолько обвешивают свои блоги всякими анимированными розочками и прочими глупостями, что в глазах рябит. Постарайтесь не злоупотреблять, все-таки.
Оптимизируем большую фотографию в формате JPG
Дальше речь пойдет только о формате JPG, потому что именно он легко поддается изменениям, и именно такие картинки самые распространенные на сайтах и блогах. Кроме того, они же – самые большие.
Сейчас мы попробуем уменьшить размер файла и обрезать картинку обычными средствами Windows, которые есть практически у каждого, у кого установлен Microsoft Office, а он есть у каждого, кто пишет тексты, в том числе для блога, значит есть и у Вас.
Итак, берем исходное изображение большого размера. Я для примера возьму вот эту фотографию своей дочери, которую я сделал смартфоном.
Размер файла 1.11 Мб, размер самой фотографии – 1920 х 2560 пикселей. Это очень большая фотография, ее надо уменьшить перед тем, как размещать на блоге.
1) Идем в папку, где лежит файл фотографии, находи его и жмем правую кнопку мыши. В появившемся меню выбираем “ Открыть с помощью ” – “ Microsoft Office Picture Manager ”, как на картинке ниже:
2) В верхнем меню нажимаем кнопку “ Изменить рисунки. ..”, как на картинке:
3) Если Вам нужно обрезать на картинке какие-то области, то нужно сделать это сразу. Например, часто надо отсечь какие-то надписи внизу, или лишние участки. Я на фотографии хочу обрезать верхнюю и нижнюю часть. Для этого выберем в правой панели пункт “ Обрезка ”
4) Вокруг фотографии появляется рамка, по углам и по центру каждой стороны. Передвигая границы этой рамки мышкой, а также саму рамку по фотографии, можно точно выбрать тот участок, который нужно оставить. Все, что за пределами рамки, обрежется. Например, я хочу убрать часть сверху и снизу — передвигаю рамку сверху и снизу. В правой панели Вы сможете видеть, какой размер картинки получится. Когда область обрезки выбрана, нажимаем кнопку “ Ок ” в правой панели.
5) Теперь у нас есть фотография, обрезанная как нужно, но она все еще очень большого размера. Уменьшим ее. Для этого снова нажимаем на кнопку “ Изменить рисунки …” вверху, но выбираем пункт “ Изменение размера ”, как на картинке ниже:
6) Дальше у нас есть несколько вариантов действий. Можно выбрать “ Стандартную ширину и высоту ” и из списка выбрать один из нескольких вариантов. Можно указать процент – например 50% сделает нашу фотографию меньше вдвое. Но я всегда устанавливаю свои размеры. Например, ширина моей колонки для поста – чуть больше 650 пикселей, и я обычно вставляю иллюстрации шириной 450 пикселей, по центру. Такую ширину я и укажу. Высота вставляется сама – программа вычисляет ее с учетом пропорций фотографии. После этого жмем кнопку “ Ок ” и фотография уменьшается:
Все, размер картинки уменьшили, где надо – обрезали. На самом деле – не важно, в какой последовательности вы будете обрезать или уменьшать картинку, в разных ситуациях бывает удобнее поступать по разному. Теперь можно сохранить результат и потом вставить в пост на блоге или еще куда-нибудь. Переходим к процессу сохранения.
7) Как обычно, идем в меню “ Файл ” – “ Сохранить как…”
8) В появившемся стандартном окошке выбираем папку, куда надо сохранить фотографию и даем файлу осмысленное название. Название должно быть “человеческим”, а не просто набором цифр, потому что поисковики его тоже читают. В общем, это тоже важно. Пишем название, и нажимаем кнопку “ Сохранить ”:
Все! Вот результат:
Что получилось в итоге? Давайте сравним. Вначале был файл в 1.11 МБ. В результате получился файл в 84.1 кб. Естественно, он будет загружаться гораздо быстрее.
Это самый простой способ, доступный практически каждому. Все делается очень просто и быстро. Но он имеет один недостаток – при сохранении результата в формате JPG нет опции выбора качества изображения. А ведь его можно немного снизить, процентов на 20-30, и это будет практически незаметно, но еще намного уменьшит размер файла, возможно – еще вдвое. В общем, еще есть потенциал в оптимизации. Хотя зачастую вполне достаточно и такого простого способа, особенно, если в посте совсем мало картинок.
В следующем посте опишу еще один отличный способ оптимизации картинок для блога, с помощью бесплатной программы FastStone Image Viewer, что позволит получить конечный файл еще меньшего размера. Чтобы не пропустить этот пост, подписывайтесь на новые публикации !