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

Содержание
  1. Как уменьшить изображения для сайта
  2. Введение: Для чего уменьшать вес изображений на сайте
  3. Каким должен быть вес изображений?
  4. Для уменьшения веса изображения:
  5. 1. Как уменьшить размер изображения в Paint
  6. 2. Как уменьшить размер изображения в Photoshop
  7. 3. Онлайн-сервисы по оптимизации изображений
  8. 4. Уменьшение размера с помощью плагинов сжатия изображений
  9. Уменьшаем размер фотографии через Paint и онлайн
  10. Используем стандартную программу Paint
  11. Изменяем размер и сжимаем картинку программой Paint.NET
  12. Бесплатная программа SmallFoto для пакетной обработки изображений
  13. Уменьшение размера фотографий онлайн
  14. Как уменьшить размер любой картинки в фотошопе двумя способами?
  15. Простое сохранение
  16. Сохранение для WEB
  17. Как уменьшить картинку быстро и легко
  18. Для чего это нужно?
  19. Способы уменьшения картинок
  20. Как оптимизировать изображение для сайта
  21. Как уменьшить вес фото без потери качества
  22. Как быстро уменьшить размер и вес картинки без потери качества
  23. Небольшой совет
  24. Масштабирование
  25. Размер и пропорции
  26. Вес

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

Как уменьшить размер изображения?
21 мая 2017, 14:34 | anna.dubeneckaya | SEO — продвижение | 0 комментариев

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

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

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

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

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

1. Уменьшение размера в Paint

2. Уменьшение размера в Photoshop

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

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

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

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

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

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

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

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

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

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

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

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

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

Для уменьшения веса изображения:

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

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

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

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

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

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

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

исходное изображение с размерами 2184*1456 пк и весом 735 Кб после уменьшения до 750*500 пк стало весить 142 Кб — вес уменьшился в 5 раз! При этом разница в качестве уменьшенного изображения и исходного, уменьшаемого скриптами (если таковые установлены на сайте) на глаз не заметна.
 

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

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

2. В открывшемся окне можно менять параметры ширины (Width), высоты (Height) и разрешения (Resolution).

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

Для публикаций графики в вебе разрешение составляет

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

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 пк: при обычном сохранении 159 Кб — вес больше, чем при уменьшении в Paint, Сохранение для Веб (при качестве 50) – 63,7 Кб.  Сжатое изображение весит 11.5 раз меньше. Не забываем, что ко всем прочим плюсам джипег еще и прогрессивный.

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

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

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

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

1. Optimizilla

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

2.Kraken

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

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

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

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

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

3. JPEG Mini

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

4.Puny PNG

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

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

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

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

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

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

Источник: https://domenart-blog.ru/kategorii/seo-i-zarabotok/338-kak-umenshit-ves-izobrazhenij-dlya-sajta

Уменьшаем размер фотографии через Paint и онлайн

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

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

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

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

Что же тогда делать? Все просто, мы можем уменьшить фотографию или сжать ее. При этом на сайте этого не будет заметно — фото по-прежнему будет таким же естественным.

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

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

Используем стандартную программу Paint

Программа Paint есть по умолчанию в операционной системе Windows 7 и в других версиях. Чтобы долго ее не искать, вам достаточно кликнуть по значку «Пуск» и ввести в строку поиска «Paint»:

В списке найденных буден интересующая нас программа. Запускаем ее.

Слева будет значок в виде документа.

При клике на него выпадает меню из которого выбираем «Открыть».

Находим фото на компьютере, которое будем уменьшать.

Затем в меню программы жмем на надпись «Изображение» и «Изменить размер»

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

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

Дальше переходим в меню, выбираем «Сохранить как» и нужный формат. Чтобы изображение было не только уменьшено, но и сжато — выбирайте формат JPEG.

Минус программы Paint в том, что мы не можем повлиять на силу сжатия. Поэтому мы рассмотрим очень похожую программу Paint.NET.

Изменяем размер и сжимаем картинку программой Paint.NET

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

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

Если найдется — запускайте, если нет, то по этой ссылке http://paintnet.ru/download/ ее можно скачать. Программа является бесплатной. Установите ее и запустите.

Также как и в программе описанной выше, открываем файл на компьютере, а затем в меню «Изображение» > «Изменить размер», или сочетание клавиш Ctrl+R.

Также выставляем нужные нам параметры.

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

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

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

Скачать ее можно по ссылке SmallFoto_v6.0

Внешний вид программы SmallFoto:

Выбираем «Источник» — папку на компьютере с ваши оригинальными изображениями (в папке может быть любое количество картинок или фото);

Также выбираем «папку-получатель» куда будут сохранены уменьшенные копии. Можно заранее ее создать.

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

Уменьшение размера фотографий онлайн

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

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

Такую возможность на предоставит сайт www.avazun.ru, а вот точная ссылка инструмента http://www.avazun.ru/tools/razmer/

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

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

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

28529

Источник: https://gidkomp.ru/kak-umenshit-razmer-fotografii/

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

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

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

Я смотрю на свою фотографию, а она размером 1920*1200 и весит больше мегабайта. Естественно такую фотографию этот сайт не загрузит. А что делать? Ну в общем ради этого мы здесь и собрались.

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

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

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

Простое сохранение

  1. Для начала загрузите изображение в фотошоп.
  2. А теперь идите в главное меню и выберете пункт «Изображение», и в открывшемся выпадающем списке «Размер изображения».

В открывшемся окне вы можете увидеть две ячейки (ширина и высота) с текущим размером картинки. Именно здесь вам и предстоит поменять сам размерчик.

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

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

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

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

Ну как суть ясна? Давайте лучше для большей ясности посмотрим на живом примере.

Мне нужна фотография для сайта размером 200*200 пикселей. Я беру нашу фотку размером 1920*1200 и загружаю в фотошоп. А дальше по пунктам.

  1. Выбираем инструмент «Рамка», поставив пропорцию квадрат (1 к 1) и выделяем часть фотографии, чтобы все лицо и небольшая часть тела до груди попала в кадр. И кадрируем. У нас получится квадратное изображение, но размер явно не 200*200. Поэтому приступим непосредственно к уменьшению. 
  2. Идем в «Размер» изображения, как я рассказывал выше и ставлю там ширину 200, а высота подставится сама, так как стоит связь. Проверяю, чтобы единица измерения была «пиксели» и жму ОК. Вот и всё. Теперь остается только сохранить изображение, но это вы уже должны знать.

Сохранение для WEB

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

Итак, у нас снова неразмеченная картинка с большим разрешением. Если нужно кадрировать, то кадрируйте, но дальше вы должны нажать «Файл», затем «Экспортировать», а в следующем выпаде выберете «Сохранить для web (старая версия)».

ВНИМАНИЕ! Данный путь действителен для Фотошопа версии 2015. Для более ранних версий вы просто заходите в меню «Файл» и выбираете «Сохранить для web». Никакого пункта «Экспортировать» там не будет.

В открывшемся окне выберете «Высокое качество JPG» и качество можно не ставить больше 60. Если выставить больше, то разницы вы не заметите, а картинка-то будет больше места занимать , хоть и не очень значительно.

Ниже вы увидите строчку «Размер изображения». Суть абсолютно такая же, как и в предыдущем примере. Вам нужно уменьшить размер по ширине и высоте. Даже цепочка есть). Ставим до 200*200, ну а потом нажимаете «Сохранить». Вуаля)

В итоге, с помощью двух вышеуказанных способов, я получил два изображения размером 200*200 пикселей. Но у первого изображения размер (объем) составляет 26 килобайт, а у второго 10. Соответственно второй использовать удобнее, но только, если вы сохраняете для сайтов. Для обычного хранения уменьшенной копии лучше использовать первый способ.

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

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

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

так что не теряйтесь.

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

С уважением, Дмитрий Костин.

Источник: https://koskomp.ru/adobe-photoshop/kak-umenshit-razmer-kartinki-v-fotosh/

Как уменьшить картинку быстро и легко

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

Привет всем читателям Blog-Bridge.ru! Наверняка каждый блоггер сталкивался с такой ситуацией: у меня не помещается картинка! Да-да, было у всех. Зачастую, иллюстрация, которую мы хотим вставить почему-то не умещается на ресурсе или занимает слишком много места.

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

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

Сегодня мы поговорим о том, как уменьшить картинку.

Для чего это нужно?

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

  1. Самая главная проблема большеразмерных иллюстраций — они мешают быстрой загрузке сайта. Статистика показывает, что в среднем человек готов ждать загрузки ресурса до 4 секунд. Далее он начинает чувствовать раздражение. А согласитесь, что это чувство совершенно не нужно вашим читателям, которые намеревались открыть ваш суперский пост с приятным предвкушением. От долгой загрузки статьи впечатление от прочтения информации может быть не столь радостным. В результате можно просто потерять читателей, каким бы познавательным и интересным не был ваш контент.
  2. Проблема загрузки изображения для отправления по электронной почте или добавления в пост. Ведь на разных сайтах есть свои особенности размещения фото или картинок. Зачастую, если вы снимаете на хороший фотоаппарат, то вес фото может достигать больших размеров (10 мб), что для некоторых ресурсов просто не позволительная роскошь.

Так что же делать в таких ситуациях?

Способы уменьшения картинок

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

1.  Сайт resizepiconline.com –  хороший метод изменить разрешение фото.

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

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

После того, как вы настроите картинку, нажимайте на «Изменить размер».

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

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

2. Программа «Paint». Еще один метод, которым могут воспользоваться практически все. Исключением являются те, кто пользуется продукцией apple и linux.

Как же изменить изображение с помощью этой программы? Правой кнопкой мыши кликаете по картинке и выбираете «Открыть с помощью» — «Paint».

Теперь в основном меню нажимаете на кнопку «Изменить размер» и у вас откроется окно с параметрами для изменения.

Устанавливаете необходимый размер (рисунок уменьшится до этого разрешения).

Вносите эти данные в поле «по горизонтали» и «по вертикали» и нажимаете на «Ок»:

Готово! Теперь осталось только сохранить этот документ. Это делается в обычном порядке.

3. Программа Adobe Photoshop.

Заходите в программу и открываете нужную иллюстрацию.

Далее выбираете кнопку «Изображение» — «Размер изображения». 

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

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

После внесения всех изменений нажимайте «Ок».

4. Программа Microsoft Word.

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

Далее выбрать «Файл» — «Сведения» — «Параметры» – «Дополнительно»

В открывшемся окне в поле «Качество вывода» выбираете необходимое количество пикселей.

На этом все — разрешение уменьшено!

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

До новых встреч!

Если статья оказалась полезной, не забудь поделиться с друзьями!

Екатерина Калмыкова

Источник: http://blog-bridge.ru/novichku/kak-umenshit-kartinku-byistro-i-legko.html

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

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

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

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

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

Чем меньше весит страница, тем быстрее она загрузится. И чаще всего вес увеличивается как раз из-за картинок. Многие начинающие блоггеры не задумываются о том, что нужно делать изображения как можно легче.

Элементарный пример: обычная несжатая фотография весит примерно 1,5-3 мб в лучшем случае. Бывают и более тяжелые случаи. Это фото можно уменьшить без потери качества более чем в 10 раз – до 50-100 кб.

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

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

Работать я буду с фотографией котика, которая весит 3мб (из интернета).

1. Сделать скриншот и вырезать. Первым делом я сделала скриншот картинки и сохранила отдельно – вес сразу стал 104 кб, качество пострадало лишь чуть-чуть, только если приблизить фото вплотную. Я скриншот делала с помощью встроенной функции Win7 Ножницы. Находятся в Пуск – Все программы — Стандартные – Ножницы.

Но не у всех есть такая возможность, так что можно просто нажать кнопочку Print Screen на клавиатуре, потом открыть Paint и с помощью клавиш ctrl + V вставить туда картинку. Обрезать лишнее, чтобы осталась только нужная картинка. Но таким способом вес получился 206 кб, что все равно лучше оригинала.

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

Уменьшаем цифру в поле По горизонтали на значение, которое вас устроит. Я указала 500, и вес сократился до 72,2кб. Выбирайте число, которое примерно равно ширине страницы на вашем сайте.

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

3. Picture Manager – это полезная программа для сжатия фотографий. Входит в стандартный пакет Microsoft Office, так что скорее всего у вас установлена.

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

Нажмите на нужную фотографию Правой Кнопкой Мыши (ПКМ) и выберите Открыть с помощью — Microsoft Office Picture Manager.

Нажимаем Изменить рисунок – Сжатие рисунков и выберите подходящий вариант сжатия. Например, в режиме Веб-страниц вес уменьшается с 3мб до 26,6кб, что можно считать очень хорошим результатом.

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

4. Photoshop – очень удобный способ, но только если вы разбираетесь в этой программе и она у вас установлена. Нажмите на фотографию ПКМ, выберите Открыть с помощью – Photoshop.

