Правильный размер ваших фотографий для Интернета

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

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

Загрузка в веб-галерею

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

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

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

Загрузка на собственный веб-сайт

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

Насколько маленькими должны быть файлы для вашего веб-сайта? Вероятно, намного меньше, чем вы думаете. Есть две переменные, которыми вы управляете (и я покажу вам, как ими управлять позже в этой статье):

• размер – измеряется в пикселях; и
• качество – измеряется в процентах.

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

1. Размер

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

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

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

2. Качество

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

Кроме того, уменьшение процента качества приведет к более высокому уменьшению размера файла в процентах. Другими словами, снижение процента качества на 5% (скажем, со 100% до 95%) приведет к уменьшению размера файла более чем на 5%. Каждые 5 % снижения качества уменьшают размер файла примерно на 15 %, хотя это уменьшение тем меньше, чем больше вы снижаете качество.

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

В качестве ориентира для вас, ребята из Школы цифровой фотографии, которые кое-что знают о том, как масштабировать фотографии, разрешают размещать на своем веб-сайте только фотографии размером до 200 килобайт (КБ). Даже после уменьшения размера изображения до 750 пикселей по длинной стороне (их максимальный размер) мне часто приходится снижать качество изображения где-то между 70 и 90%, чтобы получить размер файла менее 200 КБ.

Я более снисходителен к своему собственному веб-сайту, потому что у меня нет такого объема изображений (или трафика), как у DPS, я позволяю своим изображениям быть немного больше. Тем не менее, я стараюсь держать их на уровне около 200 КБ и никогда не позволяю им превышать 450 КБ. Я обнаружил, что мои страницы по-прежнему открываются довольно быстро.

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

3. Размер файла

Главное, что следует усвоить, это то, что фотографии, которые вы публикуете в Интернете, должны измеряться в килобайтах. (КБ), а не мегабайты (МБ), когда они публикуются в Интернете. Типичный файл Raw, который выходит из моей камеры, составляет около 24 МБ, и даже когда я конвертирую файл в JPEG, он все еще обычно составляет 7-10 МБ. Это способ слишком большой для веб-файла. Это не приносит вам пользы и тормозит вашу систему.

Примеры

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

Большие и очень большие

Во-первых, в качестве отправной точки вверху этой страницы находится фотография, которую я недавно сделал в природной зоне штата Торре-Пайнс в Калифорнии. Я изменил размер изображения, чтобы оно соответствовало области содержимого этого веб-сайта, ширина которой составляет 1024 пикселя. Кроме того, я также уменьшил настройку качества до 80%. В результате размер файла составил 450 килобайт.

Для сравнения я также разместил ниже ту же картинку, но в два раза больше. Это изображение имеет ширину 2048 пикселей, и я сохранил настройку качества на 100%. В результате получился файл размером 3,8 МБ, что примерно в 8 раз больше размера файла, чем изображение в верхней части экрана.

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

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

Разные настройки качества

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

• Настройка качества 100 % (файл 234 КБ)
• Настройка качества 80% (файл 115 КБ)
• Настройка качества 60 % (файл размером 70 КБ)
• Настройка качества 40% (файл 44 КБ)

Я их перепутал. Можете ли вы сказать, что есть что? Как только вы сделаете свое предположение, сравните его с ответом в подписи ниже.

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

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

Имея это в виду, давайте рассмотрим, как изменить размер фотографий.

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

Когда вам нужно изменить размер фотографий, как вы это делаете? Это зависит от того, какое программное обеспечение вы используете. Photoshop или Lightroom отлично справятся с этой задачей, и вам не потребуется какое-либо отдельное программное обеспечение для изменения размера.

Вот как это сделать в каждой программе:

Изменение размера фотографий в Photoshop

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

В меню «Файл» выберите «Сохранить для Интернета». Появится диалоговое окно, которое позволит вам установить размер и качество изображения:

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

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

Изменение размера фотографий в Lightroom

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

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

Когда дело доходит до определения размера файла, Lightroom позволяет сделать это одним из двух способов:

• установив ограничение на размер файла или
• устанавливая качество (в процентах — как в Photoshop).

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

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

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

Заключение

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

• Определите, нужно ли вам вообще беспокоиться об изменении размера изображений. Если вы используете SmugMug, SquareSpace, Flickr или другой сервис для размещения своих фотографий в Интернете, вы этого не сделаете. Просто разместите их как есть, и ваш поставщик услуг все сделает за вас. Но если вы создаете свой собственный веб-сайт или сайт WordPress, вам необходимо правильно подобрать размер изображений.
• Если вам нужно изменить размер изображений, определите размер (в пикселях) вашего изображения на основе размера контейнера на вашем веб-сайте и того, какую часть этого контейнера вы хотите заполнить изображением.
• Используйте функцию «Сохранить для Интернета» в Photoshop или функцию «Экспорт» в Lightroom, чтобы изменить размер изображения, начиная с установки размера, определенного на шаге 2.
• Установите процент качества, чтобы еще больше уменьшить размер файла изображения (или вы можете использовать максимальный размер файла в Lightroom). Старайтесь, чтобы размер изображения не превышал 250 КБ.
• Не бойтесь использовать процент качества всего 50%.

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