Блог ☯

четверг, 20 июля 2017 г.

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

Быстренько пробежимся по тому, как нужно оптимизировать изображения в блоггер (blogger / blogspot) и не только, гайд поможет и тем, кто использует другие движки.

Это то, как оптимизирую я сейчас. Данный гайд поможет вам:

  • Ускорить загрузку страниц без сильной потери качества картинок
  • Убрать лишние внешние ссылки
  • Даст дополнительный трафик из поисковиков

Все картинки в blogger загружаются сейчас в альбомные архивы, раньше была такая штука как Picasa. Это закрыли в 2016-ом, и был переход на Google Фото.

Суть от всего этого меняется не сильно.

Вот вроде как ссылка где всё храниться: https://get.google.com/albumarchive

Почитайте это: https://support.google.com/blogger/answer/41641?hl=ru

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

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

Когда мы залили картинку мы можем оптимизировать её, прописав alt / title.

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

Настройки (хотя можно открыть html и написать там)

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

Но в редких случаях вы можете писать это конкретно под изображение. 

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

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

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

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

Я сейчас использую бесплатные картинки, например вот от сюда: https://pixabay.com/

Либо если статья хорошая, то рисую сам.

Если статья например про политику, то я просто пишу серым рядом кто автор картинки:

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

Этого вполне достаточно (упоминание источника), даже ссылку давать не всегда нужно.

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

Как-то так:

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

Мелко написал справа снизу

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

Для защиты лучше писать и поверх всей картинки с помощью прозрачности.

Когда вырезаю картинку из ютуба, пишу вот такое:

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

Снизу название видео, адрес и канал

Короче, упоминание источника это правило хорошего тона, вот и всё. Пусть даже не ссылкой, но надписью оставить источник можно, гугл поймёт что это ссылка.

Далее, есть одна фишка которую знают не все, не знал и я.

Код картинки у вас будет примерно такой:

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

Вначале будет идти ссылка на сервис хранения картинок google, вот её на самом деле можно удалить. Это внешняя ссылка, а вы знаете что внешние ссылки не всегда полезны.

Красным выделил что можно удалить "<a href=...". Не следует это удалять если вы хотите чтобы пользователи могли нажать на картинку и увеличить её, так-как без ссылки такая функция отрубиться, но часто это и не нужно. Вот например в этой картинке где код, наверное стоит оставить возможность увеличения, а в картинках выше я ссылку удалил.

Таким образом у вас картинка начнётся с "<img border=", а сама картинку и её адрес у вас идёт после "src=". Вы могли заметить что адрес дублируется и это могло вас навести на мысли, первый раз - ссылка, второй раз - картинка.

Границы (border) вам пригодятся так-как это определяет её размер, кстати их можно какими угодно там написать, а не только средний размер, большой и т.д.

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

Что еще можно сделать? Можно писать названия изображений с ключевыми словами.

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

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

Это всё может относиться для меня только к моим рисункам и чему-то такому, когда картинка представляет собственную ценность.

Если вам совсем нечего делать, вы можете так-же прописывать настройки картинок в windows, добавлять туда дополнительные параметры:

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

Может быть всё это тоже помогает, но лично я так не делаю

Хочу сказать еще одну важную вещь, сейчас лучший формат картинок это .jpg

Используйте именно его. Он занимает меньше места и сохраняет качество. Он не конфликтует с blogger и чем-то еще, в отличие от некоторых других форматов (.png конфликтует).

Последнее, как уменьшить размер изображений?

Наверное можно как-то по науке, я делаю по тупому. Я вообще почти всё делаю через paint, блокнот и такие старые вещи. Разве что скриншоты делаю с помощью ShareX

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

Вот там внизу вам размер показывают

Размер картинок это важная штука для быстрой загрузки ваших страниц на сайте, они занимат существенное место и могут замедлить загрузку. Вы с удивлением обнаружите, что вот эту картинку кошки можно спокойно сжать в 2 раза, тупо уменьшив размер в пикселях, при этом размер будет не 147, а уже 51 KB.

Уменьшая размер в 2 раза по пикселям, вы уменьшаете вес картинки в 3-4 раза!

Заметьте, такое вам позволяет именно формат .jpg

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

Разницу заметят только они.

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

Как сжать картинку? Я делаю тупо вот так:

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

resize => 100 => 50 %, уменьшит размер в два раза

Про функции графических редакторов можете почитать вот тут:


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

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