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

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

В интернете для web несколько популярных форматов, к которым мы обращаемся постоянно.  А именно:

  1.  JPG – Используется этот формат в детализированных изображениях (фотографии, скриншоты и т.д.).
  2.  PNG – Используется для картинок с прозрачным фоном или для нарисованных иллюстраций (кнопки, значки, лого и т.д.).
  3.  GIF – Используется для анимированных изображений и коротких видео (в основном рекламные баннеры и развлекательные картинки).
  4. WEBp – Очень мощный формат, который рекомендует Google, но к сожалению, поддерживается не всеми браузерами.

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

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

Растровый формат JPG (JPEG).(джепег)

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

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

Графический формат PNG. (пээнгэ)

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

Анимированный формат GIF. (гифки)

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

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

Веб формат WEBp. (веб)

Этот формат очень мощный, в плане оптимизации. Но он поддерживается не во всех браузерах, только в (Google, Opera, Android).  Визуально этот формат ничем не отличается от форматов jpg и png. Он поддерживает и детализированные изображения, и картинки с прозрачностью, весит очень мало и прекрасно сжимается. Одним словом – клад для web’а!

Размеры и пропорции картинок.

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

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

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

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

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

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

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

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

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

Читайте ранее:
Несколько способов заработать деньги в одноклассниках.

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

Закрыть