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

Последнее обновление — 11 мая 2019 г.

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

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

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

Содержание

Узнаём вес (размер) фотографии

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

  • тип файла (jpeg, png и т.д.);
  • размеры в пикселях (ширина, длинна);
  • размер в мегабайтах (например, 1,89Мб).

как узнать вес фото на компьютере

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

Условная ситуация

Допустим, у нас безлимитный быстрый Интернет, а у нашего друга, которому решили отправить фотографии, дорогой и медленный Интернет (например, рубля по 2 за 1 мб. полученной информации).

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

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

Зачем нужно уменьшать вес фото jpeg

Предположим, вы скачиваете красивое фото, например, с сайта под названием Unsplash. В заголовке этого сервиса сказано — do whatever you wont, то есть «делайте что хотите». И вы делаете что хотите, загружая с этого сервиса много всяких красивых фотографий на сайт.

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

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

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

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

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

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

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

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

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

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

На сегодняшний день существует много онлайн сервисов для обработки фото. Возьмем, например, многим известный сервис Online Photo Editor Pixlr. Заходим на него и открываем вкладку «файл». Если изображение находится на вашем компьютере, выбираем команду «открыть изображение», если фото находится где-то в интернете, выбираем опцию «открыть Url изображения». Далее загружаем картинку, которую нужно уменьшить и там же во вкладке «файл» жмём на «сохранить».

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

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

Как уникализировать фотографии Авито/Юла

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

1. Наложение рамки. Размер рамки желателен не менее 15 процентов от ширины изображения. Цвет рамки дает так же уникальность фотографии. Если рамка была зеленая, то с красной рамкой картинка станет уникальной и юла не различит 2 фото с красной и зеленой рамкой. Рамка должна быть непрозрачной.

2. Изменение цвета. Изменив цвета на фото вы так же ее уникализируете.

3. Обрезка угла фото, либо обрезка всей фотографии по краям.

4. Поворот фото на несколько градусов.

Youlapost.biz это онлайн сервис по автопостингу на Юле.

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

Пакетное размещение объявлений

Автоматическая регистрация аккаунтов

Автоматическое начисление бонусов на аккаунты

Планировщик автоподнятий

Чтение и отправка сообщений с Telegram бота

Бесплатный тест драйв сервиса

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

Для получения тарифа «Комфорт» сроком на 7 дней вам нужно:

1. Зарегистрироваться на сайте Youlapost.biz

2. Отписать нам по одному из контактов — Тех.поддержка в Telegram @youlapost / Почта / Онлайн чат на сайте

Уменьшаем вес фотографии в программе Photoshop

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

Уменьшаем вес фотографии в программе Photoshop

После того как появится ваша фотография в окне программы во вкладке «файл», найдите команду «сохранить для Web…». В открывшемся окне появится два варианта фотографии: оригинал и копия. В правом верхнем углу можно отрегулировать качество фотографии. Чем меньше оно будет, тем меньше будет вес изображения. Лучше качество оставить то, которое предлагает программа по умолчанию. Сохраняете фото, дав ему новое имя и вуаля — у вас значительно облегчённый jpeg файл, готовый к загрузке на сайт.

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

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

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

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

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

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

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

Advertisement

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

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

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

Уменьшаем вес фото онлайн бесплатно и быстро

Многие из нас имеют профиль Вконтакте. В этой популярной социальной сети размещены миллионы изображений. Разработчики этой сети встроили в её код механизм сжатия изображений без потери их качества. Чтобы уменьшить вес фото онлайн бесплатно и быстро, просто загрузите его на свою страницу Вконтакте. При этом даже не обязательно его сохранять там. Сделайте клик правой кнопкой мыши по фотографии и выберите уже знакомую вам команду «сохранить как», дайте ей новое имя. Это всё. Фото будет в два или даже три раза легче, чем оно было до этого.

Изменить размеры и вес фото можно в фотошопе.

Размер изменяем таким образом. Image(Изображение) — Image Size – В полях width и height ставим нужные значения в пикселях, и в поле ниже constrain proportions(сохранять пропорции) ставим галочку. Скрин ниже.

Изменяя вес, мы изменяем качество изображения. Например с 5мb можно смело опускать качество до 50-200 кв, и на мониторе это будет не заметно. На некоторых картинках и при 15кв особо не заметны ухудшения. Зато места занимают в десятки раз меньше. Слева картинка сжатая — 500х630 26,7кб, справа нет — 1269х1600 1.35Мб. Вышло в 6 раз меньше. Если не придираться, то и не заметно.

Как изменить вес фото или картинки? Все просто. Меняется вес в фотошопе несколькими путями. 1) Просто изменить размер image- image size и если недостаточно уменшили, 2) File — Save for web & devices . Появится окошко с установками параметров, в верхнем правом будет ползунок Quality (качество), в нижнем левом показатель веса картинки. Качества ставите Low – низкое, следите на сколько уменьшается вес и возюкаете ползунок до нужного значения. Скрин ниже.

