ОПТИМИЗИРОВАТЬ КАРТИНКИ ДЛЯ САЙТА

Всем привет!

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

ДЛЯ ЧЕГО ОПТИМИЗИРОВАТЬ КАРТИНКИ ДЛЯ САЙТА?

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

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

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

Что касается роботов, то они вообще не индексируют такие сайты, и случится так, что кроме Вас, на сайт ни кто не сможет зайти.

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

КАК ПРАВИЛЬНО ОПТИМИЗИРОВАТЬ КАРТИНКИ ДЛЯ САЙТА.

Как это сделать просто и максимально эффективно?

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

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

Прежде всего, открываем редактор Adobe Photoshop. Вверху слева выбираем кнопку «Файл», в открывшемся окне нажимаем «Открыть»,

Показано на картинке ниже:

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

 

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

Для уменьшения «веса» картинки в килобайтах, снова заходим в меню «Файл» и выбираем уже строку «Сохранить для WEB», обязательно именно эту строчку. У нас откроется окно как ниже на картинке:

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

Мы можем видеть, что эта процедура нам уменьшила изображение по объему больше чем в два раза (показано стрелкой внизу слева).

Если нужно, уменьшаем размер картинки по ширине. Показано стрелкой внизу справа (для сайтов, в текст статьи, подходят картинки с шириной не больше 550-600 пикселей).

Уменьшаем ширину в графе «ширина» до нужного размера(550-600рх), высота у нас установится автоматически пропорционально ширине. И смотрим, чтобы формат изображения был обязательно JPEG. Показано на картинке вверху справа.

После этого жмем «Сохранить», получаем нашу картинку на рабочий стол, уже с уменьшенными параметрами. Но это еще не все. Мы можем еще уменьшить «вес» этой картинки без ухудшения качества, если воспользуемся онлайн сервисом  http://optimizilla.com/ru.

Этот сервис позволяет уменьшить объем картинки еще на 25-45%, оставляя такое же качество. Просто заходите на указанный сайт, и через кнопку «Загрузить» загружаете картинку для окончательной обработки.

После обработки на этом сайте, ниже Вы увидите два варианта, первый «ДО», второй «После». Смотрите картинку ниже:

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

 После этого нажимайте «Скачать», получите архив с картинкой. Распакуете его, и вот Вам окончательный вариант.

В результате всех операций я получил уменьшение первоначального объема в восемь раз. Начальный объем был 350 килобайт, конечный стал 38 килобайт. Мы получили то, что нам нужно.

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

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

 

Вам будет интересна и ЭТА СТАТЬЯ.

Удачи Вам!

С уважением, Валентин Чепурной.

Лучший способ выразить благодарность автору – поделиться с друзьями!

Вы не забыли Поделиться статьей в СоцСетях?

 

 

Отправить ответ

avatar
  Subscribe  
Уведомлять