Изменить вес картинки: Сжатие изображений онлайн Наилучшее качество и сжатие

Как уменьшить вес фото или картинки без потери качества?

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

Для чего нужно уменьшать вес фото? Это может понадобится по трем причинам:

1. Вы нужно уменьшить вес архива для хранения. Современные фотокамеры, в том числе, камеры в телефонах, имеют высокое качество печати, и как следствие, фотографии имеют большой размер. То есть, фотографии могут иметь размер от десяти и более мегабайт. И если вы фотографируете много, то даже не смотря на большой размер диска компьютера, вскоре у вас не останется места для хранения. Проблема тем более актуальна, если вы храните файлы в облаке или непосредственно в памяти телефона.
2. Вам нужно передать большое количество фоторафий. И опять-таки, если у вас только мобильный интернет, то это может быть проблемой.
3. Ну и наконец, сжатие изображений очень актуально для сайтостроения. Чем больший вес, тем фото дольше будет загружаться с хостинга. А если, например, вставить в пост 20 изображений, которые занимают по 10 Mb? Вы представляете, какая там будет скорость загрузки этой страницы. Человек просто откроет статью, и, не дождавшись пока она загрузиться – закроет ;-).

Каждая поисковая система учитывает при ранжировании скорость загрузки сайта. И ми должны делать все, чтобы наш ресурс просто летал. Для этого я и написал статью: «Как ускорить wordpress блог? 10 фишек для ускорения wordpress», а также вы можете установить P3 Performance Profiler и узнать какой плагин тормозит блог.

Но знать, как уменьшить вес картинки в фотошопе нужно не только тем, кто ведет свои сайты или блоги (что такое блог). Вот, например, вы зашли на какой-либо форум или социальную сеть, зарегистрировались там, и хотите загрузить свое фото. Загружаете, и вдруг неожиданно выскакивает ошибка: «Размер картинки слишком большой :smile:» Но фото загрузить то хочется. Вот сейчас ми и поговорим о том, как уменьшить вес фото.

Два метода уменьшения.

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

Можно уменьшить вес картики в пикселях. То есть, если оригинал изображения у нас был скажем 6000 на 4000, то мы можем обрезать изображение и оставить только нужную нам часть

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

Другой метод, это увеличение сжатия картинки. Дело в том, что есть форматы изображений без потери качества, такие как TIFF, RAW, PSD. А есть и широко используемые: JPG, PNG. (есть и другие форматы, но эти, самые распространенные).

Так вот, вот эти последние, позволяют просто сжать картинку. Причем, вы можете сжать как по пикселям, то есть, «упаковать» картинку размером 6000×4000 в размер 3000×2000 пикселей. Или просто сжать картинку. И таким образом, значительно уменьшить вес картики в байтах.

Фактически, на практике обычно применяют сжатие по количеству пикселей и по степени сжатия.

Сжатие с помощью онлайн сервиса

Вы переходите на сайт squoosh.app и просто перетаскиваете туда изображение.

Таким образом, если оригинальное изображение имело размер 8 мегабайт, то теперь изображение стало весить меньше четырех мегабайт.

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

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

Уменьшение с помощью специальных программ.

У онлайн сервисов есть конечно свои преимущества. В первуо очередь, это легкая доступность. Но есть и свои недостатки: он потребляет трафик, и у него нет системы пакетной обработки.

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

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

Таким образом, программа даёт хорошее соотношение качества изображения, к его размеру.

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

Для начала нужно скачать программу фотошоп и установить себе на компьютер, если у вас еще ее нет. Эта программа просто замечательна, в ней можно делать с картинками все что угодно. Посмотрите, какие я делаю красивые фото в начале статьи. Это все фотошоп. Хотя эта программа платная, но если вы будете хорошо искать, то можете найти и бесплатно ;-). У меня, например, установлена бесплатная версия Adobe CS5.

Скачали, установили. Хорошо. Теперь нам нужно открыть в фотошопе любую картинку. Для этого в левом верхнем углу нажмите Файл – Открыть.

Потом выбирайте нужную вам картинку на компьютеры и нажмите на кнопку «Открыть»

Картинка, которую я загрузил, занимает 2,9 Mb. Ее ширина – 2560, а высота – 1920. Для того чтобы уменьшить вес картинки, можно сначала уменьшить ее размер. Таким образом уменьшиться размер пикселей и соответственно увеличиться качество изображения. Для этого я нажимаю на панели «Изображения» и выбираю «Размер изображения». Ставлю ширину 550, а высота уменьшается пропорционально. Потом нажимаю «Ок»

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

Теперь нам нужно сохранить картинку так, чтобы не потерять ее качество и уменьшить вес. Для этого нажимаем «Файл» в левом верхнем углу и выбираем «Сохранить для web устройств». Выбираем формат JPEG и указываем качество изображения. И здесь, опять же, чем больше качество картинки, тем больший у нее будет вес. Поэтому вы должны выбрать такое качество, при котором внешний вид картинки не ухудшиться, но вес будет минимальный. Экспериментируйте :smile:. Как показывает практика качество изображения лучше всего ставить примерно от 40 до 80. Если ставить меньше, то внешний вид ухудшиться. Ну, а больше 80 также не стоит ставить. Ми же хотим уменьшить вес фото.

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

Таким образом, я уменьшил вес картинки с 2, 9 Мб до 27, 6 КБ. И при этом качество изображения не изменилось. Такие действия я делаю каждый раз перед публикацией статьи. На это у меня уходит несколько секунд, а загрузка страницы увеличивается очень сильно. Также я экономлю место на хостинге.

Уменьшение веса на мобильнике.

Ну а если вам нужно уменьшить вес изображений на мобильнике, то вы для этого, можете использовать приложение Photo Resizer.

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

Вы можете выбрать один из шаблонов размера или же, выбрать свой конечный размер. В этом приложении также есть возможность пакетной обработки. А вот степень непосредственно сжатия, вы не сможете.

Заключение.

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

Поэтому, если у вас есть свое любимое приложение для айфон, напишите об этом в комменатариях. Да и вообще, если есть вопросы или предложения, обращайтесь в комментариях ;-).

Уменьшение размера файла рисунка в Microsoft Office

Сжатие отдельных изображений

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

1. Открыв файл в приложении Microsoft Office, выберите один или несколько рисунков для сжатия.

2. В разделе Работа с рисунками на вкладке Формат в группе Изменение нажмите кнопку Сжать рисунки.

   Если вкладки Работа с рисунками и Формат не отображаются, убедитесь, что рисунок выделен. Дважды щелкните рисунок, чтобы выделить его и открыть вкладку Формат.

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

3. Чтобы выполнить сжатие только для выбранных, а не для всех рисунков в документе, установите флажок Применить только к этому рисунку.

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

4. В разделе Разрешение выберите нужный вариант и нажмите кнопку ОК.

   Щелкните заголовки ниже, чтобы получить дополнительные сведения.

Важно: Этот параметр применяется только к рисункам в текущем документе или в документе, выбранном из списка рядом с разделом Размер и качество изображения. Чтобы использовать его для всех новых документов, нужно выбрать другое значение в раскрывающемся списке.

Обратите внимание на то, что эта функция недоступна в Microsoft Project 2013 или Office 2007.

1. Откройте вкладку Файл.

2. Нажмите кнопку Параметры и выберите пункт Дополнительно.

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

4. Выберите разрешение, которое вы хотите использовать по умолчанию, и нажмите кнопку ОК.

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

Примечание: Эта функция недоступна в Microsoft Project 2013 или Microsoft Project 2016.

1. Откройте вкладку Файл.

2. Нажмите кнопку Параметры и выберите пункт Дополнительно

   .

3. В разделе Размер и качество изображения выберите документ, из которого необходимо удалить данные о редактировании рисунка.

4. В разделе Размер и качество изображения установите флажок Отменить данные редактирования.

Примечание: Этот параметр применяется только к рисункам в текущем документе или в документе, выбранном из списка рядом с разделом Размер и качество изображения.

См. также

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

Редактирование фотографий без использования диспетчера рисунков

Сжатие файлов мультимедиа в презентации

Обрезка рисунка

Отключение сжатия рисунка

Обратная связь

Эта статья была обновлена с помощью Бен на 8/17/2019 в результате ваших замечаний. Если вы нашли ее полезными и, особенно, если вам не понравится, воспользуйтесь элементами управления отзывом, чтобы не отконструктиве идеи о том, как это можно сделать лучше.

