Сколько должны весить картинки на сайте
Сжатие, при котором изображение будет весить не более 100 Kb и сохранит качество. Это напрямую влияет на скорость загрузки сайта и поведенческие факторы пользователей, которые не готовы ждать. Пользователь не оценит 20 Мб баннер в хорошем качестве, так как покинет страницу раньше, чем дождётся загрузки.
Какой оптимальный вес у изображения
Рекомендуемый вес для веба не должен превышать 100-150 Kb, оптимальный – в идеале не больше 100 Kb. Всё зависит от сайта и качества изображения. Нет универсального ответа на вопрос, так как многие владельцы сайтов преследуют глобальную цель – скорость загрузки страницы, которая в том числе зависит от веса изображения. Главное найти баланс между качеством и весом.
Как лучше совмещать сжатие с потерями и без потерь
Это зависит от самого изображения и других факторов, например, баланса между размером файла и шумами. Чтобы получить четкое детализированное изображение, необязательно применять сжатие с потерями. Используем этот метод оптимизации, если больше важен размер файла. Единого варианта настроек для всех изображений не существует. Мы сами определяем желаемый результат и принимаем решение.
Советы по оптимизации изображений
Выбирайте изображения в векторных форматах
Качество не зависит от разрешения и масштаба, поэтому они подходят для больших экранов и разных типов устройств.
Минифицируйте и сжимайте SVG-ресурсы
Многие графические приложения добавляют XML-разметку, которая часто содержит ненужные метаданные. Ее можно удалить. Убедитесь, что на серверах настроено GZIP-сжатие для SVG-ресурсов.
Выбирайте наиболее подходящие растровые форматы
Определите необходимые требования к изображениям и выберите нужный формат для каждого ресурса.
Пробуйте разные настройки качеств для растровых форматов
Не бойтесь снижать качество: изображение по-прежнему выглядит хорошо, а размер файла становится меньше.
Размер, вес и формат фотографий
Предлагаю рассмотреть, что это за звери — форматы фотографий JPG и RAW, на что они влияют и когда на них стоит обращать внимание. Что такое размер фото и вес файла, как они измерятся и от чего зависят.
Почти все фото камеры могут сохранять фотографии в формате JPG (даже камеры телефонов и планшетов). Во всех зеркальных и без зеркальных камерах, а так же в продвинутых компактах в дополнение к JPG есть, как минимум, RAW и RAW+, и иногда TIFF.
Чтобы разобраться с форматами, для начала нужно договориться, что подразумевается под понятиями «размер» фотографии и «вес» файла (фотографии). Предлагаю рассмотреть эти понятия на более осязаемых объектах. например, на вкусностях.
1 | Что такое пиксель:
Если измерить размер этой вазочки с ягодами, то это буде где-то 10 сантиметров в высоту и этак сантиметров 13 в ширину. примерно. То есть мы привыкли измерять предметы сантиметрами (метрами, километрами и так далее). Если же говорить о фото этой же вазочки, то изначальный размер фотографии — 7360 пикселей (px) в ширину на 4912 пикселей (px) в высоту. Это максимальный размер фото, на который способна моя камера Nikon. Для размещения этого фото на сайте, размер фото уменьшен до 1200px на 798px (зачем, расскажу чуть позже).
Что такое пиксель? Сделанные цифровыми камерами или оцифрованные на сканере фотографии представляют собой комбинацию крошечных цветных квадратиков — пикселей. Если вы сильно увеличите любую фотографию, то увидите эти пиксели. Чем больше в фото таких пикселей, тем более детальная картинка.
2 | Можно ли пиксели перевести в сантиметры:
Именно это и происходит, когда вам нужно напечатать фотографии на бумаге. Здесь понадобится ещё один показатель — плотность пикселей (разрешение), которую сможет напечатать принтер (или другая машина для печати фото). Полиграфическим стандартом для фотографий является разрешения 300 dpi (dpi — количество точек на дюйм). Например, для печати в красивых глянцевых журналах используют фото с разрешением 300 dpi.
Чтобы вы не ломали голову над делением размера фото на разрешение и не переводили дюймы в сантиметры, в любой программе для просмотра и редактирования фото (например, в Photoshop) есть функция просмотра размера изображения фото в сантиметрах. Она вам понадобится, чтобы понять, какого максимального размера фотографию в хорошем качестве (с разрешением 300 dpi), вы сможете напечатать на бумаге или другом материальном носителе.
Например, это фото с тропическими цветами Франжиспани, можно напечатать размером 61 см на 32 см.
Чтобы узнать размер фото в пикселях и сантиметрах в программе Photoshop, нужно нажать комбинацию клавиш Alt+Ctrl+I или зайти в меню Image (Изображение) ►Image size (Размер изображения).
Читайте о 6 способах узнать размер фото в статье — Как узнать размер фото
Вернёмся к реальности цифровых фото — к пикселям и размерам фото в пикселях. Что произойдёт, если уменьшить количество пикселей в фото? Ответ — ухудшиться качество фотографии. Например, я взяла фото этой же вазочки с ягодами, что в начале статьи, и уменьшила размер фото до 150 пикселей в ширину. При таком уменьшении программа уничтожает часть пикселей. Фотография стала миниатюрной:
Теперь попробуем «растянуть» фото на всю страницу:
Как видите, детализация уже не та, так как часть пикселей (а вместе с ними и деталей) отсутствует.
Конечно, если использовать эту уменьшенную картинку как маленькую иконку или небольшое изображение в презентации Power Point, то будет смотреться вполне нормально, но вот для печати в журнале на пол страницы она явно не подойдёт.
3 | Какой размер фотографии (сколько пикселей) оптимален:
Зависит от задачи. Фейсбук, например, автоматически уменьшает размер всеx загружаемых фотографий до 2048 пикселей в ширину. Как бы вы не хотели поделиться с друзьями высококачественным фото больного размера, Фейсбук вам этого не позволит. Грузите на другие ресурсы (например, на Dropbox). Самое распространённое разрешение экранов мониторов — 1920 px на 1080 px. Теоретически, если вы планируете своими фотографиями наслаждаться в электронном виде и рассылать по соц сетям, то 2048 px по длинной стороне вполне достаточно. Но на практике технологии не стоят на месте — мониторы становятся всё больше, соц сети более лояльны к размеру фото.
Если же вы планируете когда-нибудь печатать фото, то сохраняйте фото в максимально возможном разрешении, которое только позволит ваша камера (внимательно изучите инструкцию к вашей камере, чтобы правильно настроить размер фото).
В некоторых случая нужно уменьшать размер фотографий. Как я писала выше, для сайта я уменьшаю размер фото до 1200 пикселей по длинной стороне. Если загрузить фото в полном размере, страницы сайта будут очень долго загружаться, а это многим посетителям может не понравится (не говоря уже о поисковиках Гугл и Яндекс).
Размер фотографий измеряется в пикселях (px). От количества пикселей зависит размер фото на экранах мониторов, и какого размера можно напечатать фотографию.
4 | Размер файла или «вес фотографии»:
Теперь разберёмся с «весом фотографии». Так уж исторически сложилось, что в этом вопросе много путаницы и размер файла довольно часто называют «весом фотографии», что скорее удобно, чем правильно. Размер файлов измеряется мегабайтами (МВ) или килобайтами (КВ). И тут стоит помнить, что в отличии от килограммов, где 1 кг = 1000гр, 1 мегабайт = 1024 килобайт.
Как это выглядит на практике: представим ситуацию, что в вашем фотоаппарате есть карта памяти на которой написано 64GB (гигабайта). Если посмотреть, сколько же там именно этим байтов (на компьютере правой кнопкой мыши выбрать «свойства»), то окажется, что на этой карте памяти 63567953920 байт и это равно 59,2 GB. От того, насколько большие файлы создаёт ваша камера, зависит, как много фото поместится на этой карте памяти. Например, у меня помещается 830 файлов с фото в формате RAW (о форматах читайте ниже).
От чего завит размер файла:
- Во-первых, от размера фото (того, что пикселями измеряется): файл с первой фотографией ягодок (размер фото 7360×4912 px) — это 5.2 MB, а она же, уменьшенная до 150 рх будет «весить» 75,7 КВ (в 69 раза меньше).
- Во-вторых, от формата (JPG, TIFF, RAW), о чём читайте ниже.
- В-третьих, размер файла (или «вес фото») зависит от количества деталей: чем их больше, тем «тяжелее» фотография (что наиболее релевантно для JPG формата).
Например, вот в этой фотографии с обезьянами со Шри-Ланки множество мелких чётких (говоря языком фотографов, «резких») деталей и размер файла с этой фотографией — 19.7MB, что существенно больше чем ягодки в вазочке на белом фоне (5.2MB).
Если вы спросите, какого размера фото я могу напечатать с фотографии, которая весит 2МБ. Никто вам не сможет ответить, пока не узнает количество пикселей. А лучше, конечно, ещё и взглянуть на фото, так как некоторые умельцы любят доставать фото из глубин интернета, увеличивать количество пикселей программно, а потом хотеть напечатать её на обложке журнала. Получается как на примере выше с растянутой фотографией вазочки шириной 150 px.
Размер файла (часто называют «вес фотографий) измеряется в мегабайтах (МВ) или килобайтах (КВ) и зависит от формата, размера в пикселях и детализайии фотографии.
5 | Форматы фото:
И, наконец-то, мы подошли к вопросу форматов изображения и типа сжатия файлов, от которых тоже зависит размер файла с фото.
Практически все фото камеры могут сохранять фотографии в формате JPG (даже камеры телефонов и планшетов). Это самый распространённый формат изображений и его «понимают» все компьютеры и программы для просмотра изображений. В формате JPG фото можно загружать в соц сети, выкладывать в блоге, добавлять в файлы Word, Power Point и так далее. JPG можно обрабатывать в Фотошопе, Лайтруме и других программах для редактирования изображений.
Из моей практики: если я хочу сделать фото для соц сети и быстро его загрузить, то я или фотографирую на телефон, или ставлю в своей камере формат файла jpg.
Что стоит помнить о формате jpg — это сжатый формат и у него есть степени сжатия. Чем выше степень сжатия, тем меньше размер файла за счёт уменьшения детализации и качества фото. Поэтому не рекомендуется многократное редактирование и пересохранение (повторное сжатие) одной и той же фотографий в формате jpg.
Во всех зеркальных и без зеркальных камерах, а так же в продвинутых компактах в дополнение к JPG есть как минимум RAW, и часто ещё и TIFF.
- TIFF (англ. Tagged Image File Format) — формат хранения растровых графических изображений (в том числе фотографий). TIFF стал популярным форматом для хранения изображений с большой глубиной цвета. Он используется в полиграфии, широко поддерживается графическими приложениями.
- RAW (англ. raw — cырой, необработанный) — формат цифровой фотографии, содержащий необработанные данные, полученные с фотоматрицы (та штука, что в цифровых камерах заменила плёнку).
Лично я никогда не фотографирую в формат TIFF. Не могу даже придумать, зачем мне это нужно, если есть RAW. TIFF без сжатия я могу использовать для сохранения фото, которые ещё планирую доработать в программе Photoshop.
6 | Преимущества и недостатки формата RAW:
У меня в камере почти всегда стоит RAW формат, так как я собираюсь обрабатывать (редактировать) фото в Лайтруме или Фотошопе. У RAW есть ряд существенных недостатков:
- Нет возможности просмотра файлов без предварительной конвертации. То есть для просмотра фото в формате RAW вам нужна специальная программа, поддерживающая этот формат изображений.
- Больший объём файлов, чем при сохранении в JPEG (с моё камеры Nikon D800 размер файла с фото в формате RAW — это 74-77 МБ). Это означает, что меньше фотографий поместится на флешке.
- RAW невозможно загрузить в соц сети, блог, и иногда даже отправить по почте. Вначале RAW нужно конвертировать в RAW конвертере (например, Adobe Camera Raw), который поддерживает тип файла с вашей модели камеры.
Почему же профессиональные фотографы часто предпочитаю RAW, а не JPG? Потому что RAW:
- даёт больше возможностей для коррекции изображения: баланса белого, контраста, насыщенности, яркости и уровня шума,
- позволяют сильнее корректировать снимки без появления дефектов,
- позволяет тонкую коррекцию недостатков объектива (виньетирование, хроматические аберрации).
Итак, если вы планируете тщательнейшим образом обрабатывать снимки в Фотошопе или Лайтруме, тонко чувствуя «артефакты» и полутона, «пересветы» и «провалы» в тенях, то снимайте в RAW. Только помните, что для получения хорошего результата, вам понадобится разобраться с настройками и работой RAW конвертеров. Подумайте, нужно ли вам эта головная боль? Может стоит снимать в JPG и уделить больше времени отдыху, а не компьютеру?
7 | Статьи, которые могут быть вам интересны:
- Завал в фото: почему появляется и как с этим бороться.
- Что делать, если запотел объектив камеры.
- 4 способа уменьшить размер фото
- Как узнать размер фото
- Исправление глюков и багов Facebook или что делать, если Фейсбук не видит фото.
8 | Хорошие книги о съёмке фотографий и их обработке:
- Adobe Photoshop CC. Официальный учебный курс.
- Adobe Photoshop Lightroom 5. Официальный учебный курс.
- Фотография. Все секреты мастерства: от замысла до воплощения. Джон Гаррет и Грэйм Харрис.
- Язык композиции. Создаем выразительные фотографии. Альбрехт Рисслер.
- Композиция в фотографии. Николай Жолудев.
Понравилась статья? Поделитесь с друзьями:
Оптимизируем фотографии для сайтов: детальная инструкция
Фотографии или скриншоты — неотъемлемая часть для любой статьи или публикации. Но многие пользователи сталкиваются с проблемой долгой загрузки страниц с медиаконтентом, что вызывает негативные эмоции. Причина тому — отсутствие должной оптимизации контента. Об это в первую очередь должен заботиться руководитель проекта и SEO-оптимизатор. Фотографии и скриншоты на странице должны быть оптимального размера, который бы помещался на странице. Помимо этого изображение должно быть детализированным, иметь нужный формат и размер. Как это сделать? Читайте далее!
Как выбрать правильный размер фото для сайта
Проблема заключается в том, что современная фототехника позволяет делать снимки в высоком разрешении. Соответственно, их размер зачастую превышает 20-50 мегабайт. Несмотря на наличие у большинства пользователей скоростного интернета, объемные по весу страницы хуже индексируются поисковыми систему в виду своей загруженности. А неправильно подобранные пропорции приводят к тому, что при посещении сайта с мобильного телефона все картинки собьются.
Существует два ключевых размерных параметра для всех фото, загружаемых на сайт:
- Вес, который контент занимает в памяти устройства (компьютер или мобильная техника), измеряется в килобайтах и мегабайтах.
- Размер – Px — измеряется в пикселях, обозначает площадь, которую занимает картинка на странице.
Если ваш сайт работает на движке Ecwid, то размер картинок оптимизируется в автоматическом режиме под каждое разрешение дисплея пользователя. Эту же функцию предлагают некоторые другие CMS. Но в большинстве случаев нужно в ручном режиме указать количество px. Оптимальный формат — 1000х1000 px.
Что касается веса медиаконтента, то, чем он меньше, тем быстрее будет грузиться страница. Также необходимо позаботится об оптимизации путем сжатия. Главное — не перестараться, иначе ухудшится качество отображения. Оптимальный вес картинки — 200-400 килобайт, в зависимости от размера.
Кадрирование картинок
Если сжимать в размерах оригинальное изображение и уменьшать его вес, качество детализации снижается, пропадают менее четкие детали на фото. Если ваша цель — показать даже не прорисованные элементы, добавьте их отдельным кадром с увеличением. Так вы сэкономите место и не допустите проблем с оптимизацией страницы. Используйте Photoshop.
Нужны ли миниатюры?
Однозначно нужны! Для многих страниц на сайте нужны миниатюрные изображения (как и для страниц интернет-магазинов). Оптимальный их размер в пикселях — всего 250 px при весе в 50 килобайт. Достигните этого значения вручную в редакторе. А на сайтах на Ecwid миниатюры создаются автоматически!
Какие пропорции фото нужно добавлять на сайт
Существует перечень пропорций, которые могут быть добавлены на сайт (оптимальные):
- 1:1 (квадрат с ровным сторонами);
- 4:3 (высокий прямоугольник);
- 3:2 (простой прямоугольник);
- 16:9 (низкий прямоугольник).
Проследите за тем, чтобы все скриншоты и фотографии на страницах сайта были одной пропорции. Это визуально скрасит оформление. Важно подбирать пропорцию и по ширине самого текста. Особенно важной эта информация будет если разработка интернет магазина не включала наполнение, а вам необходимо красиво и гармонично вписать изображения товаров на страницы своего ресурса.
Настраиваем правильную резкость для фото в Photoshop
Размеры картинки и алгоритм уменьшения напрямую влияют на резкость и детализацию. Для правильной настройки нужно использовать встроенную функцию в редакторе Photoshop. За резкость отвечают параметры Bicubic Sharper. Значение Image Size лучше оставить на уровне 1000 px. Чтобы настроить резкость большого снимка, уменьшайте его размер постепенно, каждый раз на 1000 пикселей. После каждого изменения устанавливайте параметр Bicubic Sharper для настройки резкости. Таким образом вы добьетесь нужного результата без необходимости дальнейшей корректировки.
Способ изменения резкости для опытных пользователей
Этот способ подразумевает собой создание двух слоев фото с разным уровнем резкости.
Следуйте такому алгоритму:
- Уменьшите размер картинки при помощи параметра Image Size, выбрав дополнительно параметр Bicubic Sharper.
- Добавьте второй слой на фото параметром Duplicate Layer.
- Сделайте второй слой более резким (параметр Filter → Sharpen → Sharpen).
- Сделайте первый слой более прозрачным (параметр Opacity в окне Layer).
Здесь же вы можете использовать несколько хитростей. Например, добавьте на второй слой режим luminosity, чтобы не допустить проявления цветных ореолов.
Какой формат картинок лучше всего подойдет для добавления на сайт
Всего выделяют три актуальных формата фото и скриншотов для добавления на страницы:
- JPEG — наиболее актуальный формат, который поддерживает сжатие с потерей качества или без него (зависит от конечного размера);
- PNG — формат, позволяющий получить наиболее детализированную картинку после сжатия;
- GIF — формат, поддерживающий анимационные изображения (максимум — 256 цветов).
Для выбора последуйте советам:
- если изображение имеет много деталей, выбирайте стандартный JPEG;
- если изображение имеет много ровных заливок, выбирайте PNG, так как в формате JPEG сжатие придаст картинке пиксельности, что будет заметно на ровных краях;
- для анимации выбирайте GIF.
Не рекомендован ни в каком случае формат TIFF.
Чтобы уменьшить размер, потеряв при этом МИНИМУМ качества, воспользуйтесь сервисами: TinyPNG или JPEGmini.
Что делать, если нет Photoshop?
Не у каждого есть полноценная версия Photoshop, особенно если дизайн и создание сайтов вашим призванием не является. Есть альтернатива в виде онлайн версии Фотошопа, которая доступна на их сайте. Несмотря на ограниченный функционал, при помощи веб-программы можно отредактировать размер, настроить резкость. А при необходимости можно приобрести базовую версию, цена которой составляет около 10-20 долларов.
Перечень альтернативных бесплатных редакторов фото:
Эта программа легко устанавливается на ОС Windows, Linux и MacOS. В базовый функционал входит работа со слоями, ретушью, коррекцией цвета. Можно редактировать картинки любого популярного формата, рисовать, вставлять текст.
Эта программа используется только в Windows. Многие ее знают, как один из базовых вариантов для упрощенного редактирования картинки. Программа подходит для полупрофессиональной обработки. В инструменты входит работа со слоями, резкость, коррекция цвета.
Этот редактор доступен в онлайн-режиме. Его особенностью является наличие большого количества фильтров (наверное, самое большое из всех перечисленных здесь приложений). Однако, углубленный функционал скрывается в платной версии.
Эта программа частично способна заменить Фотошоп, так как и по пользовательскому интерфейсу, и по функционалу его повторяет.
Все редакторы, кроме Paint.NET, можно установить и на Windows, и на MacOS.
Как видите, существует множество возможностей правильно настроить и оптимизировать медиаконтент для вашего сайта. Сделать это можно без значительного ограничения в качестве.
Требования к загружаемым файлам для печати фотографий
Пожалуйста, обратите внимание на то, что Вы редактируете фотографии в редакторе на сайте самостоятельно. Мы получаем с сайта Ваши фото в готовом виде и редактировать их уже НЕ МОЖЕМ.
Особенности
Особенно будьте внимательны к размещению персонажей на снимке. Следите за тем, чтобы нужные элементы на снимке не попали за пределы рамки онлайн-редактора. Вы можете повернуть свое фото, обрезать, выделить на нем какую-то область либо напечатать все фото с полями, уменьшив само изображение. И, убедившись в том, что все фото загружены без потерь, отправляйте заказ нам. Мы с удовольствием напечататем Ваши красочные снимки!
Файлы, предназначенные для печати на фотолабораториях Noritsu 3701 и Frontier 7500, должны отвечать следующим требованиям:
- Цветовая модель RGB (8 бит на канал).
- Формат файлов — только JPEG, JPG.
- Цветовой профиль sRGB IE61996.
- Нельзя использовать иные профили для адекватной передачи информации файла.
- Разрешение файлов 300 dpi при соответствующем формате.
- Не используйте тонкие рамки для Ваших фотографий. При печати границы изображения могут сместиться под незначительным углом из-за тех. допустимого люфта цифровой лаборатории. Как результат — рамка может быть срезана.
Форматы и их соответствие в пикселях
Как рассчитать необходимый размер файла.
Рассчитать размеры страниц в пикселях можно, воспользовавшись формулой: px=dpi*cm/2.54,
где dpi- разрешение фотографии в пиксел/см кв. В соответствии с нашими требованиями, формула будет выглядеть так: px = 300 x ?cm / 2.54
Так, фотография размером 10*15 см и разрешением 300 dpi должна иметь размеры в пикселях 1181*1772. 1181=300 х 10 / 2,54. 1172 = 300 х 15 / 2,54.
Формат Вашего снимка можно определить, наведя на него мышкой, но не открывая файл. Зная формулу, Вы сможете рассчитать размер качественного фото в см., отвечающего техническим требованиям.
Наиболее распространенный формат бумаги для печати 10х15 имеет соотношение сторон 2:3, а формат снимков большинства современных цифровых фотоаппаратов – 3:4.
Но в социальных сетях, а также снимки с телефона, планшета часто являются квадратными.
В этом случае Вам надо будет выбрать, как напечатать Ваш снимок: «в обрез» или с полями. Печать «в обрез» предполагает, что будут отрезаны незначительные элементы фото, сохраняя только самое основное.
Взгляните, как можно отпечатать квадратную фотографию:
печатать фотографии «без полей» (с обрезкой); печатать фотографии «с полями»;
Обратите внимание! Не зависимо от параметра «кадрирование» незначительная часть изображения всегда будет уходить в обрез. Это связано с допусками печатной машины на люфт бумаги. Именно поэтому не рекомендуется размещать вокруг фотографии рамку. Она может быть отрезана машиной не так, как Вы ожидаете.