Фотографии, картинки и скриншоты на вашем сайте нужны для иллюстрации написанного, привлекательности и выделения среди прочих сайтов. Кроме того, мы любим делиться фото с друзьями по электронной почте или загрузить ее в социальных сетях для всеобщего обозрения.
Возникает проблема как уменьшить вес фотографии без ухудшения качества, чтобы быстро ее загрузить в соц.сети, передать по электронке или разместить на блоге. Как оптимизировать картинки для лучшего продвижения вашего сайта?
Небольшие по весу фото не нагружают сервер вашего хостинга, позволяют увеличить скорость блога и ускорить его раскрутку. Я расскажу вам о 2-х самых быстрых способах уменьшения веса фотографий.
Как уменьшить вес фотографий в программе Microsoft Office Picture Manager.
Самое быстрое для уменьшения веса фото - использовать уже имеющиеся программы, входящие в пакет Microsoft Office, например менеджер по обработке изображений Microsoft Office Picture Manager.
1 Способ как оптимизировать картинки
Сжать для документов. В этом случае фотографии сохраняются в размере 1024х768, это достаточно хорошее качество и вес фото с 6.7 МБ уменьшается до 478 КБ
Сжимать для веб-страниц. В этом случае получаются фото среднего качества в размере 448х336 точек и исходный размер уменьшается с 6.7 МБ до 91.5 КБ
Сжимать для сообщений электронной почты. Сейчас происходит самое большое уменьшение размера до 160х160 и веса с 6.7 МБ до 11.6 КБ
Не забываем Сохранять как , это лучше, чем Сохранить, потому что не исчезает исходный файл в самом хорошим «тяжелом » качестве.
Кроме фотографий также можно оптимизировать картинки.
2 Способ как оптимизировать картинки
Используем стандартные ширину и высоту. Ставим точку, затем жмем черный треугольник. В выпадающем меню выбираем нужную опцию (например веб-мелкий 448х336 точек) ОК
Размер картинки оптимизируется до 448х336 точек, а вес можно посмотреть после сохранения. В моем случае вес фотографии с 6.7 МБ уменьшился до 123 КБ.
Используем произвольные ширину и высоту. Ставим точку, задаем нужную ширину и высоту- ОК — Сохранить как
Размер получится 400х300 точек соответственно и вес 103 КБ
Используем опцию проценты от исходных ширины и высоты. Ставим чек-бокс, выбираем процент (например 10)- ОК - Сохранить как.
Получается новый размер 397х298 точек и новый вес 103 КБ
Порой необходимо уменьшит размер фотографии на компьютере для отправки их по электронной почте друзьям или знакомым. Это необходимо, например, тогда, когда мы делаем снимки современными цифровыми фотоаппаратами, с помощью которых получаются очень качественные фото.
Размер фотографий с помощью таких фотоаппаратов получается очень большой. И в основном такие снимки необходимы для их дальнейшего редактирования и качественной печати.
Но, если нужно отправить какие-либо фотографии по электронной почте просто для того, чтобы просматривать их на компьютере, то нет необходимости отсылать большие тяжелые файлы. Особенно это важно учитывать, если у одной из сторон используется не быстрый и не безлимитный Интернет.
Условная ситуация
Допустим, у нас безлимитный быстрый Интернет, а у нашего друга, которому решили отправить фотографии, дорогой и медленный Интернет (например, рубля по 2 за 1 мб. полученной информации).
В таком случае, при отправке даже 5 фотографий весом по 4 мб. отправка сообщения с фотографиями нам не доставит никаких особых затруднений. А вот наш друг будет получать это сообщение с фотографиями очень долго и еще при этом заплатит своему оператору связи около 40 руб.
Поэтому, просто для просмотра фотографий на компьютере лучше использовать перед отправкой их по электронной почте.
Уменьшение размера фото программой Paint
Существует много способов чтобы уменьшить у фотографии ее размер. Но в данной статье мы рассмотрим, как это сделать с помощью программы Paint, которая уже входит в операционную систему Windows. Я рассмотрю Paint в Windows 7 (в XP эта программа работает по такому же принципу).
В качестве примера я сделал снимок со своего фотоаппарата с разрешением 9 mega pixels, и у меня получилось фото размером 4,35 мб. Уменьшу размер этой фотографии. Для этого на данный файл нажимаю правой кнопкой мыши, и в дополнительном меню выбираю: Открыть с помощью -> Paint.
Выбранный файл открывается программой Paint, в которой видны первоначальные размеры фотографии:
Для уменьшения размера фотографии нажимаем на кнопку: Изменить размер (как показано на снимке выше) и в выпадающем меню выбираем изменение в процентах или пикселях. Я выбираю в пикселях, оставляю галочку: Сохранять пропорции и изменяю размер по горизонтали на 1024 (или 1280) пикселей. Этих размеров вполне достаточно, чтобы на любом мониторе компьютера хорошо отображалась фотография:
Для изменения размеров фотографии в Windows XP заходим в меню Рисунок -> Растянуть и изменяем размер в процентном отношении. Либо в меню Рисунок -> Атрибуты и изменяем размер в точках, например как в нашем описанном в этой заметке случае: 1024 по горизонтали и 768 по вертикали.
После изменения размеров фотографию необходимо сохранить. Для этого выполняем всего 3 действия:
- В меню вверху в левом углу левой кнопкой мыши открываем выпадающий список выбора функций;
- Наводим курсор на: Сохранить как ;
- В дополнительном выборе нажимаем на: Изображение в формате JPEG (один из самых распространенных форматов):
Далее нужно выбрать место, куда сохранить измененное фото. Например, у меня первоначальное фото (для этой заметки) находится на Рабочем столе. Файл называется Фото . При сохранении, чтобы не изменить первоначальный файл, называю файл с измененными размерами по-другому (например, Фото 2 ) и нажимаю Сохранить :
Готово! Теперь по свойствам файлов видим, что с помощью стандартной программы Paint мы уменьшили исходный размер фотографии в 10 раз, притом, что при просмотре на компьютере разницы в качестве особо не заметно:
Другие функции программы Paint
В программе Paint можно не только изменять размеры изображений, но также можно , рисовать, добавлять текст, фигуры, и т.д. Поэкспериментируйте со своими фотографиями, при этом, если не понравится результат какого-либо действия, можно всегда отменить его с помощью кнопки отмены последнего действия, которая находится в левой верхней части окна программы: 
Итак , при передаче фотографий через Интернет, рекомендую всегда проверять размер передаваемой фотографии. Кстати, это можно сделать, нажав правой кнопкой мыши на фотографию, и в появившемся меню выбрав: Свойства .
Если размер фотографии окажется слишком большим, можно изменить ее размер, например с помощью программы Paint. Для этого открываем файл с помощью этой программы, изменяем размер в %, или по горизонтали на 1024 (можно и меньше) и сохраняем в формате JPEG.
В уроке «Как сжать фото » вы узнаете способ сжатия фотографий без скачивания дополнительных программ и без использования онлайн сервисами.
По традиции опишем нашу задачу:
Что мы имеем : фото, которое нам необходимо сжать. Допустим мы хотим отправить фотографию по почте, но фото слишком большого объёма.
Что нам необходимо : установленный пакет офисных программ Microsoft Office
В этом уроке речь пойдет конкретно об установленной программе «Диспетчер рисунков Microsoft Office» (в примерах используется операционная система Windows 7), которая уже входит в пакет программ Microsoft Office 2007. Найти её можно в меню «Пуск» -> Все программы -> Microsoft Office. Иконка этой программы в меню «пуск» выглядит так:
Рис 1. Расположение «Диспетчер рисунков Microsoft Office»
Одним кликом левой кнопки мыши запускаем «Диспетчер рисунков Microsoft Office», откроется окно программы:
Рис 2. Окно программы «Диспетчер рисунков Microsoft Office» с рисунком
Есть еще более быстрый вариант открытия фото в программе «Диспетчер рисунков Microsoft Office». Находим фото, которое необходимо сжать:
Рис 3. Фото, которое необходимо сжать
Рис 4. Другой способ открытия программы «Microsoft Office Picture Manager»
Наша фотография откроется в программе:
Рис 5. Фото открытое в программе «Microsoft Office Picture Manager»
Для того, чтобы сжать фото кликаем «Изменить рисунки…»:
Рис 6. Кнопка «Изменить рисунки…»
После этого, справа, появится дополнительное поле с параметрами изменения рисунков, нажимаем кнопку «Сжатие рисунков »:
Рис 7. Кнопка «Сжатие рисунков»
После нажатия на кнопку «Сжатие риснков» в этом же блоке появятся параметры сжатия рисунка. В поле «Сжимать для» для соотношения качества и объема выбираем пункт «документов»:
Рис 8. Параметры сжатия рисунов
Как мы видим из поля ниже «Ожидаемый общий размер» исходный файл был 398 Кб а после сжатия фото будет «весить» около 192 Кб. Практически фото сжато более чем в два раза. Больший показатель сжатия будет у фото с большим размером, там разница в размерах будет более 10 раз!
После выбора способа сжатия кликаем на кнопку «OK», чтобы начать процедуру сжатия фото :
Рис 9. Нажимаем кнопку «ОК»
После этого программа выполнит необходимые действия для сжатия фото, понять об окончании процедуры сжатия вы сможете по изменившемуся написанию имени вниза программы и знаком в начале имени файла «*»:
Рис 10. Метка об изменении файла картинки
Теперь наше фото находится в измененном состоянии, но результат сжатия еще не сохранен. Чтобы сохранить изменения в фото, нажимаем комбинацию клавиш на клавиатуре «Ctrl + S» (эта комбинация практически во всех программах Windows сохраняет изменения).
Все, операция по сжатию фото выполнена и наш файл теперь занимает в два раза меньше объема. Теперь мы можем отправять его по почте, выкладывать в интернет или сохранять на флэшку.
С развитием технологии фотографии и доступности камер — на смартфонах или в профессиональных фотоаппаратах количество и качества фотографий стало большим. А чем качественнее изображение — тем больше весит и занимает место на компьютере, виртуальном диске или внешнем носителе.
Проблемы с большим весом изображения
Большой вес фото — причина проблем передачи и хранения файлов:
Трафик. Есть много населенных пунктов, в которых нет безлимитного и относительно недорогого интернета. Села или поселки городского типа, Норильск и Дальний Восток. Так что если нужно передать картинку по почте или в социальной сети, это действие забирает много трафика. Чтобы не тратить весь интернет на передачу нескольких файлов лучше сжать изображение — так выйдет намного экономнее.
Загрузка. Даже если у вас быстрый и безлимитный интернет, изображение, которое весит много, будет грузиться долго. К тому же, если грузить изображение на мобильный телефон, который подключен не к Wi-Fi, а к мобильному интернету, это займет много времени и будет только раздражать пользователя, отнимать время.
Передача на внешних носителях. Если нужно перенести папку фото на флешке с одного устройства на другое, то карта памяти должна быть большого объема. Если такой нет, то приходится выкручиваться и сжимать размер изображений, чтобы поместилось на внешний носитель.
Ограничения по размеру. На многих сайтах или в социальных сетях есть ограничение по размеру фотографий, которые можно загружать на ресурс. Если новая аватарка больше, чем разрешенный размер, не обязательно отказываться от обновления фото — достаточно сжать изображение до указанных размеров — и можно загружать.
Поэтом проблема, как сжать фото касается многих людей. Разберем способы как уменьшить объем фото через онлайн сервисы или в программах, а также дадим ответ на вопрос, как сжать большие объемы данных, папки с изображениями.
Как уменьшить объем фото онлайн
Оптимизация изображений с помощью онлайн сервисов — самый простой способ сжать фото до нужного размера. Если вопрос трафика не стоит остро, а также если подключение к интернету стабильное и быстрое, то незачем упражняться с программами, можно предоставить сайту и снизить вес в пару кликов.
Как сжать фото на компьютере через программы
Если интересно уменьшение в режиме офлайн при экономии трафика, отсутствии подключения, можно воспользоваться привычными программами на компьютере.
Ошибка, которую часто совершают, стремясь уменьшить размер фото — жертва качеством в году маленькому весу. В итоге фото получается размытое и испорченное. При этом, картинка может даже не помещаться на экран полностью.
Paint
Если нет подключения к интернету, а обработать изображение нужно срочно, возникает вопрос, как сжать фотографию на компьютере, не устанавливая ничего дополнительно. Лучший способ сжать фото на компьютере — просто обработать изображение в Paint. Графический редактор есть у всех пользователей Windows по умолчанию, так что это самый доступный способ — не нужно ничего скачивать и устанавливать. Для этого нужно:
Создайте копию исходного изображения и экспериментируйте с процентами, на которые хотите сжать фото. Обычно хорошо работает от 50 до 80 процентов.
Mac
Если не используете систему Windows, то у вас не стоит Paint. Тогда можно воспользоваться функцией предварительного просмотра на операционной системе Mac:
Adobe Photoshop
Если хорошо работаете в профессиональном графическом редакторе, то наверняка знаете, как сжать фото в фотошопе.
Может быть интересно: Но если только начинаете постигать все тайны, то это знание точно пригодится. Итак, последовательность действий, если хотите сжать фотографию в фотошопе:
Массовая оптимизация изображений
Часто спрашивают, как сжать несколько фото на компьютере. Делать это по одному фото не удобно. Такая опция доступна онлайн в специальных сервисах, также можно воспользоваться программой для сжатия фото, чтобы вес сразу нескольких изображений уменьшился.
Один из удобных онлайн сервисов для сжатия сразу нескольких фото Kraken.io. За один раз можете загрузить несколько картинок, суммарным размером до 10 мегабайт. После нужно выбрать сжатие — и сервис обработает все изображения разом. Повторять можно несколько раз, пока не измените размер всех фото. Это быстрее, чем сжать фото по одной, но отнимет время, если изображений много.
Однако, если речь идет о больших объемах, стоит сжать фото через программы. Мы рекомендуем обратить внимание на Picture Combine. Легкая, не займет много места, удобно обрабатывать фото, с простым интерфейсом и без лишних наворотов. В ней вы можете работать с разными форматами картинок — jpeg, jpg, png и другие популярные форматы. Там можно сжимать фото целым пакетом.
Уменьшение объема всей папки
Если нужно переместить с устройства на устройство папку на флешке, то пользователю необходимо знать как уменьшить вес фото для целой папки. Для того, чтобы не возиться с каждой отдельной фотографией, нужно воспользоваться архиватором. Он уберет от 20 до 75 процентов объема и фото поместятся на внешний носитель.
Практически на всех компьютерах есть распространенный архиватор WinRar. Программа устанавливается отдельно, но центры, которые ставят ПО на компьютер устанавливают по умолчанию для всех пользователей вместе с пакетом Офис.
Чтобы сжать папку:
- Выберите правой кнопкой мыши, а после кликните по надписи “Добавить в архив”.
- В окне, которое откроется, выберите, как нужно архивировать, в каком формате после сжатия будет доступна папка.
- После выберите “Ок” — и процесс запустится.
Для того, чтобы потом просмотреть сжатые фото, нужно обратно разархивировать через WinRar. То, сколько займет этот процесс, зависит от веса папки и обновления программы.
Оптимизация изображений - один из важных моментов в общей оптимизации сайта, на который многие не обращают внимания. А между тем, этот момент оказывает существенное влияние как на поведение пользователей на ресурсе, так и на ранжирование сайта.
Оптимизацию изображений можно рассматривать в 2 аспектах:
- уменьшение веса изображений для увеличения скорости загрузки страницы;
- как составляющая SEO - о птимизации — в этом случае кроме уменьшения веса изображениям присваиваются подходящие названия и прописываются альт теги.
В сегодняшней статье я рассмотрю оптимизацию изображения для ускорения загрузки страницы — то есть, уменьшение веса изображений.
Введение: Для чего уменьшать вес изображений на сайте
Думаю, всем давно известно, что вес изображений влияет на скорость загрузки страницы.
Статистические исследования показывают, что посетители ждут загрузки сайта порядка 3 секунд на стационарных компьютерах и 5 — на телефоне!
Если время ожидания превышает эти числа, то посетители уходят, и тогда уже не важно, на сколько красивы ваши изображения, никто их все равно не увидит.
Каким должен быть вес изображений?
Для различных ресурсов выбор веса изображения — индивидуальный параметр, для интернет-магазин с большим ассортиментом товаров допустимый вес не более 50-70 Кб. Для сайтов — портфолио, в которых ставка делается именно на красивые, качественные изображения - больше. Старайтесь придерживаться максимально возможного уменьшения веса картинок, а если большие изображения необходимы вашему ресурсу, лучше дайте посетителям просмотреть их в полном размере в новой вкладке.
Оптимизация изображений позволяет уменьшить их вес в разы без ощутимой потери качества.
Вес изображения измеряется в килобайтах (Кб) или мегабайтах (Мб), зависит от размеров в пикселях (высоты и ширины), количества деталей и от формата изображения.
Самый распространенный графический формат изображений формат JPG . Он используется повсеместно, его «понимают» все компьютеры, просмотрщики и графические редакторы. В этом формате публикуются графические материалы на сайте. Он не поддерживает прозрачности и анимацию, но для этого используются другие форматы. И говорить я сегодня буду именно об изображениях в формате JPG .
Для уменьшения веса изображения:
- Определите размер изображения, которое будет отображаться на сайте.
Не загружайте исходные картинки сразу. Если на сайте выводится изображение с размерами 500*600 пикселей, а загружается картинка в 3 раза большего размера, время загрузки будет такое же, как для исходной. - Уменьшите размеры.
к содержанию
1. Как уменьшить размер изображения в Paint
Начну с Paint , потому что это программа входит в стандартный набор ОС Windows и не требует установки дополнительных графических редакторов.
1. Открываем картинку в Paint и на верхней панели кликаем «Изменить размер» .
2. В открывшемся окне вводим необходимые размеры (можно изменять в процентах, можно в пикселях. По умолчанию в Paint стоит галочка «Сохранять пропорции» , это позволит уменьшить изображение без искажений), жмем «ОК» .
3. Сохраняем полученное изображение. Старайтесь сразу сохранять картинки с описательными названиями, в дальнейшем это упростит работу с ними, облегчит поиск и загрузку на сайт.
Теперь сравним исходное изображение и итоговое:
исходное изображение с размерами 2184*1456 пк и весом 735 Кб после уменьшения до 750*500 пк стало весить 142 Кб — вес уменьшился в 5 раз!
При этом разница в качестве уменьшенного изображения и исходного, уменьшаемого скриптами (если таковые установлены на сайте) на глаз не заметна.
2. Как уменьшить размер изображения в P hotoshop
1. Открываем файл в редакторе, в верхней панели выбираем вкладку Image (Изображение) - Image Size (Размер изображения) .
2. В открывшемся окне можно менять
параметр
ы
ширины (Width
)
, высоты (
Height
)
и разрешения (
Resolution
)
. Причем, для сохранения пропорций должен быть отмечен флажок Сохранять пропорции (
Constrain Proportions
)
, в этом случае при изменении одного из параметров, другие меняются автоматически.
Для
публикаций графики в вебе разрешени
е
составляет
72пк/дюйм
.
Вводим необходимые параметры и жмем «ОК
».
3. Сохраняем изображение.
Для сохранения изображения есть три варианта:
- Сохранить (Save (Ctrl+S ) );
- Сохранить как (Save As (Shift+Crtl+S ) );
- Сохранить для веб (Save for Web (Shift+Ctrl+Alt+S ) ).
Первые два — это обычное сохранение изображения, рекомендую пользоваться третьим — в этом случае можно дополнительно уменьшить вес файла по сравнению с обычным сохранением.
При выборе Сохранения для Веб в открывшемся окне можно задать параметры:
- Формат (как говорили выше, jpeg );
- Качество (Quality
) - этот параметр
изменяется
от 0 до 100, соответственно при этом итоговое изображение будет лучшего или худшего качества.
В окне слева от параметров на вкладках вы можете выбрать варианты отображения: Оригинал, Оптимизированное, 2 вари анта (одновременно отображается сохраняемое и итоговое изображение), 4 Варианта (отображаются оригинальное изображение, изображение с параметрами, которое вы задали, и 2 промежуточных).Я обычно выбираю 2 Варианта (
2-Up ) — меняя качество можно одновременно видеть изменения в изображении и подобрать оптимальное для конкретного случая. Для статьи меня устроило качество 50, но это не постоянная величина, чаще я сохраняю изображения в пределах 60-75.Снизу под отображаемыми вариантами выводятся данные итогового изображения в зависимости от заданных настроек
; - Отмечаем галочку
Прогрессивный
(Progressive
).
И тоговое изображение будет загружаться не построчно, а за несколько подходов.
Вам наверняка приходилось сталкиваться с такими случаями, когда вы видите не половину загруженной картинки, а сначала — полностью — плохого качества, потом — все лучше и лучше . Но с самого начала загрузки пользователь имеет представление о том, что на изображении. Вес прогрессивного может быть на несколько килобайт больше оптимизированного, но эта разница незначительна. Практика показывает, что прогрессивный джипег позитивнее воспринимается пользователями. - Размеры.
Если вы хотите изменить размеры изображения, они задаются в этом же окне снизу .
После выбора необходимых настроек жмем «Сохранить» (Save ) и получаем оптимизированную для сайта картинку.
Анализируем результаты оптимизации изображения в Фотошопе:
исходное изображение все то же 2184*1456 пк , 735 Кб , после уменьшения до 750*500 пк : при обычном сохранении 1 59 Кб — вес больше, чем при уменьшении в Paint, Сохранение для Веб (при качестве 50) - 63,7 Кб . Сжатое изображение в есит 11.5 раз меньше. Не забываем, что ко всем прочим плюсам джипег еще и прогрессивный.
В
место одного не оптимизированного изображения можно загрузить 10 оптимизированных, а на скорости загрузки страницы это не скажется.
Конечно, если исходная картинка
раньше уже
уменьшалась, дополнительная оптимизация не будет такой большой, но проводить ее все равно надо.
Если исходное изображение очень большое, не рекомендую уменьшать его сразу до нужного вам, лучше сделать это в несколько шагов, чтобы увеличить резкость оптимизированного .
3. Онлайн-сервисы по оптимизации изображений
Уже уменьшенные изображения дополнительно оптимизируются с помощью онлайн-сервисов. В интернете их хватает, я опишу два, которыми пользуюсь чаще других.
Для форматов.jpg и.png. Позволяет загружать до 20 изображений одновременно, выставлять различные параметры сжатия для каждого и в этом же окне просматривать результат оптимизации.
2
.
Kraken
Форматы.jpg, .png, .gif. Предоставляет 3 варианта оптимизации:
- Сжатие с потерями Lossy - выбрано по умолчанию ;
- Сжатие без потерь - Lossless ;
- Expert - с выбором параметров оптимизации .
Загружаем файлы, которые надо оптимизировать.
По завершению оптимизации сервис выдает отчет о результатах. Для нагрузки файла жмем на кнопку «Do w nload File » - уменьшенная картинка открывается в соседней вкладке.
Если результат устраивает, сохраняем изображение (клик на фото правой кнопкой мыши — Сохранить как )
Простой интерфейс, результат оптимизации можно посмотреть сразу же. Работает только с форматом jpeg.
Сервис сжатия изображений в JPG, PNG и GIF- форматах. Имеет ограничени е по весу в 500 Кб и количеству 20 одновременно.
4. Уменьшение размера с помощью плагинов сжатия изображений
Все вышеперечисленные методы актуальны, когда изображений на сайте не много. Если же ресурс содержит огромную базу изображений, то не обойтись без плагинов сжатия изображений. Существует множество хороших плагинов для различных CMS, и платных, и бесплатных, они используют разные алгоритмы сжатия и выдают разные результаты. Главное, подобрать подходящий для вашего ресурса.
- Плагины с предварительной генерацией миниатюр.
В настройках плагина указываются размеры миниатюр. При загрузке файла создаются миниатюры указанных размеров.
Преимущество данного способа в том, что при загрузке страницы количество изображений не влияет на время генерации страницы. Но при большом количестве файлов и миниатюр будет возрастать и занимаемое сайтом дисковое пространство. - Плагины с динамическим изменением размера миниатюр.
Изображение обрабатывается при генерации страницы, не занимает место на диске, но негативно сказывается на времени загрузки страницы. Не рекомендуется при выводе большого количества изображений.
Можно совмещать между собой различные плагины, получая максимально эффективный результат.
Надеюсь, среди указанных способов вы найдете оптимальный для вас. Не забывайте об уменьшении изображений на сайте - используйте свой контент эффективно.
А еще — задавайте вопросы, пишите в комментариях, оказалась ли статья полезной. Если да, ставьте лайки и делитесь с друзьями.
Удачи и хорошего настроения.
