Содержание

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

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

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

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

Разное соотношение сторон в картинках

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

Так почему картинки отображаются разными по размеру, в основном по высоте?

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

Лучше всего это рассматривать на примере популярного движка wordpress.

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

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

  1. Слайдер в верхней части сайта, где размер картинок будет 728х420 px;
  2. В сайдбаре 280х310 px;
  3. Футере 1024х728 px;
  4. В конце поста 3 картинки 320х250 px;
  5. И т. Далее…

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

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

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

Примерно так и произошло у меня на сайте. При смене темы оформления, у многих картинок нарушилась пропорциональность.

А теперь самое главное! Как узнать тот идеальный размер картинки или фото на «все времена»?

Оптимальный размер изображения для сайта

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

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

Ширина 1600 px;
Высота 1067 px;

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

Никто не будет ждать пока такая картинка загрузится на странице сайта.

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

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

Как подготовить размер картинки в photoshop

Главным параметром здесь является соотношение сторон и в программе выставить их проще всего.

Возьмем инструмент «Прямоугольная область», в стилях выставим «Заданные пропорции», затем укажем ширину – 3, высоту – 2 и готово.

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

размер 1600х1067 px

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

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

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

Сохранить для web

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

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

Как узнать размер картинки на сайте

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

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

Для проектов, созданных на сервисах (wix, tilde и прочие), оптимальный размер изображения для сайта можно узнать в инструкции по добавлению контента.

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

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

Где скачать изображения для сайта

На мой взгляд, на данный момент самым безопасным вариантом использования картинок – это сервис pexels

Почему безопасным?

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

Еще несколько сайтов, где можно взять изображения для использования на сайте: Freepik, stockvault.

iconfinder — для поиска разного рода иконок.

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

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

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

Требования к фото на сайт. Оптимальный размер фото для сайта

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

Требования к изображениям для вашего сайта

1. Размер фото

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

2. Релевантность

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

3. Эффективность

Эффективное изображение – это призыв к действию, оно побуждает пользователя купить ваш товар. Но, размещая фотографию на сайте, не забывайте, что фото должно соответствовать действительности. Лучшим примером являются, бренды пищевой промышленности, такие как Burger King. Они размещают реальные фотографии своих блюд. Посмотрите на это фото и попробуйте сказать, что не хотите съесть эти вкуснейшие бургеры!

4. Эффектность

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

5. Уникальность

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

6. Люди

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

7. Эмоциональность

У многих изображений есть эмоции, и они идеально подходят для повышения конверсии вашего сайта. Tackledirect — это магазин по продаже рыболовных товаров. На сайте используются изображения людей, с гордостью демонстрирующих свой улов. Справа от фото размещаются товары, которые есть на фотоснимке. «Какой рыбак откажется поймать большую рыбу? А наши товары помогут вам, так же как помогли им!»

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

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


Автор: Оля Кадыкова
Дата публикации: 01.12.18

Размер фотографий для публикации в интернете: pavel_kosenko — LiveJournal

В каком размере лучше сохранять фотографии под web? Эта тема неоднократно затрагивалась в обсуждениях и я обещал описать свой подход. Но для начала мне было интересно оценить, насколько отличаются экраны людей, увлекающихся фотографией, от экранов среднестатистических интернет-пользователей, поэтому я запустил опрос об используемых разрешениях экрана (большое спасибо всем, кто проголосовал). Итак, попробую объяснить цифры.

Зачем вообще нужно обращаться к статистике? Дело в том, что если мы хотим, чтобы наши картинки было комфортно смотреть, необходимо учесть удобство большинства бользователей, а лучше всех. Реально учесть интересы всех вряд ли возможно, т.к. они часто противоречат друг другу. Например, если сделать картинку под большое разрешение вроде 3200х2400 px, её будет очень сложно просматривать на маленьком мониторе. И наоборот, если оптимизировать картинку под разрешение, скажем, 320х240, то на экранах значительной части зрителей она будет выглядить как маленькое пятнышко, где нельзя рассмотреть не только деталей, но и толком сюжета. Встаёт логичный вопрос — где золотая середина?

На мой взгляд, с одной стороны необходимо ориентироваться на большинство пользователей, с другой, учитывать интересы малочисленных групп. К значимым группам я бы отнёс аудиторию, составляющую 5%-10% и выше. Всё-таки менее 5%, это обычно пользователи со спецзадачами, а вот от 10%, это уверенно высокая часть аудитории, пренебрегать которой недопустимо. Есть и другие критерии. Например, иногда специально ограничивают потенциальную аудиторию тематической выборкой, заведомо отсекая «непрофильных потребителей», в угоду комфорта основных. Такой подход также бывает оправдан, но лично я предпочитаю по возможности учитывать интересы максимально возможного количества зрителей.

