Как массово обрезать и оптимизировать изображения?

Нужна консультация?
Создание сайтов

Более 500 сайтов разработано

Контекстная реклама

Более 500 успешных клиентов

Продвижение сайтов

Более 1000 ключевых слов в ТОП10

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

Однако при создании дизайна, особенно в различных программах типа Photoshop, изображения получаются слишком «тяжелыми» для обработки серверов. Например, если вы такого шаблона создадите собственный сайт, то готовьтесь к тому, что дальше 10-позиции в поисковиках вы не уйдете. Это обусловлено специальными правилами продвижения. Теперь SEO – не просто текстовое насыщение, но и много других факторов.

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

Как быстро работать со множеством изображений?

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

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

Работа с изображениями

Как и говорилось ранее, работать будем с редактором Photoshop. Следовательно, его и нужно открыть. Далее:

  1. перейти во вкладку «Файл»;
  2. из контекстного меню выбрать пунктик «Сценарии»;
  3. зайти в «Обработчик изображений» — область с функциями, которая предназначена исключительно для массовой работы с картинками.

Обработчик изображений

Подготовительный окончен, теперь переходим к этапу №1. Перед вами откроется меню выбранного сценария. На этом действии необходимо непосредственно выбрать папку, где хранятся требуемые изображения. Как это сделать:

  1. нажать на кнопку «Выбрать папку»;
  2. из выпадающего меню выбрать месторасположение необходимой папки:
  3. нажать кнопку «ОК».

Выбрать папку

После этого масштабного этапа нужно указать место, куда будут загружаться изображения после их обработки фотошопом. Для этого, необходимо перейти во второй пункт выпадающего блока «Обработчик изображений». Есть два вариант, как будут хранится картинки. Первый – в той же папке, где были исходники. Второй – в новом месте. Чтобы выбрать подходящий, необходимо:

  1. предварительно создать новую папку (если хотите сохранять картинки в новом месте);
  2. напротив выбранного способа поставить галку: если в той же папке – «Сохранить в том же месте», для нового места – нажать на кнопку «Выбрать папку». В последнем, проделать такие же операции, как и в первом этапе.

Сохранить в том же месте

Следующий шаг – выбрать формат файлов и степень качества. Для этого нужно:

  1. из меню поставить галочку на «Сохранить как JPEG», преобразовать профиль в sRGB, «Сохранить как PSD», «Сохранить как TFT». Первая опция преобразовывает в обычный формат, вторая – в исходник для фотошоп, третья в более «легкий» формат, но с низким качеством. Файлы PSD открываются только в Photoshop, поэтому использовать их в готовых проектах бессмысленно;
  2. в пункте «Качество» поставить цифру в диапазоне от 1 до 12. Наименьшая – плохое качество, а наибольшая – самое лучшее. Но стоит учитывать, что чем лучше качество, тем больше будет «весить» само изображение. Оптимальный показатель 5 – что-то среднее между качеством и «легкостью».

Оптимальный показатель 5

После первичной оптимизации, изображения можно обрезать. При этом, действия применяться абсолютно ко всем картинкам. Как это сделать:

  1. поставить галочку на «Изменить размер»;
  2. указать необходимые параметры ширины и высоты в пикселях.

Выбрать размер

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

Выполнить

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

Как использовать обработанные изображения?

Такие картинки можно со спокойной душой загружать на ваш сайт или в ваше приложение. Благодаря оптимизированным изображениям скорость загрузки проекта PageSpeed Insights вырастет в разы. Это значит, что поисковики будут ранжировать ваш сайт гораздо выше, чем у конкурентов.

При комплексном продвижении контентом и другими средствами вы легко достигнете ТОП 5, а то и вовсе станете лидером по конкретному поисковому запросу. Помимо Photoshop есть и другие средства для массовой работы с изображениями. Однако главное отличие фотошопа – скорость, качество и, конечно же, удобство. Ведь весь необходимый функционал у вас под рукой.

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

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...