Содержание

Как сжать фото чтобы качество картинки не пострадало? Обзор сервиса JpegMini

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

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


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

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

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

На главной страничке онлайн сервиса Вы можете сами оценить корректность работы по сжатию на тестовых фотографиях. Перемещая ползунок на фото вправо-влево, можно визуально оценить отличия оригинала от его сжатой версии весом в 3, 5 а порой и в 8 раз меньше! Никакой визуальной потери качества Вы не обнаружите.

Как сжать фото в JPEGMini


Чтобы уменьшить вес фотографии, нажимайте на кнопку «Upload Photo» и подгружайте изображение со своего компьютера:

Работать на сервисе JPEGMini можно без регистрации, однако регистрация позволит загружать сколько угодно много изображений, создавать для них альбомы, делиться фото на популярных сервисах Picasa, Flickr, Facebook!

После того, как фото будет загружено и обработано, Вы можете визуально сравнить оригинал и результат. Цифра в нижнем правом углу на красном фоне, означает во сколько раз был уменьшен вес фото, а шкала с показателями прямо под изображением дает более точные значения этого. В данном случае вес фото уменьшился практически в два раза, а качество картинки абсолютно не пострадало (оригинальное разрешение снимка 4000х3000 px):

Чудеса да и только ) Чтобы скачать оптимизированное фото, нажмите на кнопку «Download Full Res.». Там не будет каких-либо водяных знаков и пр. — всё абсолютно бесплатно, как и было указано ранее.

При использовании онлайн сервиса JPEGMini следует иметь ввиду следующее правило: чем больше размер исходного изображения, тем с большей степенью компрессии оно может быть сжато. Если для фото с исходным размером 2 мегапикселя конечный вариант уменьшается на 40 – 60%, то при использовании 8-мегапиксельного фото степень сжатия составит 70% – 80%, и всё это без потери качества! По крайней мере на глаз, Вы абсолютно ничего не заметите.

JPEGMini – идеально решение для того, чтобы освободить место на жестком диске, так как общий вес хранящихся на нем фото можно уменьшить в 2-3 раза. Для веб-дизайнеров и владельцев блогов этот сервис незаменим тем, что позволяет в несколько кликов оптимизировать JPEG графику, добиваясь тем самым быстрой загрузки страничек своего сайта в браузере.

Редакции JPEGMini


JPEGMini имеет несколько редакций:

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

Итог

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

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

Автор статьи: Сергей Сандаков, 40 лет.
Программист, веб-мастер, опытный пользователь ПК и Интернет.

Как сжать фото без потери качества онлайн – Юрий Шанти

Сжатие изображений в web-версии

С помощью TinyJPG.com можно уменьшить вес картинки без потери качества.

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

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

В версии без регистрации возможно ужать разом до 20 фотографий каждая их которых должна весить не более 5 мегабайт.

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

Вы можете поэкспериментировать и попробовать сжать свои изображения, но на сайте скрипта есть пример изображения, которое по итогу ужимается на 70%!

Напишите в комментариях, на сколько максимально получилось у вас сжать картинку на этом сервисе?

Платная версия TinyJPG от 25$

Преимущества платной версии TinyJPG:

  1. возможность заливать фотографии до 75 мегабайт каждая
  2. возможность заливать больше 20 изображений за раз
  3. детальная статистика скрипта сжатия

По мне, так премиум-версия не очень нужна для тех, кто использует web-версию скрипта.

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

Во-вторых, 25$ за год это приличная сумма.

Донат ещё можно рассмотреть, но не такую большую фиксированную сумму.

Плагин для WordPress

У сервиса есть официальный плагин для CMS WordPress.

Скачать можно здесь: https://wordpress.org/plugins/tiny-compress-images/

Обновляется плагин достаточно часто.

На момент написания статьи официальный апдейт плагина был всего две недели назад.  

Сравнение сервисов по сжатию изображений

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

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

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

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

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

Эту статью могли также искать

  • уменьшить размер фото онлайн без потери качества до 2 мб
  • уменьшить вес фото онлайн без потери качества до 1 мб
  • как уменьшить вес фотографии jpeg без потери качества
  • как разрезать картинку на равные части online
  • как уменьшить объем фото онлайн без потери качества
  • сжать фото онлайн без потери качества бесплатно
  • уменьшить вес фото онлайн без потери качества
  • как уменьшить размер фото без потери качества
  • как разрезать картинку на части в photoshop
  • как изменить размер фото без потери качества
  • сжать фото онлайн
  • как сжать видео без потери качества

Как сжать картинку без потери качества и вставить её на сайт?

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

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

Инструкция будет на примере моего блога, делаю её специально для своих авторов, которые пишут статьи на блог. Поехали…

Весь процесс будет делиться на 3 этапа:

  1. Подбор изображения и создание скриншотов.
  2. Обрезка под ширину сайта.
  3. Сжатие веса файла.

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

Подбор изображения для статей

Начнём с обычных картинок, потом перейдём к скриншотам. Многие начинающие вебмастера допускают ошибку, загружая изображения не под размер сайта. Какой смысл загружать картинку, скажем, размером 1280 на 720, если в статье она показывается размером 640 х 360? Поэтому, первым делом, нужно определить, какой размер изображения у вас будет отображаться в статье.

Как определить? Показываю на примере браузера Google Chrome. В этом браузере, если нажать кнопку F12, откроется панель инструментов веб-мастера, через которую можно определить ширину отображаемого контента.

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

Шаг 1. Заходим в любую статью на сайте и нажимаем F12 (для браузера Гугл Хром) и в панели нажимаем сюда (выделение элемента сайта):

Шаг 2. Наводим курсором на любой абзац текста и видим какая ширина контента в статье.

У этого скрина уменьшен размер, поэтому он менее чёткий.

У меня получается ширина области 615 пикселей. Но картинки в статье я вставляю на 2 пикселя меньше, то есть 613 px. У вас будет другой размер.

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

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

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

Допустим, я нашёл подходящую картинку для статьи, возьму вот этих матрёшек, но она размером 2588 х 1232. Чтобы её уменьшить до нужного размера, я использую стандартную программу Microsoft Office Picture Manager.

Открываю её и нажимаю «Изменить рисунки…»

Сначала можно её обрезать, если есть что-то лишнее, а потом нажимаем «Изменение размера».

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

Жмём «ОК» и сохраняем.

Сжимаем вес картинки

Есть 2 сервиса, которыми я пользуюсь:

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

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

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

Если вы делаете картинку в фотошопе

Когда вы что-то редактируете, оформляете картинку в своём стиле в фотошопе, то сохраняйте её для веб, вот с такими примерно настройками.

Конечно, если перестараться и сильно сжать, то качество будет испорчено, поэтому тут уже надо самим смотреть. Я ориентируюсь по весу, если много цветов, то сжатое фото или картинка весит в среднем 70-90 кб. Если простая, то 30-60 кб.

В чем разница JPG и PNG?

Прежде, чем перейти к скриншотам, объясню одну маленькую фишку. Многие думают, что файлы формата JPG весят меньше, но это не так. Иногда PNG сжимается круче, и качество остаётся в разы лучше.

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

Делаем скрин и сжимаем

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

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

Как загружать картинку на сайт Вордпресс?

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

Заходите в сервис translit.net и пишете по-русски название, нажимаете «В транслит». Копируете и переименовываете изображение.

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

Всё, изображение оптимизировано и загружено.

На всякий случай проверьте статью ещё через Google PageSpeed, он вам покажет нужно сжимать ещё ваши картинки или нет.

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

Оптимизация изображений для сайта, как уменьшить размер фото без потери качества ✔ PROject SEO

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

Для чего необходимо оптимизировать изображения