С максимальным ограничением размера фотографий ситуация более-менее ясна. Редко кто готов бесплатно раздавать графические файлы, поэтому просмотр в интернете обычно подразумевает режим preview (предосмотр). Для вполне качественной печати формата 10х15 достаточно разрешения 200 dpi, чему соответствует файл порядка 1200х800 пикселей. Охраняя свои творения от посягательств, фотографы стараются не допускать размещение в интернете файлов выше размера печати 10х15.

Для того, чтобы определиться с минимальными размерами, обратимся к статистике. В первую очередь к глобальной статистике интернета — например, w3counter.com, spylog.ru, hotlog.ru. Мы видим, что лидер сегодняшних хит-парадов, это разрешение 1024х768. Доля таких пользователей колеблется в среднем от 22% до 47%. Второе место принадлежит разрешению 1280×1024, которым пользуется от 15% до 20% человек. В моём опросе места 1 и 2 поменялись местами — 11% и 49% соответственно. Я думаю, это связано с тем, что мой блог читают в основном люди, в той или иной степени увлечённые фотографией, т.е. обладающие мониторами размеров выше среднего. Вместе с тем даже среди такой аудитории процент использования разрешения 1024х768 уверенно превысил 10%.

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

Когда мы говорим о разрешении экрана, то должны помнить следующее. Как правило, часть экрана требуется на интерфейсы операционной системы (например, кнопка «Пуск» и полоса навигации в Windows) и интерфейс браузера. Конечно, существуют режимы просмотра full screen (полный экран), но если вспоминать про удобство пользователей, то необходимо уместить картинку целиком в его стандартном поле для просмотра web-страниц. Давайте посмотрим, какового это поле при разрешении 1024х768? А оно примерно таково:


посмотреть крупнее (откроется в новом окне)

Размер 1000х620 пикселей определён примерно, т.к. в реальности он варьируется в зависимости от ОС, используемых режимов и интерфейсов браузера. Также некоторые учитывают ICQ-клиент, но я считаю, что для просмотра картинок в интернете человек вполне способен убрать его на это время.

С учётом минимально необходимых отступов, получается, что для показа картинки с соотношением сторон 3:2 у нас остаётся 600 пикселей по высоте. Что соответствует 900 по ширине.

900х600 — этот формат я определяю для себя в качестве максимального для публикации в интернете. Вот так он выглядит в реальном размере:

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

3:2 (горизонтальный) — 900х600
3:2 (вертикальный) — 400х600
4:3 (горизонтальный) — 800х600
4:3 (вертикальный) — 450х600
1:1 (квадрат) — 500х500

При размещении картинок свыше 900х600 пикселей мы заведомо создаём неудобство просмотра для большого количества людей. В этом случае пострадает в среднем от 10% (увлеченной) до 50% (массовой) аудитории, у которых возникнут полосы прокрутки и которые не смогут без специальных действий просмотреть фотографию целиком на экране.

Несколько примечаний:

1. В случае нестандартных соотношений сторой я ориентируюсь на максимальный размер стороны согласно обозначенному ограничению 900х600. Например, картинку 3000х1500 пикселей я скорее всего уменьшу до 900х450.

2. Квадрат сам по себе создаёт ощущение большой площади, поэтому для гармоничного его просмотра с другими картинками, я беру максимальную сторону чуть меньше, чем для других случаев (500, а не 600).

3. В случае узкой длинной панорамы стараюсь сделать один размер для просмотра целиком на экране + ссылка на более большой вариант. Конкретные цифры зависят от самой панорамы, но для таких случаев при описанном подходе (наличие превью и ссылки) считаю допустимым делать картинку шириной 1200-1500 пикселей и даже больше. Но только, если такая картинка буде скрыта под отдельной ссылкой.

4. Для публикации фотографий в ЖЖ я стараюсь вынести вне ката более маленькую картинку (как правило, одну), чтобы не перегружать френд-ленты. Те, кого заинтересует превью, могут посмотреть нормальный размер под катом. Считаю размещение большой (порядка 900х600 пикселей) картинки вне ката чрезмерным, хотя не критичным. Т.е. я не обижаюсь на такие каринки в своей ленте :), хотя и считаю размеры свыше 900х600 перебором, который мешает удобству. Сам стараюсь для предосмотра (т.е. вне ката) не использовать картинки более 600х400.

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

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

UPDATE. Обновленная статья (2015 год):
http://pavel-kosenko.livejournal.com/642666.html

Как узнать размер фото

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

1 | Узнать размер одного фото (в Windows):

Быстрее всего заглянуть в свойства файла — правой кнопкой мыши щёлкните на фото и выберите из списка Properties (Свойства). На первой же закладке General (Общие) можно увидеть вес фото в мегабайтах (МВ) или килобайтах (КВ). Чтобы узнать размер фото в пикселях (px), нужно зайти на закладку Details (Детали) и при необходимости прокрутить вниз до строки Dimensions (Разрешение).

Размер фото в пикселях можно найти в свойствах файла в закладке Details (Детали)

 2 | Как быстро узнать размер нескольких фото (в Windows):

Откройте нужную вам папку с фото и добавьте Details panel (Панель с деталями) в закладке View (Вид). В результате по клику на любом фото в отдельной панели будет открываться детальная информация о файле. В разных версиях Windows панель настроек отображения может выглядеть по-разному, но смысл и результат будет примерно одинаковым.

Отображение отдельной панели со свойствами файла включается в закладке View (Вид) — пример скриншот Windows 8.

3 | Как быстро узнать размер всех фото в папке (в Windows):

Измените формат отображения файлов — откройте нужную вам папку с фото, в закладке View (Вид) выберите формат Details (Детали) для отображения файлов и добавьте колонку Dimensions (Разрешения), как показано на картинке ниже. Теперь можно видеть размер, вес и формат всех фото в папке.  Примерно такого же эффекта можно добиться, выбрав формат отображения Content (Содержание).

Отображение формата, веса и размера всех фото в папке — пример скриншот Windows 8.

4 | Как узнать размер фото в сантиметрах:

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

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

Что такое пиксель, читайте в статье Размер, вес и формат фотографий

Чтобы узнать размер фото в сантиметрах понадобится программа Adobe Photoshop, Adobe Bridge или любой другой графический редактор для фото. Чтобы узнать размер файла в программе Фотошоп, нужно нажать комбинацию клавиш ALT+CTRL+I или в верхней панели зайти в Image (Изображение) ► Image size (Размер изображения). 

Размер фотографии в пикселях и сантиметрах в программе Photoshop

В Фотошопе можно менять разрешение, размер в пикселях и видеть налету, как меняется размер фотографии в сантиметрах (или дюймах).

В программе Adobe Bridge размер фотографии в пикселях и сантиметрах можно увидеть в File Properties (Свойства файла). Если у вас нет этого раздела или строки «Разрешение в сантиметрах», их отображение нужно включить. Для этого зайдите в верхнее меню Edit ► Preferences и в Metadata добавьте галочки в строки Dimensions, Dimensions (in cm), Resolution (плотность пикселей).

Включение и отображение размера фото в пикселях и сантиметрах в программе Adobe Bridge.

5 | Как узнать размер фото на сайте:

Удобнее всего пользоваться браузером Mozilla Firefox, где можно кликнуть по любой картинке правой кнопкой мыши и выбрать пункт «Информация об изображении». В открывшемся окне будет показано само изображение, оригинальный и изменённый для отображения на сайте размер фото.

Многие пользуются браузером Google Chrome (Гугл Хром), в котором всё немного сложнее.

Размер фото на сайте в браузере Google Chrome (Гугл Хром).

В браузере Google Chrome нужно правой кнопкой мыши кликнуть по фото на сайте и выбрать пункт «Посмотреть код» (в браузере Яндекс — нужно выбрать «Исследовать элемент»). Если подвести мышку к выделенному фрагменту кода страницы, то появится окошко с информацией о размере фото на сайте.

6 | Как узнать размер фото в формате RAW:

Сохраните статью на память в Pinterest

Не все программы могут видеть и читать файлы в формате RAW (о чём я писала в статье Размер, вес и формат фотографий). Чтобы узнать размер фото в формате RAW, можно воспользоваться Adobe Photoshop, Adobe Bridge или Adobe Lightroom. Удобная бесплатная программа, которая умеет открывать и читать почти все форматы фото (включая RAW) — FastStone Image Viewer. Её можно скачать на сайте разработчика (faststone.org) и пользоваться совершенно бесплатно. Эта программа — шестой способ быстро узнать размер фото в пикселях (и для некоторых форматов фото, включая jpg, узнать размер фотографии в сантиметрах).

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

Статьи, которые могут быть вам интересны:

Хорошие книги о съёмке фотографий и их обработке:

Понравилась статья? Поделитесь с друзьями:

Как изменить размер фото

Определяем размер фотографии

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

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

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

Кроме того, чтобы посмотреть разрешение и размеры конкретного файла в macOS, можно нажать на него правой кнопкой мыши, выбрать пункт «Свойства», а затем во вкладке «Подробнее» найти пункт «Размер» — там и будет искомая величина.

Если же нас интересуют размеры фотографии не только в пикселях, но и в других величинах, то проще всего будет воспользоваться программой Photoshop. Для этого открываем файл в программе (мы используем версию Adobe Photoshop CC 2018) и находим в верхнем меню вкладку «Изображение» (Image). Здесь нас интересует пункт «Размер изображения» (Image size…), нажатие на который переведет нас в новое меню. Это меню пригодится и для изменения размеров изображения, но об этом поговорим чуть позже.

