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

Содержание

11 бесплатных онлайн-сервисов для сжатия изображений

Открываешь большую картинку при слабом интернете — ощущаешь себя в 2007-м: тогда одно фото могло грузиться 2–3 минуты. Сегодня интернет быстрее, но и файлы стали больше. Оптимизируя картинки, вы немного ускоряете загрузку страницы и экономите место на сервере — всё это улучшает работу сайта.

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

Сжатие картинок влияет на поисковое продвижение сайта, но это не единственный важный параметр. В обучающем центре CyberMarketing вы узнаете, что еще нужно делать для успешной раскрутки в Яндексе и Google. У нас есть статьи, вебинары и видеокурсы от экспертов Click, Promopult и др.

Compressor.IO

Типы файлов: JPEG, PNG, WEBP, GIF, SVG

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

Максимальный размер: 10 МБ в бесплатной версии, 20 МБ с PRO-подпиской

11 бесплатных онлайн-сервисов для сжатия изображений

Простой сервис, где можно выбрать тип сжатия — без потерь или с ними. В первом случае сервис удаляет только метаданные (описание, ключевые слова, дату съемки и т.п.), а сама картинка остается нетронутой. Но даже это уже сэкономит до 10-15% места на диске.

Сжатие с потерями коМБинирует пиксели со схожими или идентичными цветами в одну группу: так размер картинки становится меньше в 2–3 раза, но визуально она остается практически такой же. Качество при этом не страдает.

Владельцы профессионального аккаунта могут настроить тип сжатия картинки: оставить часть метаданных, изменить степень компрессии и размер картинки. Также платная подписка дает возможность работать с неограниченным количеством файлов размером до 20 МБ. Стоить она будет $50 за год — оформить месячную подписку, увы, невозможно.

TinyPNG

Типы файлов: JPEG, PNG, WEBP

Максимальный размер файла: 5 МБ в бесплатной версии, 75 МБ при подписке Web Pro

11 бесплатных онлайн-сервисов для сжатия изображений

Сервис, что умеет сжимать даже анимированные PNG-файлы с прозрачным фоном. TinyPNG немного уменьшает количество оттенков в изображении — выборочно комбинирует соседние пиксели с похожими цветами. Пользователь почти не замечает этих изменений, но сама картинка становится заметно легче: сохраняет до 60–90% места на диске.

Все сжатые файлы открываются в современных Photoshop (CC 2015 и младше). TinyPNG предлагают отдельный плагин для Фотошопа, чтобы сохранять сжатые картинки прямо оттуда. Правда, он будет стоить целых $65, но зато платеж единоразовый. Если профессионально занимаетесь графическим дизайном и вам часто нужно сжимать картинки, то это солидно сэкономит время.

Как изменить размер фото без потери качества в фотошопе (Photoshop)

ImageRecycle

Типы файлов: JPG, PNG, GIF, PDF

Максимальный размер изображения: 30 МБ

11 бесплатных онлайн-сервисов для сжатия изображений

Простой сервис, где в базовой версии можно сжимать только по одной картинке за раз — зато её размер может доходить до 30 МБ. Бесплатно доступно два типа сжатия — без потерь (удаляются только метаданные) и с потерями.

Во втором случае сервис сам выбирает оптимальную степень компрессии — настроить её без регистрации невозможно. После — можно менять.

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

Легко интегрируется с WordPress, Shopify, Joomla, OpenCart, Drupal, Typo3, PrestaShop, Crafts и Magento: на сайте можно скачать плагины для каждой из CMS. Также разработчики предоставили PHP-скрипт для простой интеграции даже с самописными системами.

Optimizilla

Типы файлов: JPEG, PNG, GIF

11 бесплатных онлайн-сервисов для сжатия изображений

Бесплатный сервис, где можно сжать до 20 фото за один раз: удобно работать с большим количеством файлов. Перед скачиванием можно настроить степень сжатия: от минимальной (5-7%) до максимальной (до 97%).