Необходимость в подобной обработке изображений может быть вызвана несколькими причинами:

  • с целью улучшения общей привлекательности контента. Многие посетители обращают внимание на графику и общую стилистику сайта. Чем ярче и информативнее изображения, тем больше шансов того, что взгляд посетителя зацепится за нужную информацию. Яркие картинки, которые хорошо оптимизированы, повышают лояльность и интерес посетителей сайта;
  • с целью ускорения работы сайта. Обычно качественные изображения сказываются на скорости работы интернет – сайтов. Чем больше по объему картинка, тем медленнее работает ресурс. В интернете клиент не любит ждать, потому медленная загрузка сайта может негативно повлиять на лояльность посетителей.

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

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

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

  • качество;
  • формат;
  • размеры графических файлов.

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

Виды форматов изображений

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

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

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

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

Качество загружаемых изображений

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

Нюансы размеров файла

Данный фактор работы с картинками можно рассматривать с двух основных позиций:

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

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

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

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

Варианты онлайн инструментов

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

Данная платформа позволяет сжимать и оптимизировать бесплатно в месяц до 500 картинок.  Данный вариант площадки отличается высокой скоростью работы и понятным интерфейсом. Один прием позволяет загрузить до 20 картинок размером не более 5 Мб. Готовые изображения можно загрузить на площадку Dropbox.

Compressor

Бесплатный удобный ресурс, оптимизированный на обработку изображений как с сохранением, так и с потерей качества. Неудобство в том, что сервис работает исключительно с форматами JPG и PNG. Процент сжатия возможен до 90%, но размеры оригиналов не должны превышать 10 Мб. Для грамотной работы с данным редактором важно усвоить несколько деталей и подводных камней:

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

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

Image.online-convert

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

Оптимизация фотографий на сервере ресурса

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

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

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

Kraken

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

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

  1. Для обеспечения связи потребуется предоставление плагину таких данных от сайта, как API Key и API Secret. Они вносятся в настройках в соответствующей строке. После процедуры будут загружены все данные об изображениях на ресурсе.
  2. После процедуры есть возможность оптимизации как отдельного фото на выбор, так и все файлы единым целым.

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

Imagify

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

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

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

  1. После активации и установки плагина пользователю будет доступна стартовая страница ресурса.
  2. После прохождения всех указанных этапов можно приступать к обработке изображений.
  3. Необходимо выбрать режим оптимизации, а также при надобности дополнительные функции.
  4. Далее указать необходимые настройки, нажать сохранить и перейти в Bulk Optimization.
  5. На данной странице необходимо будет снова указать необходимый режим обработки и запустить IMAGIF’EM ALL.

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

Варианты декстоп приложений для работы с фотографиями

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

Adobe Photoshop

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

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

Total Image Converter

При необходимости расширенного функционала выбранной программы можно обратить внимание на этот вариант. Основными преимуществами Total Image Converter клиенты считают:

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

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

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

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

Ширина1920168016001536144013661280128012801024
Высота108010509008649007681024800720768
% от общего количества посетителей13,411,544,662,703,7813,856,012,131,511,59
Общие кластеры13,4112,6813,8511,25

Ширина768414375375360320
Высота1024736812667640568
% от общего количества посетителей2,805,382,7817,1215,135,62
Общие кластеры2,805,3819,8915,135,62

DesktopMobile
19201680-144013661280-1024768-375360-320Плотность пикселей
381*581333*508 [близко к 336*512]270*412253*386195*287168*2561K
390*574336*5122K
585*852504*7683K

DesktopMobile
Breakpoints19201680-144013661280-1024768-375360-320
До обработки, Мб10,810,810,810,810,810,8
После обработки, Мб1,51,21,10,952,20,95
Разница, Мб9,39,69,69,858,69,85
Экономия веса, %86,1188,8988,8991,2079,6391,20

Оригиналtinypng.comkraken.ioimagify.iocompressjpeg.com
Размер, Кб402296297301302