В верхнем меню Изображения выберите пункт Размер изображения или просто нажмите сочетание клавиш Alt+Ctrl+I. Здесь можно сократить размер фото до нужного.

Когда установите нужный размер, нажмите ОК. Зайдите в меню Файл – Сохранить как… и даем нужное название, жмем Сохранить. После этого откроется окно, где можно внести дополнительные настройки:

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

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

5. Онлайн сервисы – неплохая альтернатива всем вышеперечисленным методам. Не придется устанавливать дополнительные программы или разбираться в сложных схемах.

Найти подобные сайты можно без труда – их много. Я рассмотрю процесс на примере watermark.algid.net. Нажмите на верхнем меню Сервисы и выберите Изменение размеров изображения.

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

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

Коллажи – отличный способ соединить 2-4 фотографии в одну, сократив их вес и не убирая их из статьи. Очень пригодится при размещении пошаговых рецептов – в одном снимке 4 шага. Для этих целей я использую удобный сайт pizapru.com. Бесплатный, без регистрации, интуитивно понятный и с множеством функций. Рекомендую.

Вот и все основные способы уменьшить вес фото без потери качества. Какой именно способ выбрать – решать вам.

https://www.youtube.com/watch?v=iMDZFHQEtg4

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

  • Сохраняйте изображения в формате JPEG — это отличный способ сжать фото без потери качества.
  • Избегайте «тяжелых» форматов, например PNG. С его помощью можно добиться эффект прозрачности на картинках, так что многие его используют. Но иногда лучше отказаться от лишней красоты, и увеличить скорость загрузки сайта.
  • Называйте фотографии ключевыми словами, а не набором букв – поисковые системы обрабатывают названия и выводят их в поисковой выдаче. Так что вы можете получить дополнительный приток посетителей, если с умом выберите название.
  • В поле ALT или альтернативный текст нужно указать описание того, что изображено на картинке. Если картинка не загрузится, чтобы люди могли узнать, что там было изображено. Можно в описание естественно вписать ключ.
  • В поле Title стоит ввести текст, которые будет появляться при наведении курсора на картинку. Поисковые системы не учитывают этот показатель при ранжировании, так что ключ вписывать необязательно. Многие вебмастера вовсе не заполняют это поле.
  • Старайтесь использовать уникальные фотографии. Как добиться уникальности изображений я писала в этой статье.

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

Источник: https://xn--80aaacq2clcmx7kf.xn--p1ai/kak-optimizirovat-izobrazhenie-dlya-sayta

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

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

Оглавление

  • Небольшой совет
  • Масштабирование
  • Размер и пропорции
  • Вес

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

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

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

Начнем? Но для начала…

Небольшой совет

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

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

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

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

Ну а теперь давайте приступим к основным моментам в работе с увеличением и уменьшением фото.

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

Масштабирование

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

Предположим мне нужно увеличить скриншот компьютерной мыши в виде машинки с Ali.

Я ни за что не полезу в инструменты. Я просто зажму Alt на клавиатуре и начну двигать колесиком мыши. Это намного быстрее.

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

Размер и пропорции

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

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

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

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

Чтобы вызвать это окно я нажимаю одновременно Shift + Ctrl +Alt + S. Первое время это сочетание казалось мне слишком длинным и неудобным, но со временем я понял, что это в разы удобнее.

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

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

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

Разобраться нужно только с размером. Для меня почти всегда важна ширина. Я просто щелкаю по окну и вставляю свое значение. Затем кликаю Enter.

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

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

Теперь давайте немного поговорим о весе. Ведь его тоже можно поправить при помощи этой функции.

Вес

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

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

Выбираем «Сохранить для веб», снова щелкаем Shift +Ctrl + Alt + S, но из раздела «Оптимизация» переходим в «4 варианта». Все вроде бы то же самое, но первая картинка – это оригинал, а каждая последующая сохранена при соблюдении более низкого порога качества.

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

К сожалению, пока в фотошопе нет функции, которая позволяла бы задавать вес фотографии, но вы можете сами посмотреть и если вам нужно, чтобы он был до 300 или 500 Кб, то кликнуть на тот вариант, который вам подходит. Затем жмем Enter или кнопку «Сохранить».

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

https://www.youtube.com/watch?v=fPmOazr-H1Y

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

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

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

Источник: http://start-luck.ru/photoshop/umenshit-razmer-izobrazheniya.html

Как там быть
Добавить комментарий