Оптимизация изображений для сайта (группы, блога).

Оптимизируем картинки.

личный блог за 1 час

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

Зачем это нужно? А затем, что любые медиафайлы в своем первичном состоянии являются довольно «тяжёлыми» для размещения на каком-либо ресурсе без соответствующей обработки.

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


Обработка оффлайн.

Для обработки изображений на компьютере я лично использую два способа, т.е. две программы (по настроению) — это Paint.net и Photoshop (ссылки на скачивание программ смотрите в конце статьи).

Уменьшение размеров с помощью Paint.net.

Запускаем программу. В левом верхнем углу ищем значок «Открыть».

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

В открывшемся окне ищем нужное изображение. Жмём «Открыть».

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

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

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

В верхней части окна указан объём картинки, который меняется в зависимости от размера.

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

После установки нужных размеров жмем «Ок».

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

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

Первый этап оптимизации окончен.

Уменьшение размеров с помощью Photoshop.

Запускаем программу.

Через «Файл» и «Открыть» открываем нужное нам изображение.

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

После того, как картинка загрузится, снова переходим во вкладку «Файл». В открывшемся меню жмём пункт «Сохранить для Web».

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

В открывшемся новом окне в первую очередь выставляем формат JPEG.

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

Далее выбираем качество изображения. Выставляем «Очень высокий» как на скрине.

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

Затем в нижней части окна изменяем ширину и высоту. Для сохранения пропорций нажимаем значок скрепки.

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

В левой части отображается формат и размер изображения.

После получения нужных результатов жмём «Сохранить».

В открывшемся окне значение «Формат» выставляем «Только изображения», кликаем «Сохранить».

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

Этап оптимизации через программу Photoshop подошел к концу.


Онлайн-сервисы.

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

Compresspng.com

В верхней части окна можно выбрать язык. Ниже — краткая инструкция. Ещё ниже и правее — выбор формата обрабатываемого изображения.

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

Жмём кнопку «Загрузить», выбираем нужный файл. Обработка произойдёт автоматически.

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

После обработки скачиваем файлы либо по отдельности, либо с помощью кнопки «Скачать все». Во втором варианте файлы скачиваются архивом.

Tinypng.com

Процедура сжатия на данном сервисе происходит по аналогии с предыдущим.

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


Авторский вывод.

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

На этом всё.

Желаю удачи и достойных заработков!

С уважением, Владимир Новиков.


Программа Paint.net: СКАЧАТЬ >>>

Программа Photoshop: СКАЧАТЬ >>>

Сервис Compresspng.com: ПЕРЕЙТИ >>>

Сервис Tinypng.com: ПЕРЕЙТИ >>>


создание лендинга