Или можно таким образом. File — save as — появится список форматов, выберите например Jpeg далее жмём «сохранить», появится окошко JPEG options. Там в окошке image option будет ползунок, перемещая его увидите справа цифры — сколько весит.

Еще один способ сжать картинку разлицных форматов — это специальные сайты, веб сервисы например вот tinypng . com

Уменьшаем вес фото с помощью расширения для браузеров Lightshot

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

Уменьшаем вес фото Lightshot

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

Размер фотографий для публикации в интернете: 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 год): https://pavel-kosenko.livejournal.com/642666.html

pavel-kosenko.livejournal.com

SEO фотки или какого размера фото ставить на сайт для адаптивности?!

Сергей СМОРОВОЗ

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

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

Мобильный контент

Чтобы до конца осознать полноту масштаба «трагедии» необходимо обратиться к такому непопулярному в среде маркетологов отчёту в Яндекс.Метрике как «Ориентация экрана». Строится этот отчёт только как вспомогательный к основным отчётам через «Группировки».

Так вот, если построить отчёт «Ориентация экрана» за последние 2-3 месяца на любом коммерческом сайте, то можно увидеть такую картину, где доля трафика portrait

(портретная, вертикальная ориентация экрана) почти догнала долю
landscape
(ландшафтная, пейзажная, альбомная или горизонтальная ориентация экрана). Ниже, на графике №1 видно, что 36620 пользователей просмотрели сайт в горизонтальной ориентации экрана (landscape), а 33394 пользователя за этот же промежуток времени просмотрели сайт в вертикальной ориентации экрана (portrait).

Таблица №1

: соотношение устройств с горизонтальной ориентацией экрана и вертикальной.

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

Таблица №2

: ориентация экрана и устройства.

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

Совместная доля планшетов и мобильных телефонов в общей доле трафика по некоторым, наблюдаемым мною проектам коммерческой тематики весной 2019 года перевалила за 50% и продолжила рост, а по данным докладчиков конференции YaC/m 2019, проходившей в Москве 29 июня, рост пользователей, посещающих интернет через ПК замедлился, а то и вовсе остановился!

Что это значит?

Это значит, что сегодня просто иметь адаптивную вёрстку или мобильную версию сайта уже не достаточно, эту статью, конкретно в моём случае пользователи будут читать вместе с вами в двух типах ориентации экрана: вертикально и горизонтально, а пропорция этих пользователей будет примерно 50/50, так показывает Яндекс.Метрика по предыдущим публикациям. Ещё это значит, что восприятие информации с таблицы №1 и таблицы №2 будет разным. Не верите? Если вы сейчас читаете этот материал со стационарного компьютера, то посмотрите на эти таблицы с мобильника или планшета, а если вы сейчас читаете статью с мобильного устройства, то посмотрите как эти две таблицы будут вами восприняты со стационарного компьютера.

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

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

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

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

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

Разницу заметят только владельцы десктопов и ноутбуков, Таблица №2.3 у них будет меньше, чем Таблица №2.2, а у владельцев мобильных устройств не будет ни какой разницы, т.е. мы избавляемся от гигантизма шрифтов в десктопной версии, получаем читаемый вариант в мобильной версии и бонусом выигрывает 6,2 Кб веса. Таблица №2.3 легче чем Таблица №2.2 на 6,2 Кб. И не нужно здесь смеяться, эпоха мобильного контента и оптимизация страниц сайта возвращает нас обратно в 90-е, когда пользователи сидели на dial-up линиях и скорость интернет соединений была очень маленькая. В сети полно статей про прямую зависимость веса загружаемых страниц, скорости загрузки страниц, конверсий, поведенческих факторов и SEO.

В итоге выиграет тот, у кого контент интересный и оптимизированный, во всех смыслах.

Выводы

Какие выводы из всего этого можно сделать?

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

Рекомендация №1

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

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

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

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

Вот так это фото выглядит на экранах типовых устройств.

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

Рекомендация №2

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

Наиболее оптимальный размер картинок для ваших публикаций имеет смыл вычислить по данным веб-аналитики вашего сайта. Для стационарных ПК можно взять за основу самое маленькое разрешение ноутбука из популярных в вашей веб-аналитике, допустим: 1024х768. Делаем поправку на меню браузера и элементы дизайна сайта, а это минус 15-20% получаем лимит по ширине ~ 800px, а по высотке ~ 600px, в этих рамках весь ваш визуальный контент и должен быть не выходя за него, меньше можно, больше не стоит, на ноутбуках с разрешением 1024х768 ваш графический контент не будет виден полностью.

Формат для ваших графических публикаций (Сохранить как для WEB) имеет смысл выбирать по следующим правилам:

1.1) GIF (16 цветов) лучше всего применять для анимации на сайте, но не стоит ими злоупотреблять анимированные гифки весят очень много.

1.2) JPEG лучше всего применять для публикаций фотографий, сохраняя файл с качеством (Qiality): 60-80, этого достаточно, чтобы отобразить фото без потери качества.

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

Софт: PhotoShop, Lightroom, FastStone Image Viewer.

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

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