Чем сильнее степень сжатия, тем темнее будет картинка. При понижении качества к показателю «30» (компрессия на 90%+) в картинке появляется слишком много шумов. Учитывайте это.

Optimizilla соблюдает конфиденциальность: все данные удаляются с сервера в течение часа с момента закрытия вкладки.

Imagify

Типы файлов: JPG, PNG, GIF и PDF

Максимальный размер картинки: 2 МБ в бесплатной версии, без ограничений в Infinite-аккаунте

11 бесплатных онлайн-сервисов для сжатия изображений

Этот сервис по сжатию картинок имеет сразу три режима компрессии: Normal (без потерь, удаляет метаданные), Aggressive (сжимает пиксели, тем самым немного снижает качество картинки и уменьшает вес почти вдвое) и Ultra (сжимает до 80-90%, но может пострадать качество).

Как поменять доменное имя на сайте битрикс

После регистрации открываются дополнительные настройки: изменение высоты и ширины картинки, возможность оставить EXIF-данные.

Если результат не понравится, картинки можно откатить в изначальное состояние. Вся информация о них будет храниться на сервере Imagify (по желанию эту опцию можно отключить).

Инструмент доступен как веб-сервис и плагин для WordPress. Разработчики планируют обеспечить подключение к PrestaShop, Magento, Shopify и Joomla. Можно использовать Imagify API, чтобы настроить интеграцию самостоятельно.

ImageOptim

Типы файлов: JPEG, SVG, PNG, AGIF и GIF

11 бесплатных онлайн-сервисов для сжатия изображений

Бесплатная программа для MacOS с открытым исходным кодом. Одно из ключевых преимуществ инструмента — тонкая настройка оптимизации. При сжатии без потерь удаляются EXIF-данные (серийный номер камеры, положение GPS и т.д.).

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

Те, кто хотят подключить этот инструмент на свой сайт, могут воспользоваться ImageOptim API. Правда, это уже платно — цена за использование API стартует от $12/мес за 2 000 изображений.

Toolur

Типы файлов: JPEG, PNG, BMP

Максимальный размер картинки: 30 МБ

11 бесплатных онлайн-сервисов для сжатия изображений

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

Но такой визуальный недочет компенсируется широким выбором настроек: можно выбрать один из пяти алгоритмов сжатия и настроить степень компрессии картинки до 97%. Также тут есть опция сжатия без потерь — когда удаляются только метаданные.

CompressNow

Типы файлов: JPG, JPEG, PNG и GIF

Максимальный размер картинки: 9 МБ

11 бесплатных онлайн-сервисов для сжатия изображений

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

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

Доступна пакетная обработка фото — можно загрузить до 10 изображений одновременно. Увы, сервис не поддерживает прозрачность фона в PNG и GIF — вместо него будет белый фон. Скачивайте результаты сразу — CompressNow не хранит данные на своем сервере.

Imageresizer

Типы файлов: JPG, PNG, WEBP, HEIC

11 бесплатных онлайн-сервисов для сжатия изображений

С помощью этого сервиса можно изменить размер картинки и уменьшить её вес на 70-90%. Даже после компрессии качество снимка хорошее — нет шумов и лишней резкости. Можно поменять разрешение картинки при этом не меняя её вес.

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

Image Smaller

Типы файлов: JPEG, SVG, PNG,TIFF и GIF

Максимальный размер картинки: 50 МБ

11 бесплатных онлайн-сервисов для сжатия изображений

Инструмент подходит для обработки тяжелых изображений — за один раз можно сжимать только одно фото, зато его вес может достигать 50 МБ. Настроить степень сжатия нельзя: сервис сам выбирает оптимальный вариант.

Разработчики Image Smaller обещают сжатие до 90%. В реальности цифры колеблются в пределах 40-85%: точные значения зависят от файла.

По желанию можно убрать только метаданные — тогда фотография будет занимать на 5-10% меньше места, чем оригинал.

Image Online Convert

Типы файлов: JPG,PNG, BMP,GIF, TIFF, EPS, ICO, SVG, WEBP, WBMP, HDR, TGA

11 бесплатных онлайн-сервисов для сжатия изображений