Как ужимать картинки без потери качества? 4 лучших способа для ускорения вашего сайта

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

Не грузите полный размер

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

Изображение должно иметь такой размер, с каким оно будет выводиться на странице. Если вам в статье нужна фотография размером 200х200 пикселей, то вариант загрузить её на сайт размером 2000х2000 пикселей и просто уменьшить — не самый оптимальный. Лучше сразу грузите её на сервер размером 200х200 пикселей.

Давайте разберём это на примере. Мне нужна картинка для статьи, и я хочу, чтобы она выводилась размером от одного края текста до другого. Как мне узнать точный размер? 

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

Я захожу на страницу статьи, кликаю по тексту правой кнопкой мыши и выбираю «Исследовать элемент». У пользователей MacOS этот пункт меню называется «Показать программный код страницы». Теперь у нас появляется вот такая вставка с кодом:

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

Теперь мы наводим мышку на нужный нам блок текста и — вуаля! Мы видим его размер. Нам интересна ширина контента, ведь высоту вы можете выбрать уже произвольно.

Теперь вы понимаете, как узнать нужный размер картинки. Не стоит заливать картинки больше требуемого, это будет только перегружать страницу.

5 лучших сервисов для сжатия картинки без потери качества

На установке нужного размера ваши действия не заканчиваются. Следующий пункт — сжатие изображения. Для этого существует масса бесплатных онлайн-сервисов. Например:

Tinypng

Сайт, которым пользуюсь лично я, называется Tinypng. Он совершенно бесплатный. Работает просто: загружаете картинки, а сервис ужимает их в среднем на 60-80% без потери качества. 

Kraken.io

Следующий сервис, который даже популярнее, чем Tinypng, — это Kraken. Тут можно сжимать сразу несколько изображений, загружая ZIP архив или пользуясь импортом из Google диска или с Dropbox.

Compressor.io

Compressor.io — ещё один отличный сервис для сжатия изображений. Возможность массовой загрузки файлов тут отсутствует. Изображения уменьшаются в среднем на 60-80% без потери качества.

Imagecompressor.com

Сервис Imagecompressor.com отличается возможностью регулирования качества изображения. Происходит это обычным ползунком. На сервис можно за раз закинуть до 20 изображений.

Jpeg-optimizer.com

И последний, но не менее важный — Jpeg-optimizer.com. Дизайн может и не самый современный, зато со своими функциями сервис справляется на отлично. Он позволяет точно выставить уровень сжатия. Рекомендую для веб-страниц выставлять значение 80 в пункте «Compress Image».

Помимо сжатия тут можно ещё и сразу изменить размер изображения.

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

Лучшие плагины для оптимизации изображений в WordPress

Теперь мы с нашей фотографией добрались аж до самой консоли сайта. Пусть она пройдёт ещё один фильтр — оптимизацию. В WordPress существует множество плагинов для выполнения этой функции. Сегодня я расскажу вам про лучшие пять:

EWWW Image Optimizer

EWWW Image Optimizer считается одним из лучших плагинов для оптимизации картинок. Он позволяет сделать разовое сжатие всех файлов (например, когда вы только установили плагин на сайт), а также выбирать картинки, которые оптимизироваться не будут. Это будет полезно, например, для сайтов с тематикой фотографии, когда важно не ухудшать качество снимков. Но в целом оптической разницы вы не заметите, зато сайт будет загружаться быстрее.

WP Smush

WPMU DEV предлагает сразу несколько плагинов для ускорения сайта. И WP Smush — часть этой группы. Он занимается сжатием изображений пачками либо в момент их загрузки на сайт. Есть платная и бесплатная версии, в бесплатной можно обрабатывать не более 50 изображений подряд. Поддерживаемые для оптимизации форматы: JPEG, PNG и GIF.

Optimus

Вот такой робот Optimus уменьшает размер изображений на 70%. Но у него есть ограничение — 100 kB. Он работает как с исходными изображениями, так и с только загружающимися на сайт. 

TinyPNG

Бесплатный онлайн-сервис TinyPNG, о котором мы говорили выше, можно установить и в качестве плагина. Он сжимает файлы только форматов JPEG и PNG.

Short Pixel

Главное отличие плагина Short Pixel — возможность обработки PDF-файлов и совместимость с WooCommerce. В остальном он выполняет все те же функции, что и предыдущие сервисы.

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

Настройка lazy loading изображений

Есть ещё один способ ускорения сайтов при помощи оптимизации изображений. Это настройка отложенной или ленивой (lazy) загрузки. Такую функцию использует очень много сайтов. 

Её работа заключается в том, что изображения грузятся не сразу вместе с открытием страницы, а по мере надобности: например, при скроллинге, при клике или в фоновом режиме.

Когда стоит настраивать отложенную загрузку? 

• Если у вас на сайте много изображений.
• Когда картинки — основной контент.
• Когда сайт грузится очень медленно.
• Процент посетителей с мобильных устройств больше 50.

Когда не стоит настраивать отложенную загрузку? Если с изображений идёт хороший трафик. В остальных же случаях это пойдёт сайту только на пользу.

Как сделать отложенную загрузку изображений?

Для этого используется атрибут loading, он задаёт условия загрузки. Он устанавливается как для фотографий с тегом img, так и для медиа с тегом iframe.

Для отложенной загрузки (когда картинка грузится по мере необходимости) мы ставим параметр lazy:

<img src=»image.png» loading=»lazy» alt=»timeweb»>

Вот вы и узнали, как правильно оптимизировать картинки. Теперь они точно не заставят ваш сайт оставаться позади быстрых соперников! Пользуйтесь советами из статьи и ускоряйте свой ресурс. Удачи!

Как увеличить вес фото онлайн

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

Увеличиваем вес фотографии онлайн

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

Способ 1: Croper

В первую очередь рекомендуем обратить ваше внимание на Croper. Данный сервис обладает достаточно широкой функциональностью, позволяющей всячески редактировать и изменять картинки. Он отлично справится и с изменением объема.

Перейти на сайт Croper

1. Находясь на главной странице Croper, откройте всплывающее меню «Файлы» и выберите пункт «Загрузить с диска» или «Загрузить из альбома ВКонтакте».
2. Вы будете перемещены в новое окно, где следует кликнуть на кнопку «Выберите файл».
3. Отметьте необходимые изображения, откройте их и переходите к изменению.
4. В редакторе вас интересует вкладка «Операции». Здесь выберите пункт «Редактировать».
5. Перейдите к изменению размера.
6. Редактируется разрешение путем передвижения ползунка или ручного ввода значений. Не увеличивайте этот параметр слишком сильно, чтобы не потерять качество картинки. По завершении операции щелкните на «Применить».
7. Приступайте к сохранению, выбрав пункт «Сохранить на диск» во всплывающем меню «Файлы».
8. Скачайте все файлы в виде архива или отдельным рисунком.

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

Способ 2: IMGonline

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

Перейти на сайте IMGonline

1. Откройте сайт IMGonline, перейдя по ссылке выше, и нажмите на ссылку «Изменить размер», которая находится на панели сверху.
2. Для начала нужно загрузить файл на сервис.
3. Теперь осуществляется изменение его разрешения. Сделайте это по аналогии с первым способом, введя значения в соответствующие поля. Еще маркером можно отметить сохранение пропорций, резиновое разрешение, что позволит вписать любые значения, или настраиваемую обрезку лишних краев.
4. В дополнительных настройках присутствуют значения интерполяции и DPI. Изменяйте это только в случае надобности, а ознакомиться с понятиями можно на этом же сайте, кликнув на предоставленную в разделе ссылку.
5. Осталось только выбрать подходящий формат и указать качество. Чем лучше оно будет, тем больше станет размер. Учитывайте это перед сохранением.
6. По завершении редактирования кликните на кнопку «ОК».
7. Теперь вам доступно скачивание готового результата.

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

Мы рады, что смогли помочь Вам в решении проблемы.
Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

Помогла ли вам эта статья?

ДА НЕТ

Как уменьшить вес изображений без потери их качества в пакетном режиме

С необходимостью уменьшения размера изображений обычно мы сталкиваемся при работе с веб-приложениями. Функционал сайтов и платформы CMS могут ограничивать размер или вес загружаемых картинок. В этой статье будем рассматривать проблему веса изображений: как сделать так, чтобы картинки весили меньше, при этом не потеряли своё качество? Если нужно уменьшить вес одной-двух картинок, можно воспользоваться любым из бесплатных веб-сервисов, найденных по поисковому запросу «Сжать изображение онлайн». А как уменьшить вес картинок в пакетном режиме – если нам нужно обработать за раз с десяток или более файлов? Далеко не все веб-сервисы предусматривают пакетную обработку данных, тем более бесплатно. Но это можно сделать с помощью Windows-программы FastStone Image Viewer.