Загружайте изображения на сайт в распространенных графических форматах: jpeg, gif, png.

  • Для простых рисунков и особенно черно-белой графики, подойдет формат gif. Также форматы gif и png поддерживают прозрачность; то есть, воспользовавшись ими, Вы сможете сохранить рисунок на прозрачном фоне.
  • Формат png представляет собою нечто среднее между jpeg и gif. Он более щадяще, чем gif обрабатывает сложные изображения, и поддерживает прозрачность, в отличие от jpeg. Минусом сохранения изображений в этом формате является большой вес итоговых файлов при удовлетворительном качестве картинки и наоборот, низкое качество картинки при необходимости сохранения ее с малым «весом», т.е., — с сильным сжатием.

Размер изображения в пикселях и его «вес» в килобайтах

Однако, и сейчас, неправильным будет заставлять пользователя грузить к себе картинки весом по 500-1000 Кб, т.к. для пользователей мобильного интернета, это — потерянные секунды и рубли.

«Вес» картинки тесно (но не линейно) связан с ее размером в пикселях, а также со степенью ее сжатия.

2.1 Оптимальный размер фото для сайта. Каким должен быть размер, в пикселях, изображения для сайта?

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

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

2.2 Оптимальный «вес», в килобайтах, изображения для сайта

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

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

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

Страницы (и любые документы) общим весом более 10Мб, вообще, не индексируются поисковыми системами.

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

Имя файла

Для хорошей индексации графического файла, правильным именем файла, с точки зрения seo, будет осмысленное имя, написанное на английском языке или транслитом (только латиница!), не содержащее никаких других символов, кроме букв латинского алфавита, цифр, символов нижнего подчеркивания и тире. Например: prodvijenie-saitov.jpeg

Заполнение атрибутов изображений на сайте

  • Альтернативный текст (alt) – текст, который отображается вместо изображения, если оно само, по любой причине, не подгрузилось на страницу, например: «это — изображение яблока».
  • Всплывающая подсказка (title), которая появляется при наведении курсора на картинку.

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

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

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

Для среднестатистического текста в 3 – 3,5 тыс. знаков, оптимальное количество изображений 3-5. Подробнее об этом Вы сможете прочесть дальше, в разделе Оптимизация страницы

Читать далее

Подготовка материалов к постановке на сайт

Как оптимизировать web-страницу?

web-sadovnik.com

[s[sta_anchor id=»id1"]зменить размер фотографии с потерей качества[/st[/sta_anchor]>

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

Уменьшение веса на мобильнике.

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

Как уменьшить вес картинки

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

Как уменьшить вес картинки

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

Оптимальный размер фото для сайтов: пошаговая инструкция с фото

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

С чего все начинается?

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

Исходный формат RAW имеет слишком большой объем данных, хотя он и хранит максимум информации об изображении, о снятом кадре. Можно сказать, что это копия матрицы камеры на момент съемки.

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

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

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

Делать веб-страницы с такими фотками, при всем их качестве, – дело неблагодарное. Они медленно грузятся.

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

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

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

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

Во-вторых, разрешающая способность экрана на большинстве устройств 72 пикселя на дюйм или 96. Совершенно незачем пытаться отображать на таких экранах изображения с 300 пикселей на дюйм. Лишние пиксели будут просто усреднены и будет взята их проекция на один.

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

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

Процесс обработки

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

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

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

Открываем фотографию в редакторе

ФайлОткрыть. В появившемся окне выбираем нужную фотографию.

На рисунке мы берем фото, имеющее размер около 4,5 Мб. Этот файл у нас в формате JPEG, полученную с зеркальной фотокамеры.

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

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

Здесь выбираем:

  • Разрешение, ставим 72 пикселя на дюйм, нам больше и не надо.
  • Размер. Ширину ставим 800 пикселей, он автоматически назначит высоту, в данном случае, он поставил 533 пикселей, согласно пропорций фотографии.

Важно! Ставим все галочки, картинки. Это:

  • Масштабировать стили;
  • Сохранить пропорции;
  • Интерполяция: Бикубическая автоматическая

Правильное сохранение

Здесь, мы будем сохранять, специально для веб публикаций. Для этого заходим, ФайлСохранить для Web.

Выставляем качество

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

Выбираем «Высокое» качество 60%. У нас получилось в этом примере 193.5 Кбайт при качестве 60%. Ну и ладно. На вид обработанное изображение почти неотличимо от оригинала. Вот в таком самом виде его и сохраняем. Готово!

Проверим в браузере

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

На этом и все. Теперь вы можете выкладывать фотографию куда угодно, веб-сайт, социальные сети и так далее.

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

Всех вам благ, Тимур Мустаев.

fotorika.ru

Уменьшение с помощью специальных программ.

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

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

Как уменьшить вес картинки

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

Как уменьшить вес картинки

Таким образом, программа даёт хорошее соотношение качества изображения, к его размеру.

Рейтинг
( 2 оценки, среднее 4.5 из 5 )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий