Блог Максима Войтика
Публикации о способах
заработка в интернете и SEO
Анализ сайта: Проверить сайт на санкции

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

24 января 2018
Комментарии: 4

Сервисы и программы для изменения размера картинок

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

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

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

Зачем менять размер картинки


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

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

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

пример как фото вылазит за поля страницы

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

Если же ресурс имеет функцию автомасштабирования, то это не значит, что не стоит изменять размер картинки. Дело в том, что чем больше разрешение изображения – тем больше оно весит.

И даже когда масштаб сжимается в миниатюру, при ее открытии вам все равно придется прогружать картинку.

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

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

Как работает изменение масштаба


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

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

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

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

  • Например, чтобы выложить картинку в сеть – то смотрите данные пикселей.
  • Если распечатать – то лучше всего ориентироваться на классические миллиметры.

Пиксели

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

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

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

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

Как бесплатно обрезать фото в онлайне


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

Croppiconline.com — пожалуй самый популярный сервис. Это элементарный онлайн-фоторедактор, в котором каждый сможет обрезать нужный ему кусок изображения, уменьшить его или подредактировать.

При этом внутри него одновременно можно работать сразу с десятью фотографиями.

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

Сервис croppiconline.com

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

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

Обрезка изображения

Стоит так же сказать о том, что программа выдает данные о размере объекта, а также его весе.

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

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

Обрезка

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

Pixlr Editor

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

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

Функции Pixlr Editor

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

Работа с графикой в фоторедакторах

Одной из самых простых программ для работы с любой графикой является Paint.NET.

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

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

Paint.net программа

Итак, для начала – загрузите нужную вам картинку в утилиту.

После этого выберите инструмент «Выделение». Он настроен на прямоугольную область, но вы можете выбрать ее форму при необходимости.

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

Инструменты Paint.NET

После этого откройте вкладку «Изображение» и выберите «Обрезать по выделению». После этого вы получите готовое изображение нужной вам формы.

обрезка по выделению в Paint.NET

Кроме того, вы можете выделять нестандартные области. Для этого вам нужно зайти в настройки инструмента и выбрать «Добавление».

Объединение

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

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

Автоматическое изменение размера

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

Как изменить размер фото в Фотошопе

Разумеется, профессиональный фоторедактор Photoshop так же имеет функцию обрезки и изменения размера изображений.

Здесь нужно сделать несколько оговорок:

  1. Во-первых, Фотошоп – платная программа, пиратской версии последних версий которой либо нет, либо ставятся через довольно сложные для рядового пользователя процессы. К счастью, всегда можно скачать пробную версию, либо воспользоваться портативной. В ней будет намного меньше функционала, однако она бесплатна, и даже не требует установки на компьютер.
  2. Во-вторых, не стоит ради одной этой функции устанавливать себе на компьютер такую вещь как «Фотошоп». Это профессиональный редактор, и обычному пользователю лучше воспользоваться онлайн-версиями, приведенными в статье выше.

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

После этого перейдите в меню «Изображение» далее «Размер Изображения», где вы увидите все данные картинки.

фотошоп

А можно сделать еще проще, по плашке окна с картинкой кликнуть правой кнопкой мыши и выбрать соответствующий пункт.

работа в фотошопе

Что мы в итоге видим:

  • Размеры — здесь можно выбрать единицу измерения объекта (удобней всего работать в пикселях).
  • Подогнать под — из выпадающего списка можно выбрать готовые форматы, под которые картинка автоматически будет подогнана.
  • Ширина и Высота — именно вы этих окнах работаем со значениями отвечающими за высоту и ширину объекта, который вы хотите изменить.
  • Разрешение — это величина, определяющая количество точек на единицу площади.
  • Ресамплинг — отвечает за изменение объёма данных изображения при изменении его размеров.

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

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

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

(4 голос., в среднем: 4,00 из 5)
Загрузка...
С уважением, Максим Войтик
Буду рад, если нажмете на любую из кнопок:
Комментарии (4)
  1. Валерий

    Интересно, полезно и главное нужно для каждого уважающего себя и свой ресурс вебмастера. Спасибо Максим! С уважением, Валерий Бородин!!! [good]

    PS: 5 звезд Вам за пост от меня и моего блога!

    Ответить
  2. Вячеслав

    Спасибо Максим за подробный обзор. Я пользуюсь программой Pixlr Editor, она мне очень нравится.

    Ответить
  3. Игорь

    Максим, добрый день!

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

    Ответить
  4. Александр

    Я для этих целей использую фотошоп, но попробую и этот способ. Может так быстрее будет. [good] :)

    Ответить
Оставить свой комментарий
Обязательно ознакомьтесь с правилами комментирования!!! СПАМ будет удален!
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]

© 2011-2018 seoslim.ru, блог Максима Войтика

Внимание! Копирование материала строго запрещено. Соблюдайте авторские права и уважайте труд других людей!