Бесплатный функциональный менеджер фото FastStone Image Viewer позволяет проводить множество операций с файлами изображений. Это, в частности, пакетное редактирование, переименование, преобразование форматов, наложение надписей. Программу можно скачать на сайте создателей в обычном и портативном варианте:

Как уменьшить вес изображений с помощью FastStone Image Viewer? В окне программы на панели обзора открываем папку с нужными изображениями. Выделяем картинки, которые необходимо уменьшить в весе. Жмём меню «Сервис», далее — «Преобразовать выбранные».

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

И теперь попадём в настройки сжатия картинок. Здесь уже каждый может сам экспериментировать с любыми конфигурациями и отслеживать результат. Единственное, что можно порекомендовать, исходя из объективности — это не ставить ползунок качества меньше значения 7. По итогу настроек жмём «Ок».

Возвращаемся в окошко настроек пакетного преобразования и жмём «Старт». Если мы через слеш дописывали имя подпапки, жмём «Да» на запрос о создании такой подпапки.

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

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

Инструменты для оптимизации изображений [Обзор]

Нужно оптимизировать вес всех фото на сайте чтобы он быстрее грузился?

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

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

Потребность сжать, обрезать или увеличить картинку может быть вызвана различными причинами:

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

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

Основные требования к изображениям на сайте

Оптимизация проводится по 3 основным параметрам:

1. формат;
2. качество;
3. размер графического файла.

Изучим подробнее каждый из этих пунктов.

Какие бывают форматы изображений

Существует масса различных форматов и типов картинок, фото и т. д. На сегодня самые популярные из них:

• JPEG — формат, применяемый для хранения фотоизображений. Идеальный вариант для web;
• BMP — распространённый вариант для графических файлов. Изображение не сжимается, поэтому имеет большой размер;
• GIF — формат своеобразного мини-видео, live-фото на несколько секунд;
• PNG — популярен среди дизайнеров. Часто имеет прозрачный фон, за счет чего увеличивается вес файла.
• SVG — используют для создания векторных изображений.

Google индексирует все вышеуказанные виды графических файлов, тогда как Яндекс предпочитает работать с JPEG, PNG, GIF.

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

Качество картинок

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

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

Однако при этом картинку не должны портить мутность, блики или пикселизация.

Размер файла

Это понятие можно рассматривать с двух позиций:

• как длину/ширину фото, что измеряется в пикселях (px)
• как вес файла в мегабайтах (Мб)

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

Позже мы рассмотрим программы, которые помогут изменить размер (в Мб), не испортив само изображение.

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

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

Инструменты оптимизации изображений без потери качества

Для удобства пользователей сервисы оптимизации картинок доступны:

• в режиме онлайн,
• в качестве десктопных приложений,
• в виде программного кода, который работает непосредственно на внутри сайта.

Онлайн инструменты

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

TinyJPG

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

За один прием можно загрузить до 20 картинок, вес каждой должен быть не больше 5 Мб. Готовый результат можно скачать или загрузить на Dropbox.

Compressor

Удобный бесплатный сервис, способный сжимать изображения как с потерей (режим Lossy), так и с сохранением качества (Lossless, доступен лишь для форматов JPG и PNG). Сжатие возможно до 90%, однако размер оригинального файла должен быть не больше 10 Мб. Давайте подробнее изучим особенности работы в Compressor.

Как уменьшить вес фото в Compressor:

1. Первым делом выбираем режим, в котором хотим обработать изображение, и загружаем нужный файл.
2. После этого можно скачивать сжатое изображение.

Image.online-convert

Бесплатный конвертер, способный преобразовать больше 120 форматов в любой из двенадцати самых популярных (BMP, EPS, GIF, EXR, ICO, JPG, PNG, SVG, TGA, TIFF, WBMP, WebP).

Как уменьшить размер фото в Image.online-convert:

Бесплатный конвертер, способный преобразовать больше 120 форматов в любой из двенадцати самых популярных (BMP, EPS, GIF, EXR, ICO, JPG, PNG, SVG, TGA, TIFF, WBMP, WebP).

Image.online-convert позволяет в несколько кликов изменить размер файла, а также изменить его формат.

Оптимизация на сервере сайта

У вебмастеров возникает вопрос, как изменить размер фото непосредственно на сайте чтобы их не скачивать и не закачивать обратно.

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

Важно! Приготовьтесь платить на оптимизацию картинок с помощью плагинов. Бесплатно обрабатывается очень маленький объем в рамках сайта.

Большинство подобных инструментов предназначены для сайтов на базе WordPress.

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

Kraken

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

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

Здесь также есть два вида сжатия — Lossy (с потерей качества) и Lossless (режим с сохранением качества).

Как уменьшить вес фото в Kraken:

1. Для начала вам понадобится API Key и API Secret от вашего сайта, чтобы обеспечить связь между плагином и ресурсом. Внести их в указанные строки в настройках. После этого будут загружены данные обо всех изображениях на сайте.
2. После этого можно оптимизировать как каждое отдельное изображение (нажав «Optimize This Image»), так и все файлы сразу (поставив галочку на строчке «File»).

Imagify

Для сайтов на платформе WordPress одним из лучших инструментов является плагин Imagify. Он обрабатывает одновременно все графические файлы на сайте, и при добавлении новых картинок автоматически их оптимизирует. Пользователь может по желанию выбрать один из режимов обработки:

• normal: не допускает потери качества, однако и уменьшение веса происходит незначительное;
• agressif: «золотая» середина для большинства пользователей, поскольку значительно облегчает вес изображений, при этом допуская минимальное снижение качества;
• ultra: максимальное сжатие картинок без сохранения качества.

Как уменьшить вес фото в Imagify

Давайте разберемся, как сжать фото при помощи плагина.

1. Сначала нужно скачать, установить и активировать Imagify, после чего перед вами будет следующая страница:
2. Пройдя все указанные этапы, можете приступать к обработке изображений.
3. Выберите режим для оптимизации, а также дополнительные функции при необходимости.
4. Указав все необходимые настройки, жмите «Сохранить и перейти к Bulk Optimization».

Сама страница оптимизации выглядит следующим образом:

Здесь снова необходимо будет указать режим обработки и запустить ее кнопкой «IMAGIF’EM ALL».

После завершения процесса перед вами откроется следующая страница:

Десктоп-приложения для обработки изображений

Важно!

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

Adobe Photoshop

Всего в несколько кликов он позволяет изменить формат изображения, а также его размеры.

Для этого достаточно открыть программу, загрузить картинку для обработки. Дальше открывается окно с различными опциями. Выбираем на панели инструментов «Изображение» — «Размер изображения».

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

В настройках сохранения файла есть очень важная для оптимизации веса функция — «Сохранить как для web-устройств». Используйте ее для уменьшения веса картинок.

Total Image Converter

Если скромных возможностей Paint не хватает, тогда можно обратить внимание на удобное приложение для оптимизации — Total Image Converter. Преимуществ в этой программы много:

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

Как изменить формат фото в Total Image Converter:

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

Как уменьшить размер фото в Total Image Converter:

• Выбрав фото и формат, нажимаете кнопку «Размер», ставите галочку напротив «Изменить размер» и указываете параметры.

Практическое руководство по сжатию изображений на сайте

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

Все ли в порядке с изображениями на сайте, можно узнать с помощью сервиса Google Page Speed Insights (PSI) или GTMetrix. Возьмем в качестве примера сайт самого большого свадебного салона Москвы – awsalon.ru (магазин большой, платьев много, а фотографий еще больше). Выделим на awsalon.ru несколько типовых страниц, где особенно много фотографий:

Если просматривать не обработанную (работа по оптимизации изображений не проводилась) версию сайта, то показатели следующие (для простоты возьмём данные по desktop-версии страницы):

	Показатель Google Page Speed Insights	Общий размер страницы	Размер изображений на странице	«Лишний» объём после сжатия изображений
Список свадебных платьев	13/100	13,6 Мб	10,8 Мб	4,2 Мб
Карточка свадебного платья	81/100	4,3 Мб	1,5 Мб	0,055 Мб
Главная страница	54/100	6,6 Мб (без видео)	3,6 Мб	0,66 Мб