Меню, позволяющее посмотреть размеры изображения в Photoshop

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

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

Так определяются размеры области на фото при помощи инструмента «Выделение» в Photoshop

Продвинем ваш бизнес

В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров

Подробнее

Меняем размер фотографии в Photoshop

Для изменения размеров изображения в Photoshop, воспользуемся уже знакомой нам функцией «Размер изображения» (Image size…) в меню «Изображение» (Image). Здесь важно обратить внимание на единицы измерения размера (удобнее всего переводить размер в пиксели или сантиметры) и, собственно, на ширину и высоту картинки.

В меню мы можем увидеть пункт «Подогнать под…» (Fit to…), в котором можно выбрать сразу нужный размер картинки с необходимой плотностью пикселей (ppi — количество пикселей на дюйм: 72 пикселей или «точек» достаточно для просмотра изображения с экрана (соцсетях, блогах, статьях и так далее), а 300 – для качественной печати на бумаге).

Меню «Подогнать под..» (Fit to…) с размерами, которые можно придать изображению

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

При помощи меню «Размер изображения» можно изменить разрешение, ширину и высоту изображения

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

Так выглядит инструмент «Обрезка» (Crop Tool) в боковом меню Photoshop

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

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

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

Приложения для изменения размеров фотографий

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

WidsMob ImageConvert

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

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

Powertoy Image Resizer

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

Единственная проблема заключается в том, что Powertoy Image Resizer давно не обновлялся и последняя версия ОС, с которой он точно совместим, — это Windows 8.

Photo Resizer

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

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

Как работать со слоями в Photoshop

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

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

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

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

Вперёд…


 

 

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

 

Это, конечно, коли не использовать всякие галереи и тому подобное…

 

 

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

Спрашивается, к чему они нужны?? тем паче, коли ни коем образом не используются… или используются редко в некоторых статьях (хотя в этом случае, возможно, правильнее для конкретной статьи единожды перенастроить «загрузку» медиа: а после этого вернуться в исходник.

…иначе и при последующих — новых загрузках подгрузится много лишнего!

 

 

 

 

 

 

к оглавлению
Размер миниатюры изображения

 

Целесообразно оставить, иначе в админке при редакции статьи-медиа (в «медиафайлах» будут подгружаться оригиналы: а это тяжеловато)

 

 

 

Средний размер изображения

 

Однако, для галерей, возможно оставить (задать) «Средний размер»: на ваше усмотрение… это всё в зависимости ширины контентовой части вашего сайта.

 

 

 

Крупный размер изображения

 

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

 

 

Ко пользе))

не забудьте поставить птичку в чекбокс «Помещать загруженные мной файлы в папки по месяцу и году» — иначе каша в папке uploads обеспечена!!

 

ваш-домен.ru/wp-content/uploads

 

 

 

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

 

 

 

 

 

 

 

к оглавлению

 

 

 

 

media-cleaner — с помощью этого плагина возможно запросто узнать о неиспользуемых на сайте картинках и запросто почистить мусор.

 

Как бы вы ни старались, уверен «пустые» картинки отыщутся… Попробуйте, установите плагин и увидите.

 

Установка банальна: через репозиторий WP.

После работ, плагин можно запросто и чистенько удалить…

 

 

 

 

к оглавлению
Вот некоторые настройки плагина media-cleaner

 

 

После активации… необходимо кликнуть см. фто ниже (обведено зелёным)

 

 

 

 

В окне предварительных настроек нужно в двух первых чекбоксах поставить галочки!

Впрочем я дал технический перевод, смотрите:

 

 

 

 

После настроек, переходим в раздел настроек сканирования плагина media-Сleaner.

 

 

 

 

 

 

Ну и как понимаете, остаётся кликнуть «Scan» — то бишь сканирование…

 

 

 

 

 

 

Вот и всё !! остаётся решить, что будете делать с найденными «пустыми» картинками.

 

Я рекомендую пройти по указанным ссылкам и ознакомиться с рисунками поближе, так сказать… мало ли !!

 

А ненужное, конечно же, удалите !!

 

 

 

 

 

Желаю удачи в работах и настройках своего сайта!

 

 

 


На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 

 

 


Online консультация по настройкам и созданию сайтов на WordPress


!..подписываясь на обновления mihalica.ru —
…расстаёмся с невежеством..!

 


На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 

 

…вопросы в комментариях — помогу, в чём дюжу…
mihalica.ru !

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Compressor

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

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

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

Image.online-convert

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

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

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

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

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

Kraken

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

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

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

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

Imagify

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

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

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

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

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

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

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

Adobe Photoshop

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

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

Total Image Converter

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

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

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

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