Сайт-конвертер медиафайлов: фото, аудио, видео.

Можно изменить формат картинки — это уже влияет на размер, так как BMP и PNG всегда будут больше аналогичного JPG-файла. Есть настройки степени компрессии, изменения размера и базовой редактуры фото — настройки резкости, контраста, фильтры и т.д.

Источник

Как сжать фотографию и сохранить качество

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

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

Часто перед пользователями возникает вопрос: « как сжать фотографию? », потому как « большой вес » изображения является причиной следующих неудобств:

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

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

Сжатие фото онлайн

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

Что такое спам папка в электронной почте

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

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

Сжатие фото онлайн

  • Web Resizer – с помощью данного онлайн-сервиса можно отредактировать фото: сжать, обрезать, добавить границы, изменить яркость, контраст, насыщенность и некоторые другие параметры:

Сжатие фото онлайн - 2

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

Программы для сжатия фотографий

« Как сжать размер фотографии? » — такой вопрос частенько предстает перед начинающими фотографами, да и не только перед ними.

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

Программы для сжатия фотографий

Уменьшить размер изображения в paint не составит труда, если выполнить следующие действия:

  • Открыть изображение с помощью Paint ;
  • Кликаем на кнопку « Изменить размер », после чего откроется окно:

Программы для сжатия фотографий - 2

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

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

Также уменьшить вес фотографии можно в профессиональном графическом редакторе Photoshop :