Определить вес страницы можно с помощью панели разработчика в Google Chrome (через нажатие клавиши F12). В панели разработчика необходимо открыть вкладку «Network» и выбрать тег без фильтрации файлов (метка «All»), далее перезагрузить страницу с очисткой кеша (сочетание клавиш «Ctrl+F5»). Внизу панели разработчика мы получим общий вес загруженной страницы:

Для того, чтобы оценить вес изображений на загруженной странице, достаточно переключится в метку «Img» и перезагрузить страницу с очисткой кеша (Ctrl+F5). Внизу будет указан вес всех изображений и через слеш – полный вес всех файлов на странице.

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

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

Зависимость четко видна в данных таблицы выше: чем меньше можно сжать изображения на странице (карточка свадебного платья), тем лучше показатель PSI — 81, чем больше можно сжать изображения – тем показатель хуже (для главной страницы – всего 13).

Технические аспекты по работе с изображениями

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

Задача #1. Вывод адаптивных / отзывчивых изображений.

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

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

Задача #2. Сжатие изображений путем удаления избыточной информации и других преобразований без потери качества.

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

Некоторые решают обе задачи не совсем верным путём – используют Lazy Load, так называемую «ленивую загрузку». Суть технологии в том, что изображения загружаются по мере прокрутки страницы. Нужно знать, что загрузка при таком подходе происходит через JS-скрипт, и изображение вставляется в тег, отличный от стандартного тега <img>. В результате Яндекс не видит изображений на странице (отечественный поисковик пока плохо справляется с интерпретацией JS-скриптов). Очевидно, что «ленивая загрузка» и SEO-продвижение не совместимы. Поэтому мы не используем подобный подход.

Решение задачи #1. Вывод адаптивных изображений.

Рассмотрим наиболее подходящие решения для загрузки адаптивных изображений с помощью специальных вставок srcset и <picture>:

• Технология вставки адаптивных изображений через параметр srcset в теге <img> подразумевает, что для различных устройств будут подгружаться разные по размеру копии оригинального изображения.

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

• Технология вывода адаптивных изображений через справочный элемент <picture> дополняет вывод отзывчивых изображений через параметр srcset, но имеет некоторые важные дополнения в функционале. Одно из главных – в <picture> Вы сами устанавливаете правила вывода изображений в зависимости от экрана устройства (!) в srcset за Вас решает браузер какую копию изображения использовать.

<Picture> необходим в тех случаях, когда используемые изображения на разных устройствах значительно не пропорциональны. Например, фото платья в версии для ПК имеет прямоугольный формат, а в мобильной версии – квадратный. В таких случаях для корректного вывода фото на разных устройствах подойдет метод вставки через <picture>. В противном случае при использовании только srcset можем получить, что ширина квадратных фото (для мобильной версии) будет удовлетворять правилам выбора браузера для desktop-версии и браузер выведет именно квадратные фото на версиях для ПК, когда нам нужны прямоугольные.

Элемент <picture> не рендерит никакой контент (т.е. не является «реальным» html-тегом), а обозначает лишь дополнительную справочную информацию, дополняющую параметры srcset тега <img>. Пример кода со справочным элементом <picture>:

<picture>
    <source
        media="(min-width: 700px)" <!-- медиа-запросы --> srcset="/images/700.jpg 700w"
       
        type="image/jpg" <!-- формат используемого изображения -->
    >
    <source
        media="(min-width: 320px)" srcset="/images/crop_900.jpg 900w"
       
        type="image/jpg"
    >
<img
    src="/images/1000.jpg" <!-- используемая картинка, если браузер не поддерживает srcset --> srcset="/1000w, /images/1200.jpg 1200w, /images/1600.jpg 1600w" <!-- массив url с дескрипторами -->
    <!-- ваши размеры в зависимости от раскладки --><i></i>
>
</picture>

В качестве дескрипторов (параметр srcset) выступают:

• Указатели ширины текущей версии изображения, например, 1000w говорит о том, что текущее изображение составляет по ширине 1000 px.
• Указатели плотности экрана устройства, например, 2x означает, что данное изображение подходит для устройств с удвоенной плотностью. Cтрока будет выглядеть подобным образом: srcset=»/images/2000.jpg 2x, /images/3000.jpg 3x»

Одновременное указание в srcset дескрипторов плотности и ширины недопустимо.

В качестве размеров, в зависимости от раскладки (параметр sizes), выступают:

• Все контрольные точки ширины экрана, на которых необходимо изменить поведение вставки изображения. Если условие выполнено, браузер принимает его за верное решение и дальнейшие условия не рассматривает.
• Значение ширины используемого изображения обозначается величиной vw – обозначается в процентах и считается от ширины видимой пользователю веб-страницы (viewport).

Если контрольных точек нет, то достаточно использовать.

Таким образом, расшифровка нашего html-примера внутри тега <img> будет следующая:

• 1000.jpg – изображение, используемое по умолчанию, когда параметр srcset не поддерживается браузером.
• Изображение 1000.jpg имеет ширину 1000 px, соответственно еще имеются изображения шириной 1200 px и 1600 px. На основании данного массива и внешних условий браузер должен будет самостоятельно выбрать более подходящее изображение для вставки (если не будет других перекрывающих условий в обертке <picture>).
• Если размер видимого окна браузера составляет 1000 px и менее, то выводим определенное браузером изображение, которое займет 100% область просмотра, если размер окна от 1001 до 1200 px, то выводим выбранное изображение только на половину окна браузера. Если ширина более 1201 px, то изображение должно занимать 33% от видимой части окна браузера минус 100 px.

Дополнительная расшифровка по справочной информации тега <picture> гласит, что:

• Если минимальный размер окна браузера 700 px и более, то используем картинку 700.jpg принудительно, без возможности изменить выбор алгоритмами браузера.
• Если размер окна браузера от 320 px до 699 px, то принудительно загружаем картинку crop_900.jpg.

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

<picture>
    <source media="(orientation: landscape)" srcset="/landscape_bean.jpg" />
    <img src="/portrait_ bean.jpg" alt="Mr. Bean" />
</picture>

Означает: при альбомной ориентации браузера используй изображение landscape_bean.jpg, при всех других случаях (портретная ориентация) – «portrait_ bean.jpg».

Для многих задач обертка <picture> избыточна. Также большинство сайтов обладают пропорциональной адаптивной структурой (одинаковые пропорции изображений в мобильных и настольных версиях), поэтому управление выбором выводимой картинки можно полностью возложить на браузер, т.е. использовать только параметр srcset в теге <img> без обертки <picture>.

Вернемся к нашему примеру и проведем «srcset-ирование» раздела со списком свадебных платьев. Мы проанализировали годовой трафик на сайт и определили основные разрешения устройств (break points), с которых просматривают сайт для настольной версии:

Ширина	1920	1680	1600	1536	1440	1366	1280	1280	1280	1024
Высота	1080	1050	900	864	900	768	1024	800	720	768
% от общего количества посетителей	13,41	1,54	4,66	2,70	3,78	13,85	6,01	2,13	1,51	1,59
Общие кластеры	13,41	12,68				13,85	11,25

И для мобильной версии:

Ширина	768	414	375	375	360	320
Высота	1024	736	812	667	640	568
% от общего количества посетителей	2,80	5,38	2,78	17,12	15,13	5,62
Общие кластеры	2,80	5,38	19,89		15,13	5,62

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

Используя полученные кластеры break points front end, специалист установил, что изображения в списке свадебных платьев должны иметь следующие разрешения:

Desktop				Mobile
1920	1680-1440	1366	1280-1024	768-375	360-320	Плотность пикселей
381*581	333*508 [близко к 336*512]	270*412	253*386	195*287	168*256	1K
				390*574	336*512	2K
				585*852	504*768	3K

Мы значительно сократили мобильные кластеры, объединив breakpoint 768, 414, 375, так как размеры thumbs (копия изображения, подходящая под определенное разрешение экрана) не сильно отличались друг от друга. Очевидно, что для retina-устройств необходимо добавить изображения с удвоенной/утроенной плотностью пикселей (для простоты пропустили информацию о desktop retina-экранах). После формирования всех форматов thumbs стало ясно, что кластеры 1680-1440 и 360-320 (2K) имеют практически идентичные форматы, поэтому объединим их также взяв одно изображение с большей шириной.

