Уменьшаем размер фотографии на компьютере

Как уменьшить размер JPGF онлайн на Compressjpeg.com

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

Веб-приложение на сервисе Compressjpeg.com позволяет сжимать до 20 сжимать изображений одновременно.

Выполните следующее:

1. Нажмите на кнопку «Загрузить», чтобы добавить на сервер файлы JPG или JPRG, или перетащите файлы с компьютера в специальную область.
2. Происходит оптимизация изображений.
3. Нажмите на кнопку «Скачать все», чтобы получить на свой ПК обработанные файлы в ZIP-архиве.

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

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

Файлы сохраняются на сервисе в течении 1 часа, после чего они будут удалены.

Как это работает

Чтобы уменьшить вес, используются такие способы:

1. Отредактируйте ширину и высоту. Она измеряется в пикселях. Например 800Х600;
2. Обрезание краев фотографии (кадрирование), или ее неинформативной части;
3. Уменьшение качества. Для этого в редакторе используется специальный ползунок. В зависимости от фотографии уменьшение веса файла на 10-30 процентов не приведет к ухудшению изображения;
4. Изменение формата файла. Например, изменив формат с BMP на JPG размер уменьшится;
5. Комбинированный способ. Примените все перечисленные выше методы.

У формата JPG (JPEG) измените размер любым из рассмотренных способов. Форматы PNG, BMP, GIF изменяются только уменьшением разрешения.

TinyPNG

Онлайн сервис TinyPNG служит для оптимизации (сжатия) изображений в форматах PNG и JPG. Сервис имеет две идентичные страницы по разным адресам: tinypng.com и tinyjpg.com.

Откройте страницу TinyPNG, перетащите в специальную форму изображения в форматах «.pnf» и «.jpg» (можно загрузить файлы обеих форматов одновременно) со своего компьютера.

Особенности онлайн сервиса TinyPNG:

• Поддержка форматов JPG и PNG.
• Загрузка на сервис до 20 изображений.
• Размер одного файла не более 5 MB.

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

При помощи ссылки «download» загрузите на компьютер готовое изображение. Обработанные изображения можно сохранить в облачное хранилище Dropbox (кнопка «Save to Dropbox»), или скачать на компьютер сразу все изображения (кнопка «Download all»). Сохраненные файлы имеют оригинальное название.

Я использую этот сервис для оптимизации изображений, которые я добавляю на свой сайт. Вначале я обрабатываю картинки в программе Photoshop: изменяю размер (соотношение сторон) изображений, оптимизирую для web, сохраняю файлы в форматах «.jpeg» и «.png».

Далее я дополнительно сжимаю изображения на сервисе TinyPNG (TinyJPG), затем скачиваю на компьютер изображения наиболее меньшего размера в форматах JPEG или PNG.

Как заполнять SEO-атрибуты изображений

Поисковые системы воспринимают картинку как тег img с атрибутом src, содержащим само изображение, и атрибутом alt, в котором заключено описание картинки. Еще у изображения может быть прописан title с дополнительным описанием.

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

Атрибут alt

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

Как заполнять alt для картинки?

Каким должен быть alt изображения:

1. Описывающим содержание картинки.
2. Связанным с текстом вокруг.
3. Уникальным для каждой картинки на странице.
4. Сформулированным максимально простым русским языком, чтобы Google интерпретировал его однозначно. Проверить, понял ли Google надпись в alt, можно в инструменте.
5. Не слишком длинным, Google анализирует только примерно первые 100 символов.
6. Без переспама ключевыми словами.
7. Без повторов основного ключа в каждом alt всех картинок.
8. Не дублирующим заголовок страницы или название статьи.

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

Неудачные варианты:

Нет текста в alt — img src=»sobaka.jpg»-

Переспам — img src=»sobaka.jpg» alt=»собака щенок собачка маленькая собачка ретривер лабрадор волкодав сеттер пойнтер корм для собак дешевый корм для собак еда для собак»

Удачный вариант:

Описание картинки, из которого понятно, что на ней происходит — img src=»sobaka.jpg» alt=»собака породы лабрадор приносит палку хозяину»

Вариант заполнения alt

Что делать для мультиязычных сайтов, советует Джон Мюллер:

Атрибут title

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

Заполненный title

Название файла

В Справке Google написано, что название файла тоже важно, поэтому нужно переименовывать файлы перед загрузкой. Название может выполнять ту же функцию, что и заголовки с подписями, так что вариант sobaka.jpg лучше IMG00023.JPG, поскольку передает содержание картинки

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

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

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

Программы для сжатия изображений/картинок для сайта

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

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

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

Caesium — бесплатная программа для сжатия изображений без потери качества

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

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

Caesium — это простой инструмент с открытым кодом, который предназначен для сжатия PNG, JPG и BMP. Это достаточно удобная в использовании программа. Поддерживает русский язык, а также есть возможность использовать программку в версии Portable, то есть, не устанавливать её на компьютер, а открывать прямо из папки.

Для сжатия картинок нажмите кнопку Файл — Добавить, выберите изображения, выберите папку куда будут загружены обработанные изображения — Output, выбрать параметр сжатие: «Качество» и нажмите кнопку «Выполнить сжатие», и через секунду вы получите готовый результат.

Получите еще больше преимуществ с Visual Watermark

Онлайн-приложение “Сжать фото” — это не единственный инструмент Visual Watermark для обработки фото.

Вы можете также воспользоваться другими возможностями онлайн-программы:

1. Нанести водяной знак на фото для обозначения авторских прав или добавления логотипа, названия бренда либо контактной информации.
2. Нанести водяной знак на видео для избежания кражи контента и нарушения авторских прав.
3. Обрезать фото по кругу или в форме прямоугольника, а также с заданным соотношением сторон и в любом другом формате.
4. Изменить размер фото в пикселях.
5. Добавить текст к изображению. Например, цитату, стихотворение или любое другое сообщение.

Хотите узнать больше о преимуществах веб-приложений Visual Watermark? Тогда просто оставайтесь с нами!

Часто задаваемые вопросы

Мы подготовили ответы на самые популярные вопросы пользователей, которые сжимают изображения форматов JPEG, PNG, GIF.

Как сжать фотографию в формате jpg?

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

Как сжать фото без потери качества?

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

Какой размер фото я могу отправить по электронной почте?

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

Как уменьшить размер фотографии для отправки по электронной почте?

Если вы хотите отправить одну или несколько фотографий, но она весит больше, чем позволяет почтовая служба, воспользуйтесь нашим приложением Visual Watermark. Онлайн-инструмент позволяет работать с 10 изображениями одновременно в бесплатной версии. Всего за 5 минут вы можете быстро уменьшить вес изображений и отправить их получателю. Процедура очень быстрая и удобная для каждого пользователя.

Как сжать фото на компьютере в Windows 10?

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

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

Чтобы уменьшить вес изображения без потери качества, вам не нужно скачивать графические редакторы или специальные программы. Веб-приложение Visual Watermark работает онлайн на любом устройстве, включая смартфоны. При обработке можно выбрать опцию “Лучшее качество” и в этом случае сжатие фото будет происходить без потери качества. Обработанное изображение будет привлекательным, четким, с оригинальной цветопередачей.

Как сжать фото на телефоне Android или iPhone?

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

Кто использует прогрессивный JPEG в продакшне?

• с базовым уровнем качества 85%. Они замерили субъективную задержку, воспринимаемую пользователем (время до первого прохода и общее время загрузки), и решили, что PJPEG в целом подходит исходя из качества компрессии, скорости кодирования и декодирования.
• Facebook выдаёт прогрессивные JPEG в приложении iOS. Это на 10% уменьшило трафик и на 15% ускорило выдачу изображений «хорошего качества».
• Yelp перешёл на прогрессивный JPEG. Это одна из мер, которая уменьшила размер изображений примерно на 4,5%. Она сократился ещё на 13,8% за счёт MozJPEG.

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

ILoveIMG

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

Плюсы ILoveIMG:

• Коррекция фото в формате JPG, PNG, SVG или GIF.
• Пакетная обработка документов.
• Загрузка данных с устройства или из облачного хранилища.
• Изменение ширины и высоты в пикселях или процентах.
• Функция для сохранения исходных пропорций.

Минусы:

• Ограничение величины файла: можно импортировать кадр до 130 МБ.
• Сохранение результата только в исходном формате.

10 сервисов оптимизации изображений онлайн

Готовим к публикации JPG

Первое, что стоит усвоить: каждое сохранение в формате JPG увеличивает количество артефактов. Этот алгоритм сжимает за счёт усреднения однородных пикселов. Чем больше сжатие — тем меньше деталей, оттенков, тем более выражены всем знакомые «квадратики». Сохраняйте изображение в JPG для веб в самый последний момент, перед публикацией. До этого сохраняйте картинку в одном из форматов без сжатия с потерями: PSD, TIFF, или даже PNG-24.

До того, как сохранять изображение для веб, уменьшите разрешение фото. Камера сохраняет фотографии с ppi 300 или 240 (в зависимости от настроек камеры), а дисплеи (кроме ретины) понимают лишь 72 ppi. Избыточное разрешение увеличивает вес изображения без каких-либо визуальных преимуществ. Высокое разрешение нужно только для печати.
Не сохраняйте для публикации в интернет фото с избыточным разрешением. Это увеличивает размеры, но не даёт никаких преимуществСтепень сжатия JPG для публикации в web — 80% и больше (то есть 70, 60, 50%…). Ориентируйтесь на качество в первую очередь, но помните: на сегодняшний день предельный «вес» картинки, размещенной на странице как иллюстрация — около 250 кб. Придерживайтесь этой цифры.

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

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

Стоит ли включать в изображение цветовой профиль? Пожалуй, нет, если вы сконвертировали фото в sRGB-1966. Браузеры умеют работать только с ним. А вот если ваше изображение сохранено в одном из профессиональных форматов, с отображением будут проблемы. Сам по себе цветовой профиль — крохотный текстовый файлик, интегрированный в контейнер с изображением. Конечно же, он немного увеличивает вес файла, поэтому его лучше срезать вместе с метатегами.

Как сжать фото с помощью Visual Watermark

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

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

Итак, рассказываем, как сжать изображение онлайн в нашем приложении:

1. Перейдите к онлайн редактору на верху страницы.
2. Нажмите “Выбрать изображения” и выберете один из предложенных варинтов:
   • Загрузить с моего компьютера. В данном случае следует указать папку, в которой хранятся необходимые фото.
   • Загрузить с Google Drive, Google Photo или Dropbox. Пользователь должен будет предоставить доступ к данным для нашего приложения для загрузки нужных изображений.

   Кроме того, вы также можете загружать фотографии, просто перетащив их из папки компьютера в окно редактора.

3. Нажмите “Сжать изображения”.
4. Выберете качество сжатия из предложенного списка:
   • Лучшее качество. Наша программа для сжатия фото сделает все возможное, чтобы сохранить максимально возможное качество изображения.
   • Меньший размер. Сжатие изображений освободит больше места на устройстве.
   • Определенный размер файла. В этом случае вы сможете указать любой желаемый размер фото.

Все очень быстро, просто и понятно.

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

Способ 2. Как изменить размер изображения с помощью MS Photo Gallery

• Если Microsoft Photo Gallery не установлена на вашем компьютере (Пуск> Фотогалерея), вам необходимо скачать и установить его как часть Windows Essentials 2012;
• Запустите MS Photo Gallery и найдите свой графический файл;
• Кликните по нему правой кнопкой мыши и выберите пункт «Изменить размер…»:

Выберите готовый пресет: «Малый 640 пикселей», «Средний 1024», «Большой 1280» и т.д.

Советы:

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

Стратегия №3: Run-time оптимизация

Client Hints – это протокол, при помощи которого браузер в заголовке запроса HTTP может сообщить серверу, какой тип контента он предпочитает получить. Client Hints добавляют дополнительные поля в заголовки HTTP-запросов, содержащие информацию о браузере. Одна из ключевых возможностей этого протокола – информирование сервера о том, какого размера изображения нужны странице.ImgIx — это надстройка над CDN (Amazon CloudFront), которая позволяет выполнять обработку изображений в реальном времени перед добавлением в кэш. ImgIx предоставляет весь необходимый функционал для обработки изображений, а также ряд дополнительных функций, например, Monochrome, Blur, Halftone.

Преимущества:

• требуется очень мало усилий для оптимизации изображений;
• часто run-time оптимизатор включает CDN для ускорения доставки;
• оптимизатор может обладать другими возможностями, например, DAM или расширенный инструментарий обработки изображений;
• автоматическая или ручная оптимизация изображений с помощью директив на основе URL;
• имеет собственное хранилище изображений, освобождает ваше локальное / облачное хранилище
• в этом смысле, сайту практически не требуется обслуживание или перенастройка;

Недостатки:

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

Уменьшаем вес фотографии или картинки в Picture Manager

Для уменьшения веса фотографий несколько последних лет я пользуюсь программой, входящей в пакет Microsoft Office, — менеджер по обработке изображений. Называется она Microsoft Office Picture Manager. Если у вас есть текстовый редактор Word, то должна быть и эта программа. С ее помощью можно быстро уменьшить вес как одной фотографии, так и сразу группы изображений.

Заходим в программу. Путь к программе Microsoft Office Picture Manager: «пуск» — «все программы» — «средства microsoft office» — «диспетчер рисунков microsoft office». Или еще проще — щелкните по нужному изображению, затем нажмите правой клавишей мыши на нем и выберите «открыть с помощью». Будет предложено несколько программ, среди которых будет и Picture Manager.

Открываем изображение в программе:

В верхнем левом углу нажимаем вкладку «файл» — «добавить ярлык рисунка».

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

Как уменьшить вес одной фотографии

Выделяем нужную фотографию щелчком мыши.

В верхней панели инструментов переходим на вкладку «рисунок» и выбираем опцию «сжать рисунки»: В правой стороне экрана появится колонка «Сжать рисунки»: В поле «Сжимать для» выбираем подходящий размер. Внизу («Ожидаемый общий размер») смотрите, какой вес вас устроит. Обычно я выбираю для «веб-страниц». Как видите, оригинал фотографии в моем примере весил 1,82 Мб. После сжатия фото будет весить 76,2 Кб, что достаточно для иллюстрации статей моего блога: и качество сохраняется, и вес небольшой.

Выбрав нужный параметр сжатия, нажимаем «ok».

Теперь фотографию нужно сохранить. Лучше оставить оригинал — полную версию, а сжатое фото сохранить отдельным файлом. В верхней панели инструментов идем в «файл» — «сохранить как». В открывшемся окне выбираем путь, в какую папку сохранять фото, даем название (отличное от оригинала), выбираем формат (JPEG) и нажимаем на «сохранить». Таким образом, у нас получилось две фотографии: оригинал и сжатая копия.

Если вам не нужен оригинал, то после того, как вы выбрали параметр сжатия и нажали «ok», в верхней панели инструментов идем в «файл» — «сохранить» (без КАК)  — уменьшенное изображение сохранится поверх оригинала, и на жестком диске компьютера останется только одна фотография.

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

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

Как сжать фотографию еще быстрее

Если программа Microsoft Office Picture Manager есть на вашем компьютере, то при открытии любой фотографии в проводнике предлагается несколько программ на выбор. Я просто щелкаю правой мышкой по фото, которую собираюсь уменьшить. Появляется окно: Выбираю «открыть с помощью» — Microsoft Office Picture Manager — фото сразу открывается в программе. Перехожу во вкладку «рисунок» — «сжать рисунки» — выбираю для «веб-страниц» — «ok». Затем «сохранить» или «сохранить как». Занимает очень мало времени. Всё, вес изображения сжат в несколько раз!

Клиентский компонент

Для использования на клиенте написан специальный компонент под библиотеку React. Исходный код которого лежит на GitHub, а собранный пакет на npm.

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

Как использовать компонент? Очень просто:

Как видите, работает так же просто, как и элемент img. Далее всю магию компонент сделает сам. Определит, поддерживает ли браузер avif, webp, jpg/png и размер изображение в верстке и запросит у микросервиса наиболее подходящую картинку.

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

Есть важный для понимания момент, связанный с механизмом измерения размера картинки. Для корректного вычисления ее ширина должна быть установлена изначально. Нужно задать стили width: 100% или width: 50vw или width: 550px. В противным случае у вас загрузится минимально возможная ширина картинка.

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

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

Если посмотреть на раздел «Что нового» на стартовой странице МТС Твой Бизнес, то на десктопе понадобится картинка в 144 пикселя, а на мобильном устройстве Samsung Galaxy S8+ – изображение 148 пикселя * 4 (масштабирование Device Pixel Ratio) = 592 пикселя по ширине. Потому что на этом устройстве разрешение экрана 1440×2960 и для качественного отображения контента нужны более качественные картинки. При этом на старых гаджетах понадобятся картинки размером 148 пикселей по ширине или даже меньше (в зависимости от разрешения экрана).

На этом примере можно хорошо заметить преимущества измерения размера картинки перед определением размера картинки по ширине экрана посредством стандартного элемента picture. Ведь картинка занимает всего 1/3 экрана, а значит, можно загрузить ее гораздо легче. В этом и состоит второй принцип оптимизации изображений.

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

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

Вопросы и ответы

В контейнере используется nodejs? Она же медленная и однопоточная?

NodeJS действительно однопоточная, но API за пределами движка V8 реализуется многопоточно. Библиотека SharpJS реализована как нативное API и без проблем нагружает все ядра процессора. Тем самым поток nodejs не блокируется во время конвертации изображений.

Но есть же гораздо более быстрые решения для обработки запросов чем nodejs?

Дело в том, что мы проповедуем концепцию Фронтенд Микросервисов. И если фронтендеру необходим микросервис – он сам его готовит на frontend технологиях (чтобы проще было поддерживать). Что касается скорости обработки запросов, то nodejs регулярно находится в топе бенчмарков и конкурирует с C++, C и Java. А с учетом многопоточной конверсии через SharpJS 99.9% нагрузки создает именно конвертация, а не обработка запросов. Поэтому оптимизация через отказ от nodejs в пользу C++ избыточна.

Что с нагрузкой? Какой RPS выдержит?

Все зависит от вашего железа. У нас одна FullHD картинка конвертируется порядка 200 мс на одном ядре в формате webp, или 5RPS на FullHD картинке на 1 ядре Xeon. Но по факту у нас на этот микросервис стоит ограничение в 4 ядра, и картинки в среднем в 4 раза меньше, из-за чего конвертируется в 8 раз быстрее. В итоге 5 RPS * 8 Облегчение * 4 Ядер = 160 RPS. После чего результат укладывается в кеш на сутки, за счет чего микросервис совсем перестает нагружаться и 99,9% времени простаивает (см. скриншот из Grafana выше). А из кеша можно раздавать хоть 1 000 000 RPS .

Чем это лучше чем у NextJS?

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

Выражаю благодарность за иллюстрацию к статье главному дизайнеру проекта МТС Твой Бизнес, Экспертному центру по веб-разработке и Гильдии веб-разработчиков компании МТС за помощь в подготовке материала.

Вместо вывода

Если работаете с редактированием фото нерегулярно, используйте Paint. Он установлен во всех версиях Windows, простой в работе. IrfanView лучшее бесплатное приложение. Используется для просмотра файлов. Photoshop — лучший редактор для редактирования веса фото. Используйте его для работы с фотографиями. Сервис TinyJPG лучше других сжимает файлы расширения JPG. Resizenow — редактирует ширину и высоту фото. Для выбора лучшего решения поэкспериментируйте. Предварительно сохраните оригинальные фото в отдельную папку чтобы случайно не отредактировать. Совершив три-четыре пробы, вы определитесь с наилучшим сервисом или программой.