Для уменьшения веса необходимо:

  • Открыть фотографию в Photoshop ;
  • Задействовать функцию « Сохранить для веб и устройств » ( Save for Web
  • При уменьшении веса фотографии, на ней могут появиться следы, которые указывают на то, что она была сжата. Чтобы скрыть это, нужно немножко размыть фотографию, воспользовавшись инструментом Blur в фотошопе, установив значение 0,1 – этого будет достаточно;
  • Луше всего сохранять изображения в формате JPEG .

Сжимаем много

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

Как сжать сразу много фотографий онлайн? Для решения данной задачи существуют специализированные сервисы, такие как Kraken.io . За один раз данный сервис позволяет обработать большое количество фотографий, но их суммарный вес не может превышать 10 мегабайт.

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

Сжимаем много

Как сжать несколько фотографий в фотошопе

В фотошопе также есть возможность сжать несколько фотографий одновременно. Для этого необходимо создать action – алгоритм действий для пакетной обработки фотографий.

Ниже описаны шаги по созданию подобного алгоритма:

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

Сжимаем целую папку

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

Для решения данной задачи лучше всего воспользоваться архиватором, который уменьшит вес папки ( от 20 до 75 процентов ). Самым распространенным архиватором является WinRar :

Сжимаем целую папку

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

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

Источник

Как уменьшить изображения для сайта

kak-umenshit-izobrazheniya-na-sajte

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

Оптимизацию изображений можно рассматривать в 2 аспектах:

  • уменьшение веса изображений для увеличения скорости загрузки страницы;
  • как составляющая SEO – о птимизации — в этом случае кроме уменьшения веса изображениям присваиваются подходящие названия и прописываются альт теги.

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

Введение: Для чего уменьшать вес изображений на сайте

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

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

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

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

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

Какие сайты выводят скины cs go

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

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

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

Для уменьшения веса изображения:
  1. Определите размер изображения, которое будет отображаться на сайте.
    Не загружайте исходные картинки сразу. Если на сайте выводится изображение с размерами 500*600 пикселей, а загружается картинка в 3 раза большего размера, время загрузки будет такое же, как для исходной.

1. Как уменьшить размер изображения в Paint

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

1. Открываем картинку в Paint и на верхней панели кликаем «Изменить размер».

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

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

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

Сохранение изображения в Paint

Теперь сравним исходное изображение и итоговое:

Сравнение исходного и уменьшенного изображения вPaint

исходное изображение с размерами 2184*1456 пк и весом 735 Кб после уменьшения до 750*500 пк стало весить 142 Кб — вес уменьшился в 5 раз!

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

2. Как уменьшить размер изображения в P hotoshop

1. Открываем файл в редакторе, в верхней панели выбираем вкладку Image (Изображение) – Image Size (Размер изображения).

2. В открывшемся окне можно менять параметр ы ширины ( Width ), высоты ( Height ) и разрешения ( Resolution ). Причем, для сохранения пропорций должен быть отмечен флажок Сохранять пропорции ( Constrain Proportions ), в этом случае при изменении одного из параметров, другие меняются автоматически.
Для публикаций графики в вебе разрешени е составляет 72пк/дюйм.

Изменение размеров изображения в Photoshop

Вводим необходимые параметры и жмем «ОК».

3. Сохраняем изображение.

Сохранение изображения в Photoshop

Для сохранения изображения есть три варианта:

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

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

Сохранение для веб в Photoshop

    Формат ( как говорили выше, jpeg );

Я обычно выбираю 2 Варианта ( 2-Up ) — меняя качество можно одновременно видеть изменения в изображении и подобрать оптимальное для конкретного случая. Для статьи меня устроило качество 50, но это не постоянная величина, чаще я сохраняю изображения в пределах 60-75.

Снизу под отображаемыми вариантами выводятся данные итогового изображения в зависимости от заданных настроек ;

После выбора необходимых настроек жмем «Сохранить» ( Save ) и получаем оптимизированную для сайта картинку.

Анализируем результаты оптимизации изображения в Фотошопе:

Сравнение исходного, уменьшенного и оптимизированного изображенияPhotoshop

исходное изображение все то же 2184*1456 пк, 735 Кб, после уменьшения до 750*500 пк: при обычном сохранении 1 59 Кб — вес больше, чем при уменьшении в Paint, Сохранение для Веб (при качестве 50) — 63,7 Кб. Сжатое изображение в есит 11.5 раз меньше. Не забываем, что ко всем прочим плюсам джипег еще и прогрессивный.

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

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

3. Онлайн-сервисы по оптимизации изображений

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

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

Интерфейс Optimizilla

Форматы .jpg, .png, .gif. Предоставляет 3 варианта оптимизации:

  1. Сжатие с потерями Lossy — выбрано по умолчанию ;
  2. Сжатие без потерь — Lossless ;
  3. Expert – с выбором параметров оптимизации .

Варианты оптимизации сервиса Kraken

Загружаем файлы, которые надо оптимизировать.

Загрузка файлов в сервисе Kraken

По завершению оптимизации сервис выдает отчет о результатах. Для нагрузки файла жмем на кнопку « Do w nload File » — уменьшенная картинка открывается в соседней вкладке.

Результатя оптимизации в Kraken

Если результат устраивает, сохраняем изображение (клик на фото правой кнопкой мыши — Сохранить как)

3. JPEG Mini

Простой интерфейс, результат оптимизации можно посмотреть сразу же. Работает только с форматом jpeg.

Интерфейс сервиса JpegMini

4. Puny PNG

Сервис сжатия изображений в JPG, PNG и GIF- ф орматах. Имеет ограничени е по весу в 500 Кб и количеству 20 одновременно.

4. Уменьшение размера с помощью плагинов сжатия изображений

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

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

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

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

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

Источник

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

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

По данным HTTP Archive, средний размер веб-страницы — 2,4 Mb и 64% приходится на изображения. Вы все правильно поняли: средний размер изображений на веб-странице — 1,5 Mb.

Какой размер страниц на вашем сайте?

  • уменьшение общего размера страницы;
  • экономия трафика;
  • сокращение времени загрузки страницы и повышение SEO рейтинга.
  1. Самостоятельные инструменты: На сайте ничего устанавливать не нужно. Просто зайдите на страницу сервиса, загрузите изображения и получите оптимизированные изображения.
  2. Плагин WordPress: Установите плагин на ваш сайт на WordPress и, в зависимости от выбранных настроек, размер изображения будет сокращаться при загрузке на сайт.
  3. Расширение для Joomla: Установите расширение на ваш сайт на Joomla и изображения будут оптимизированы на вашем сервере с Joomla.

Список инструментов

Самостоятельные инструменты

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

1. Tiny PNG

Для уменьшения размера файлов PNG или JPG на TinyPNG используются методы сжатия с потерями. Можно загружать до 20 изображений, размер каждого из которых не может превышать 5 Mb.

2. Compressor

Compressor позволяет сжать изображения с уменьшением объема до 90% и при этом сохранить высокое разрешение. Он работает с JPEG, PNG, GIF и SVG-файлами. Ограничение по размеру — 10 Mb.

3. Puny PNG

PunyPNG подходит для дизайнеров и разработчиков. Не годится для работы, если размеры ваших изображений исчисляются мегабайтами: ограничение по размеру — 500 KB, по количеству файлов — 20 штук. Возможно сжатие JPG, GIF и PNG-файлов.

4. Compress Now

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

5. Kraken

При оптимизации Kraken позволяет вам выбирать между сжатием с потерями, без потерь и с возможностью самостоятельной настройки. Файл можно загрузить с компьютера, Dropbox, Google drive или Box.

6. Optimi Zilla

Загрузите до 20 JPEG или PNG-файлов на OptimiZilla. Если вы загружаете несколько файлов, то скачать их все можно одним архивом.

7. JPEG Mini

Избавьтесь от лишних килобайт с помощью JPEG Mini. Возможна обработка исключительно файлов JPG.

8. Imagify

Здесь можно выбрать из нескольких уровней сжатия: нормальным, агрессивным и ультра-сжатием. Файлы хранятся до 24 часов на Imagify, так что их можно скачать позже, если захотите.

Вышеуказанные самостоятельные инструменты помогут вам в уменьшении размера файлов. А теперь давайте рассмотрим плагины для WordPress.

Плагины WordPress:

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

1. EWWW Image Optimizer

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

2. WP Smush

Этот замечательный плагин от wpmudev установлен более 400 тысяч раз. Он позволяет сжимать изображения партиями или в момент загрузки на сайт. В бесплатной версии WP Smush позволяет обрабатывать до 50 изображений подряд. Плагин обрабатывает файлы в форматах JPEG, PNG и GIF.

3. Optimus

Optimus от KeyCDN помогает уменьшить изображения до 70%, но есть ограничение по размеру — 100 kB.

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

4. TinyPNG

Выполните сжатие файлов в формате JPEG и PNG с помощью TinyPNG. Именно этим инструментом пользуюсь я, и он меня всем устраивает.

5. Short Pixel

Short Pixel сжимает не только изображения, но и PDF. Инструмент совместим с WooCommerce и обрабатывает GIF, PNG, JPG и PDF-файлы.

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

Расширения для Joomla

Следующие расширения бесплатны, так что попробуйте и решите, что подходит именно вам.

1. Imgen

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

2. Image Recycle

Image Recycle — популярное расширение для Joomla, помогающее оптимизировать изображения и PDF-файлы. Можно настроить автоматическое сжатие новых изображений или уменьшить размер уже существующих. Также существует возможность задать уровень оптимизации для отдельных типов файлов.

3. EIR

Easy Image Resizer меняет разрешение загруженных изображений с помощью медиа-менеджера. EIR осуществляет сжатие на базе Optimus.io.

4. Prizm Image

Prize Image помогает удалить метаданные из JPEG, конвертировать прогрессивные JPEG в последовательные и наоборот, оптимизировать PNG и GIF без ущерба для качества. Для сжатия плагин использует Prizm Image API.

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

На HOSTING.cafe всегда можно сравнить предложения виртуальных серверов и хостинга.

Источник

Пошаговая инструкция: как сжать картинку без потери качества и вставить её на сайт?

как сжать картинку

8 лет работаю удалённо и создаю различные источники дохода. Строю бизнес в интернете и активно инвестирую.

Как посмотреть закладки на компьютере

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

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

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

Весь процесс будет делиться на 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.

Как добавить фото на сайт wordpress

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

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

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

Источник
Рейтинг
Загрузка ...