Сравним вес страницы до обработки и после (для просты подсчетов исключим из таблицы устройства с удвоенной/утроенной плотностью пикселей, для retina-экранов логика подсчетов будет аналогична экранам 1x):

	Desktop				Mobile
Breakpoints	1920	1680-1440	1366	1280-1024	768-375	360-320
До обработки, Мб	10,8	10,8	10,8	10,8	10,8	10,8
После обработки, Мб	1,5	1,2	1,1	0,95	2,2	0,95
Разница, Мб	9,3	9,6	9,6	9,85	8,6	9,85
Экономия веса, %	86,11	88,89	88,89	91,20	79,63	91,20

Очевидно, что изначально на сайте грузились очень большие изображения, поэтому использование thumbs показало значительное уменьшение веса страницы. Также видно, что на разрешениях 768-375 вес thumbs стал больше, чем на desktop-устройствах. Это связано с RESS-структурой сайта, когда различия в формировании настольной и мобильной версии формируются на back end стороне, т.е. мобильный сайт может полностью отличаться от desktop-версии. Если же используется упрощенный адаптивный подход, то обычно вес изображений в одной линейке плотности пикселей под мобильную версию должен быть меньше.

Для того, чтобы просмотреть вес страниц на различных устройствах, достаточно использовать панель разработчика Google Chrome (F12) в формате «device toolbar»:

Решение задачи #2. Сжатие изображений без потери качества.

В предыдущем пункте мы получили адаптивные изображения (thumbs) — специально созданные копии под различные устройства. Но эти изображения содержат лишнюю техническую информацию и их размер можно сделать меньше.

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

	Оригинал	tinypng.com	kraken.io	imagify.io	compressjpeg.com
Размер, Кб	402	296	297	301	302

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

Видно, что нам удалось сократить размер изображения на ~1/3. Что ж, хорошо. Но что делать если изображений сотни, тысячи? Тогда процесс обработки изображений в ручном режиме растянется на длительное время. Попробуем воспользоваться пакетной обработкой изображений.

2. Пакетная обработка изображений с помощью программ.

Если картинок много и их необходимо обработать все за раз, до подойдет использование программ под PC и Mac:

• JPEGMini позволяет сжать изображения в папке и во всех вложенных папках с сохранением путей. Таким образом, можно скачать всю папку с изображениями к себе на компьютер, провести ее оптимизацию и залить заново. Есть версии для ПК и для Mac.
• ImageOptim – только для Mac.
• FileOptimizer – для ПК.

Минусы использования программ:

• Большинство из них платные.
• Степень сжатия ниже, чем через веб-сервисы.

3. Пакетная обработка изображений через API / работа через плагины в CMS / Framework.

Многие веб-сервисы по сжатию изображений предлагают обработку фотографий через API, например, TinyPNG. Но качество сжатия через API хуже, чем качество сжатия через веб-интерфейс (официально подтверждено технической поддержкой TinyPNG). Это неприятно. К тому же сжатие через API либо полностью платное, либо условно бесплатное (TinyPNG через API даёт бесплатно сжать только 500 изображений в календарный месяц).

Аналогичным образом работают и установленные плагины в CMS. Загружая любое изображение через административную панель сайта, вы получаете уже обработанное сжатое изображение, пропущенное через API.

Таким образом, если у нас есть уже созданные thumbs и их много, то для их сжатия подойдут следующие решения:

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

Но даже при установке стороннего плагина нам все же необходимо создать thumbs (не вручную же их делать). Большинство плагинов производит лишь сжатие изображений, без создания thumbs. Таким образом, при установке стороннего плагина у нас все равно остаются нерешенные вопросы:

1. Необходимо создавать thumbs на лету при загрузке изображения через административную панель.
2. Размерность (px) и количество thumbs должно регулироваться для различных типовых страниц. Так, например, WordPress позволяет создавать малое, среднее и большое изображение из загружаемого оригинала на лету, но этого недостаточно. В нашем примере выше должно быть 9 thumbs на один оригинал изображения, чтобы обеспечить высокую степень адаптивности.
3. Высокая степень сжатия thumbs без использования сторонних API, чтобы плагин был полностью самодостаточным с возможностью переключения работы через API.
4. Очистка неиспользуемых thumbs при удалении оригиналов изображений.
5. Опциональное добавление водяного знака на thumbs.
6. Устойчивая обработка сколь угодно большого количества уже загруженных фотографий. Ведь плагин может ставиться не только на новые сайты, но и на сайты с историей.
7. Установка ограничений на сохранение оригинальных изображений (по ширине).

В нашем случае готового подобного плагина мы не нашли, поэтому создали свой под CMS Joomla. Плагин позволяет контент-менеджеру экономить время, загружая всего один оригинал изображения. После мы перенесли частичный функционал плагина в интернет-магазин на Yii одного из продуктовых ритейлеров c более чем 20 000 наименованиями, а после на портал недвижимости, работающий на Laravel c более 1 млн. позиций. Очевидно, что подобный плагин можно реализовать на большинстве современных CMS (Bitrix, Drupal, ModX и т.д.) или Framework-системах.

Итак, для настройки автоматической оптимизации изображений нам потребуется:

• Определить breakpoints и необходимые разрешения thumbs на типовых страницах сайта. С задачей лучше справится пара «аналитик + front-end специалист», где front-end специалисту будут предоставлены аналитические данные о разрешениях устройств посетителей сайта. Также front-end определяет какие размерности изображений должны использоваться в тех или иных breakpoint-ах. На выходе получится подобная таблица.
• После устанавливаем плагин сжатия изображений в CMS и content-менеджер/front-end специалист производит настройку правил создания thumbs для различных папок. Как настроить плагин сжатия в CMS Joomla читайте здесь.
• Если сайт имеет определённую «историю» уже загруженных изображений – запускаем плагин на пересоздание thumbs.
• Дожидаемся завершения процедуры создания thumbs и выставляем задачу паре back-end – front-end на вставку кодов «srcset».
• Делаем выборочную проверку веса типовых страниц на различных breakpoints. Страницы заметно похудели, не так ли?
• Проверяем сайт на наличие 404 ошибок (XENU или Comparser).

Ура! Мы автоматизировали БОЛЬшую оптимизацию изображений на сайте.

Полезные ссылки на дополнительные материалы:

Free Image Optimizer — сжатие и изменение размера фотографий

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

Оптимизировать сейчас

Оптимизация

Качественный: — Выберите — Минимальный размер файла Очень маленький размер файла Маленький размер файла Нормальное Высокое качество Наилучшее качество *

Скачать бесплатно!

Теперь вы можете загрузить оптимизатор изображений на свой компьютер и изменять размер и сжимать изображения одним щелчком мыши!

Зачем мне скачивать?

• Это супер быстро!
• Сжимайте изображения сразу!
• Это абсолютно бесплатно!
• Больше причин…

От создателей Image Optimizer

Узнать больше

TinyPNG — Developer API

Начало работы

После получения ключа вы можете сразу же приступить к сжатию изображений.Официальные клиентские библиотеки доступны для Ruby, PHP, Node.js, Python, Java и .NET. Вы также можете использовать плагин WordPress для сжатия изображений JPEG и PNG. А если у вас есть магазин Magento, вы можете просто установить расширения для Magento 1 CE, Magento 1 EE или Magento 2 CE, чтобы оптимизировать изображения продуктов.

Сообщество также создало большое количество сторонних надстроек, использующих Developer API.

Вы также можете создать свою собственную интеграцию с любым клиентом HTTP (S).Сервер сожмет ваше изображение и ответит URL-адресом, по которому вы можете получить результат.

 curl --user api:  ВАШ_API_KEY  \
      --data-binary @  unoptimized.png  -i https://api.tinify.com/shrink
 

Функции

Одинаковый API для изображений JPEG и PNG

API сжимает изображения JPEG и PNG. Вам нужно только загрузить исходное изображение и загрузить результат. Все остальное происходит автоматически .

Загрузить напрямую или предоставить URL-адрес изображения

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

Сохранить метаданные

Вы можете выбрать сохранение информации об авторских правах , GPS-местоположения и даты создания в сжатых изображениях JPEG. Для изображений PNG может быть сохранена информация об авторских правах.

Amazon S3 и Google Cloud Storage

(новый)

Вы можете указать API, чтобы он сохранял оптимизированные изображения непосредственно в ваших сегментах Amazon S3 или Google Cloud Storage . При этом вы также можете установить собственные заголовки Cache-Control и Expires.

Идеальное изменение размера изображения

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

Обнаружение интересующей области

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

Обнаружение вырезанного изображения

(новый)

Мы добавили новый алгоритм для обнаружения отдельно стоящих объектов на простом фоне. API добавит фоновое пространство или удалит лишние области при изменении соотношения сторон. Таким образом, объект на вашем изображении останется свободно стоящим и не будет обрезаться по краям при изменении размера.

Уменьшить размер файла изображения в Microsoft Office

Сжать отдельные изображения

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

1. Открыв файл в приложении Microsoft Office, выберите изображение или изображения, которые вы хотите сжать.

2. В разделе Работа с рисунками на вкладке Формат в группе Настроить щелкните Сжать изображения .

   Если вы не видите вкладку Работа с рисунками — Формат , убедитесь, что вы выбрали рисунок.Возможно, вам придется дважды щелкнуть изображение, чтобы выбрать его и открыть вкладку Формат .

   Кроме того, в зависимости от размера экрана вы можете видеть только значки для группы Adjust . Кнопка «Сжать изображения» отображается без метки.

3. Чтобы сжать только выбранные изображения, а не все изображения в документе, установите флажок Применить только к этому изображению .

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

4. В разделе Разрешение выберите нужное разрешение, затем нажмите ОК .

   Для получения дополнительной информации щелкните заголовки ниже

Важно: Этот параметр применяется только к изображениям в текущем документе или к документу, выбранному в списке рядом с Размер изображения и качество .Чтобы сделать его значением по умолчанию для всех новых документов, измените раскрывающийся список.

Обратите внимание, что эта функция недоступна в Microsoft Project 2013 и Office 2007.

1. Щелкните вкладку Файл .

2. Щелкните Параметры , а затем щелкните Дополнительно .

3. В разделе Размер и качество изображения используйте раскрывающийся список, чтобы выбрать, хотите ли вы, чтобы изменение применялось к определенному документу или ко всем новым (и будущим) документам.

4. Установите разрешение по умолчанию, затем нажмите OK

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

Примечание: Эта функция недоступна в Microsoft Project 2013 или Microsoft Project 2016.

1. Щелкните вкладку Файл .

2. Щелкните Параметры , а затем щелкните Дополнительно .

3. В разделе Размер и качество изображения щелкните документ, из которого вы хотите удалить данные редактирования изображения.

4. В разделе Размер и качество изображения установите флажок Отменить данные редактирования .

Примечание: Этот параметр применяется только к изображениям в текущем документе или документе, выбранном в списке рядом с Размер изображения и качество .

См. Также

Измените разрешение по умолчанию для вставки изображений в Office

Редактирование фотографий без Picture Manager

Сжимайте медиафайлы в своей презентации

Обрезать картинку

Отключить сжатие изображения

Мы слушаем!

Эта статья была последний раз обновлена ​​Беном 17.08.2019 в результате ваших комментариев.Если вы нашли это полезным, а особенно если нет, используйте элементы управления обратной связью ниже, чтобы оставить нам несколько конструктивных идей о том, как мы можем сделать это лучше.

Уменьшение размера файла документа в Pages на Mac

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

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

1. Выберите «Файл»> «Уменьшить размер файла» (в меню «Файл» вверху экрана).

2. Выберите необходимые настройки:

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

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

   • Удаление обрезанных частей фильмов и аудио: Если вы обрезали начало или конец фильмов или звука (с помощью элементов управления на боковой панели «Формат»), обрезанные части будут удалены.

   • Наиболее совместимые (H.264): Фильмы в вашем документе конвертируются в формат H.264, который воспроизводится на большинстве устройств iOS и iPadOS, а также на компьютерах Mac.

   • Высокая эффективность (HEVC): Этот параметр формата отображается только в случае использования macOS 10.13 или новее, и ваш Mac поддерживает аппаратное кодирование HEVC. Фильмы в формате HEVC имеют наилучшее качество при минимальном размере файла, но их можно воспроизводить только на устройствах с iOS 11, iPadOS 13 или новее, а также на компьютерах Mac с macOS 10.13 или новее.

     Если вы выберете этот формат, вы сможете позже добавить файлы HEVC в документ уменьшенного размера или скопировать. Дополнительные сведения о HEVC см. В этой статье службы поддержки Apple.

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

   • Сохранить исходный формат: Этот параметр сохраняет текущие форматы фильмов. В этом случае любые фильмы в форматах, несовместимых с iOS или iPadOS, не оптимизированы и, следовательно, не воспроизводятся на устройствах iOS или iPadOS.

   • Качество видео: Установите максимальное разрешение для фильмов. Фильмы с разрешением меньше максимального не масштабируются.

3. Нажмите одну из следующих кнопок, чтобы применить настройки:

   • Уменьшить этот файл: Применяет настройки к исходному документу.

   • Уменьшить копию: Применяет настройки к копии документа и сохраняет исходный документ. Введите имя копии документа и выберите место для сохранения копии, затем нажмите «Сохранить».

Примечание: Можно выбрать комбинацию параметров, которая увеличивает размер файла.

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

Примечание: Вы также можете значительно уменьшить размер файла изображения, преобразовав изображения из PNG в JPG перед их сжатием.Изображения JPG в 5-10 раз меньше, чем их эквиваленты в PNG. Чтобы узнать, как использовать PowerPoint в качестве конвертера PNG в JPG, прочтите наше руководство здесь.

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

Выберите изображение, которое вы хотите сжать, а затем:

1. Перейдите на вкладку Инструменты с изображениями Формат вкладка
2. Щелкните команду Сжать изображения
3. Выберите свой Параметры сжатия (см. Изображение ниже)
4. Выберите разрешение (см. Изображение ниже)
5. Щелкните OK

Примечание. ваши изображения выглядят более зернистыми (поэтому будьте осторожны, выбирая только самое низкое значение ppi).

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

Ваши два параметра сжатия ОЧЕНЬ важны, поэтому убедитесь, что вы понимаете, что они собой представляют, прежде чем двигаться дальше.

№1. Применить только к этому изображению

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

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

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

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

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

№ 2. Удалить обрезанные области изображений

Этот параметр влияет на то, сохраняет ли PowerPoint обрезанные области ваших фотографий.

Когда вы впервые обрезаете фотографию, PowerPoint сохраняет ту часть, которую вы обрезаете (она просто скрывает ее от вас). Вот почему при кадрировании изображения размер в PowerPoint не меняется.

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

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

Чтобы узнать, как кадрировать изображение в PowerPoint (и все имеющиеся у вас параметры), прочтите наше руководство здесь.

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

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

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

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

Более высокое разрешение , такое как HD 330 ppi (пикселей на дюйм), приравнивается к фотографии высочайшего качества с большими размерами файлов.

Более низкое разрешение , например, электронная почта 96 ppi (пикселей на дюйм) означает более низкое качество фотографий, которые могут выглядеть зернистыми на больших проекторах, и, следовательно, файлы меньшего размера.

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

Если вы просто отправляете презентацию коллеге по электронной почте для просмотра ТОЛЬКО на его ноутбуке (она никогда не будет отображаться на большом верхнем экране), тогда вы можете использовать гораздо более низкое разрешение.

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

Насколько ppi уменьшает размер файла изображения?

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

Обратите внимание, что в этом случае разрешения изображения 330 ppi и 220 ppi дают точно такой же размер изображения.

Это то, с чем вам придется поиграть.

Чтобы узнать больше о плотности пикселей (PPI), прочтите эту статью в Википедии здесь.

Сжатие изображений в формате файла PDF

Другой вариант сжатия изображений — просто преобразовать презентацию PowerPoint в формат файла PDF.

1. Нажмите F12 для Сохранить как диалоговое окно
2. Измените Сохранить как тип на формат PDF
3. Нажмите Сохранить

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

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

Чтобы узнать все, что вам нужно знать о процессе преобразования PowerPoint в PDF, см. Наше руководство здесь.

Заключение

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

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

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

Что дальше?

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

• Сжатие изображений несложно, и этот процесс может помочь с объемом памяти компьютера и в целях брендинга за счет использования качественных изображений, которые быстро загружаются.
• Вы можете использовать программное обеспечение для редактирования фотографий или такие программы, как Microsoft Word, для сжатия файлов изображений.
• Процесс сжатия изображений JPEG аналогичен сжатию любого другого типа файла изображения.

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

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

Что такое сжатие фотографий?

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

Зачем сжимать фотографии?

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

Как работает процесс сжатия фотографий?

Сжатие фотографий занимает всего несколько шагов и может быть выполнено с помощью программного обеспечения для редактирования фотографий или текстового процессора, такого как Microsoft Word. Если вы не знаете, как сжимать фотографии, вот шаги с использованием любого типа программного обеспечения. Даже владельцы малого бизнеса или предприниматели, которые редко используют компьютеры, могут понять, как сжимать файлы изображений.

Сжатие фотографий с помощью программного обеспечения для редактирования изображений

1. Откройте фотографию, которую вы хотите сжать, в программе для редактирования фотографий.
2. Перейдите в меню «Файл» в программном обеспечении и выберите «Сохранить как» или «Сохранить».
3. Щелкните «Параметры» во всплывающем меню.
4. Выберите параметр «Сильное сжатие» в разделе меню «Сжатие фотографий».
5. Выберите «Кодирование без потерь» в разделе «Шифрование». Это поможет сохранить целостность фото.
6. Нажмите «ОК».
7. Нажмите «Сохранить». Ваш компьютер сожмет фотографию и сохранит ее.
8. Если вы сохраняете фотографию в формате JPEG, вы можете потерять качество, поэтому фотографию необходимо защитить при сжатии.Сохранение фотографии в формате, отличном от JPEG, например TIFF, PNG, GIF или BMP, поможет предотвратить потерю качества.

Если вы боитесь испортить исходную фотографию, всегда используйте «Сохранить как», чтобы создать сжатую версию, отдельную от оригинала. Затем, если вам когда-нибудь понадобится исходная версия, вы ее сохраните. Редактирование изображений иногда может быть сложной задачей, поэтому рекомендуется сохранить исходную копию, если в процессе что-то пойдет не так. Никогда не бывает плохой идеей использовать дублированное изображение для внесения изменений.

Когда дело доходит до программного обеспечения для редактирования фотографий, в Интернете есть десятки вариантов качества. Вы можете использовать передовые платформы, такие как Adobe Photoshop или упрощенную, менее дорогую версию Adobe Photoshop Elements, для редактирования изображений. Вы можете использовать что-то бесплатное, например программу обработки изображений GNU, более известную как GIMP. Paint.NET — еще одна бесплатная альтернатива, которая, как правило, широко рассматривается пользователями, и она должна быть достаточно простой, чтобы ее могли освоить даже новички в редактировании изображений.

Если вы используете программное обеспечение для редактирования фотографий только для сжатия или изменения размера нескольких изображений, не платите за такую ​​услугу, как Photoshop, если вы можете использовать бесплатную опцию, такую ​​как GIMP или Paint.NET. Нет необходимости тратить дополнительные деньги на простую задачу редактирования.

Сжатие фотографий с помощью Microsoft Word

1. Откройте Microsoft Word и откройте новый документ Word.
2. Щелкните вкладку «Вставка» в верхней левой части экрана.
3. Выберите значок изображения из списка вариантов.
4. Появится список файлов на вашем компьютере. Выберите файл изображения, который вы хотите сжать, дважды щелкнув по нему. Картинка будет добавлена ​​в ваш документ.
5. Щелкните по картинке. В разделе «Работа с рисунками» выберите вкладку «Формат». В группе «Настроить» выберите «Сжать изображения».
6. Всплывающий экран предложит вам варианты. Либо нажмите «ОК», чтобы принять разрешение по умолчанию, либо выберите качество сжатия фотографии, установив флажок рядом с нужным параметром, а затем нажмите «ОК».«
7. Сохраните документ, и фотография будет сжата.

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

1. Перейдите на вкладку «Макет» в верхней части экрана Microsoft Word.
2. Щелкните значок «Размер» в группе «Параметры страницы».
3. Выберите нестандартный размер бумаги.
4. Сохраните документ.

Как сжать файл JPEG?

Независимо от того, используете ли вы JPEG или любой другой файл изображения, процесс сжатия изображения должен оставаться в основном таким же, но с файлами JPEG вы рискуете потерять разрешение при сжатии изображений. Если изображение большое, вы можете обойти это, используя Microsoft Paint для изменения размера изображения, что также должно уменьшить размер файла.

1. Откройте изображение в Microsoft Paint.
2. Выберите изображение и используйте кнопку изменения размера.Выберите любые размеры изображения, которые вам нравятся, и не снимайте флажок «Сохранить соотношение сторон».
3. Нажмите «ОК», и размер изображения изменится.
4. Если вы хотите обрезать изображение, используйте кнопку «Выбрать», чтобы выбрать часть изображения, которую вы хотите сохранить, затем нажмите «Обрезать».
5. Сохраните изображение.

Вы также можете сжать файл JPEG, используя другие методы, о которых мы рассказали выше. Это зависит от ваших предпочтений и возможностей программного обеспечения вашего бизнеса. Сжатие изображений JPEG — это не ракетостроение, и такие платформы, как Photoshop, Word и Paint, могут справиться с этой задачей.

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

пикселей, размер изображения и разрешение изображения в Photoshop

Хотите добиться наилучших результатов при изменении размера изображений в Photoshop? Начните с изучения пикселей, размера и разрешения изображения!

Автор Стив Паттерсон.

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

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

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

Загрузите это руководство в виде готового к печати PDF-файла!

Что такое пиксели?

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

В Photoshop при просмотре изображения с нормальным уровнем масштабирования (100% или меньше) пиксели обычно слишком малы, чтобы их можно было заметить. Вместо этого мы видим то, что выглядит как непрерывное изображение, в котором свет, тени, цвета и текстуры смешиваются вместе, чтобы создать сцену, которая выглядит так же, как в реальном мире (изображение из Adobe Stock):

Цифровое изображение, открытое в Photoshop.Изображение предоставлено Adobe Stock.

Более пристальный взгляд на пиксели

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

Выбор инструмента масштабирования.

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

При более близком увеличении видны отдельные пиксели.

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

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

Пиксельная сетка

Обратите внимание, что как только вы увеличиваете достаточно близко (обычно более 500%), вы начинаете видеть светло-серый контур вокруг каждого пикселя.Это Photoshop Pixel Grid , и он нужен только для того, чтобы упростить просмотр отдельных пикселей. Если вы обнаружите, что пиксельная сетка отвлекает, вы можете отключить ее, перейдя в меню View в строке меню, выбрав Show , а затем выбрав Pixel Grid . Чтобы снова включить его, просто выберите его снова:

Переходим в меню «Просмотр»> «Показать»> «Пиксельная сетка».

Уменьшение масштаба для просмотра изображения

Чтобы уменьшить пиксели и просмотреть все изображение, перейдите в меню Просмотр и выберите По размеру экрана :

Перехожу в «Просмотр»> «По размеру экрана».

И теперь, когда мы уменьшили масштаб, отдельные пиксели снова стали слишком малы, чтобы их можно было заметить, и мы снова видим иллюзию детализированной фотографии:

При нормальном расстоянии просмотра пиксели сливаются вместе, образуя изображение.

См. Наше полное руководство по навигации по изображениям в Photoshop

.

Какой размер изображения?

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

Диалоговое окно «Размер изображения»

Лучшее место для поиска информации о размере изображения — это диалоговое окно «Размер изображения» Photoshop. Чтобы открыть его, перейдите в меню Image и выберите Image Size :

Переход к изображению> Размер изображения.

В Photoshop CC в диалоговом окне «Размер изображения» слева отображается область предварительного просмотра, а справа — сведения о размере изображения.Я расскажу о диалоговом окне «Размер изображения» более подробно в следующем уроке. А пока мы просто посмотрим на ту информацию, которая нам нужна:

Диалоговое окно «Размер изображения» в Photoshop CC.

Размер пикселей

Ширина и высота изображения в пикселях известны как его размеры пикселей, , и в Photoshop CC мы можем просмотреть их рядом со словом Размеры в верхней части диалогового окна. Здесь мы видим, что мое изображение имеет ширину 4509 пикселей (пикселей) и высоту 3000 пикселей:

Photoshop CC включает новую опцию «Размеры» вверху.

Если размеры показаны в виде измерения, отличном от пикселей, например в дюймах или процентах, щелкните маленькую стрелку рядом со словом «Размеры» и выберите пикселей из списка:

Размеры могут отображаться в различных типах измерений.

Это говорит нам, что мое изображение содержит 4509 пикселей слева направо и 3000 пикселей сверху вниз:

Размер изображения в пикселях.

Нахождение общего количества пикселей

Чтобы вычислить общее количество пикселей в изображении, нам просто нужно умножить значения ширины и высоты вместе.Итак, в этом случае 4509 x 3000 = 13 527 000, или примерно 13,5 миллиона пикселей. Вам действительно не нужно знать общее количество пикселей. Но по мере того, как вы приобретете больше опыта в изменении размера изображений, вы обнаружите, что предварительное знание общего количества пикселей даст вам хорошее представление о том, насколько большим вы можете напечатать изображение, как мы увидим дальше, когда посмотрим на разрешение изображения.

Загрузите это руководство в виде готового к печати PDF-файла!

Какое разрешение изображения?

Итак, если пикселей — это крошечные цветные квадраты, составляющие все цифровые изображения, а размер изображения — это количество пикселей в изображении слева направо (ширина) и сверху вниз (высота), что такое разрешение изображения ? Разрешение изображения определяет размер фотографии. печатает в зависимости от текущего размера изображения.

Важно заранее понимать, что разрешение изображения влияет только на размер распечатанной версии изображения . Это не имеет никакого эффекта при просмотре изображения на экране. Я освещаю эту тему более подробно в моем руководстве по мифу о веб-разрешении 72 ppi, и мы еще раз рассмотрим его в конце этого урока.

Соединение по ширине, высоте и разрешению

В диалоговом окне «Размер изображения», если вы посмотрите под словом «Размеры», вы найдете поля Ширина , Высота и Разрешение .Здесь мы можем не только просматривать текущие настройки, но и изменять их:

Параметры ширины, высоты и разрешения.

Опция передискретизации

Прежде чем мы продолжим, если вы посмотрите ниже значения разрешения, вы найдете еще одну важную опцию под названием Resample . И по умолчанию Resample включен. Мы узнаем все о параметре Resample, когда рассмотрим, как изменять размер изображений. Короче говоря, Resample позволяет нам изменять количество пикселей в изображении:

Опция Resample.

Почему вы хотите изменить количество пикселей? Если текущий размер изображения слишком мал для печати фотографии нужного вам размера, вы можете использовать Resample, чтобы добавить больше пикселей, известное как upsampling . Или, если вы хотите отправить свою фотографию друзьям по электронной почте или загрузить ее в Интернет, а текущий размер слишком велик, Resample позволит вам уменьшить количество пикселей, известное как , понижающая дискретизация .

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

Снятие отметки с опции Resample.

Изменение размера печати, а не размера изображения

Как только вы выключите Resample, вы заметите, что тип измерения для значений ширины и высоты изменится. Вместо того, чтобы просматривать ширину и высоту в пикселях, как это было минуту назад, теперь я вижу их в дюймах . И вместо того, чтобы сказать мне, что мое изображение имеет ширину 4509 пикселей и высоту 3000 пикселей, мне теперь говорят, что это 15.03 дюйма в ширину и 10 дюймов в высоту:

Ширина и высота теперь отображаются в дюймах, а не в пикселях.

Фактически, если вы щелкните поле типа измерения для ширины или высоты, вы заметите, что пиксели теперь неактивны и недоступны. Это потому, что при выключенном Resample мы не можем изменить физическое количество пикселей в изображении. Все, что мы можем сделать, это изменить размер изображения на печать , а размер печати обычно измеряется в дюймах (или сантиметрах в зависимости от того, где вы находитесь в мире):

Отключение Resample не позволяет нам добавлять или удалять пиксели.

Как работает разрешение изображения?

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

Например, мое значение разрешения в настоящее время установлено на 300 пикселей / дюйм.Это означает, что когда я иду напечатать изображение, 300 пикселей по ширине и 300 пикселей по высоте будут втиснуты на каждый квадратный дюйм бумаги. Теперь 300 пикселей могут показаться не такими уж большими. Но помните, это 300 от ширины и от высоты. Другими словами, это 300 умножить на 300, что в сумме составит

пикселей на квадратный дюйм:

Текущее разрешение, измеряемое в пикселях на дюйм.

Как определить размер отпечатка

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

Текущая ширина в пикселях.

Если мы разделим 4509 на текущее значение разрешения 300, мы получим 15,03. Другими словами, ширина моего изображения при печати будет 15,03 дюйма, точное значение, показанное в поле Ширина:

.

4509 пикселей ÷ 300 пикселей / дюйм = 15,03 дюйма.

И вернувшись в раздел «Размеры», мы видим, что высота моего изображения по-прежнему составляет 3000 пикселей:

Текущая высота в пикселях.

Если мы разделим 3000 на текущее разрешение 300, мы получим 10. Это означает, что высота изображения при печати будет 10 дюймов, как это показано в поле Высота:

3000 пикселей ÷ 300 пикселей / дюйм = 10 дюймов.

Изменение разрешения изменяет размер печати

Если мы изменим значение разрешения, количество пикселей в изображении не изменится, но изменится размер печати. Обратите внимание, что если я уменьшу разрешение с 300 пикселей / дюйм до 150 пикселей / дюйм, размеры в пикселях останутся прежними — 4509 x 3000 пикселей.Но ширина и высота увеличиваются. Поскольку я буду выдавливать на бумагу только половину количества пикселей на дюйм, как по горизонтали, так и по вертикали, ширина и высота увеличились вдвое:

При уменьшении разрешения увеличивается размер отпечатка.

При изменении размера печати изменяется разрешение

И поскольку все, что мы меняем, это размер печати, то изменение ширины или высоты изменит разрешение. Фактически, когда опция Resample, которую мы рассматривали ранее, отключена, все три значения (Ширина, Высота и Разрешение) связаны вместе.Изменение одного автоматически меняет другие.

Если я уменьшу значение ширины до 10 дюймов, а затем, чтобы соотношение сторон изображения не изменилось, Photoshop автоматически изменит значение высоты на 6,653 дюйма. А чтобы уместить все изображение в новый, меньший размер печати, пиксели нужно будет упаковать плотнее, поэтому значение разрешения увеличилось до 450,9 пикселей / дюйм:

При изменении ширины и высоты изменяется разрешение.

Влияет ли разрешение изображения на размер файла?

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

Если вы посмотрите рядом со словами «Размер изображения» в верхней части диалогового окна, вы увидите число, обычно показываемое в мегабайтах (M). В моем случае это 38,7 млн. Это число представляет размер изображения в памяти вашего компьютера.Когда вы открываете изображение в Photoshop, оно копируется с вашего жесткого диска, распаковывается из любого формата файла, в котором оно было сохранено, а затем помещается в память (RAM), чтобы вы могли работать с ним быстрее. Число, отображаемое в диалоговом окне «Размер изображения», является фактическим размером изображения без сжатия:

.

Размер изображения в мегабайтах указан вверху.

Меньшее разрешение по сравнению с размером файла

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

Здесь я снизил разрешение с 300 пикселей / дюйм до 30 пикселей / дюйм. С таким небольшим количеством пикселей, втиснутых в дюйм бумаги, размер печати увеличился до колоссальных 150,3 дюйма на 100 дюймов. Но даже при этом очень низком значении разрешения размер изображения в памяти остается неизменным и составляет 38.7М:

Понижение разрешения печати не влияет на размер файла.

Выше разрешение по сравнению с размером файла

А здесь я увеличил разрешение до 3000 пикселей / дюйм. Это уменьшает размер печати до 1,503 дюйма на 1 дюйм, но опять же не влияет на размер файла, который по-прежнему составляет 38,7 МБ. Единственный способ уменьшить размер файла изображения — либо уменьшить количество пикселей в изображении (с помощью параметра Resample), либо сохранить файл в формате, поддерживающем сжатие (например, JPEG), либо и то, и другое.Простое изменение разрешения печати не изменит размер файла:

Увеличение разрешения печати также не влияет на размер файла.

Так как же сделать вы уменьшите количество пикселей в изображении? А какое разрешение нужно для получения качественных отпечатков? Я отвечу на эти и другие вопросы в отдельных уроках этой главы.

И вот оно! Это краткий обзор пикселей, размера и разрешения изображения — трех важных тем, о которых вам нужно знать, чтобы получить наилучшие результаты при изменении размера изображений в Photoshop! В следующем уроке этой серии мы подробнее рассмотрим мощную команду Image Size в Photoshop CC!

Или просмотрите предыдущие руководства из этой серии:

И не забывайте, что все наши руководства теперь доступны для загрузки в формате PDF!

.

No related posts.