Как уменьшить размер изображения для ваших веб-сайтов (без потери качества) — WHSR
Обновлено by Jason Chow
Разглашение информации: WHSR поддерживается читателями. Когда вы покупаете по нашим ссылкам, мы можем получить комиссионное вознаграждение.
ReduciРазмер изображения веб-сайта важен для обеспечения оптимального взаимодействия посетителей с сайтом. Будучи таким «тяжелым», изображения также вызывают более длительное время загрузки страницы, что ненавидит Google. Оставление неоптимизированных изображений может привести к последствиям ранжирования страницы результатов поисковой системы (SERP).
Владельцы веб-сайтов часто относятся к изображениям с любовью или ненавистью. Мы любим их за богатый опыт, который они могут предоставить нашим пользователям. Тем не менее, изображения часто вызывают непропорционально большие накладные расходы ресурсов.
Чтобы избежать этого, мы можем работать над уменьшением размеров изображения различными способами;
- Изменение размера изображений вручную
- Использование сжатия изображений
- Преобразование изображений в другие форматы
- Использование WordPress плагин
Как уменьшить размер файла изображения
Помните, что уменьшение размера изображения означает уменьшение размера файла, а не просто уменьшение размера в пикселях.
1. Использование редактора изображений
Самый простой способ красногоuciРазмер изображения ng заключается в использовании такого инструмента, как Microsoft Paint (или GIMP если ты на Linux). Я скачал относительно большой файл на изображении выше, изначально размером 3724 x 2400 пикселей. Он занял 1.2 МБ, что важно для использования в Интернете.
Открыв его в Microsoft Paint, я изменил его размер до 1024 пикселей в ширину с пропорциональным уменьшением высоты. В результате получилось фото размером 1024 x 659 пикселей и размером всего 273 КБ.
Как видите, уменьшение размера файла фотографии позволило сэкономить более чем в пять раз по сравнению с исходным размером файла.
2. Использование сжатия изображений
Сжатие изображений может помочь еще больше уменьшить размеры изображений. Каждое изображение содержит такие компоненты, как качество цвета, плотность пикселей и многое другое. Чем лучше качество, тем больше данных содержит фотография и, следовательно, она занимает больший размер.
Нам не всегда нужны изображения самого высокого качества для использования в Интернете, особенно в наш век мобильных устройств. Из-за этого вы можете сжимать изображения с помощью онлайн-инструмента, такого как Optimizilla. Этот инструмент позволяет вам контролировать качество изображения, чтобы уменьшить размер изображения.
Установив качество изображения 70, я уменьшил уменьшенное изображение с 274 КБ до менее чем 80 КБ. Помните, что это по сравнению с исходным размером изображения более 1.2 МБ.
3. Преобразование изображений в другие форматы
Изображения бывают разных типов, что влияет на их качество и размер файла.
Например, одно и то же изображение в формате JPG может быть значительно меньше, чем такое же изображение в формате BMP. Сегодня многие веб-сайты переходят на форматы изображений следующего поколения, такие как WebP.
Опять же, с помощью онлайн-инструмента, такого как Онлайн-конвертировать, я могу быстро заменить исходное изображение волка из формата JPG в формат WebP. Это изменение привело к большей экономии размера: теперь файл WebP весит всего 28.7 КБ.
4. Используйте WordPress Плагин
Если вам нужно обработать несколько изображений и запустить WordPress сайт, есть еще лучший вариант. Плагины для оптимизации изображений могут делать все вышеперечисленное даже без вашего вмешательства. Примеры авторитетных плагинов для оптимизации изображений включают: EWW-оптимизатор, Изображение Smashи Imagify.
Преимущество использования этих плагинов заключается в том, что они могут работать независимо, и вам не нужно будет беспокоиться, как только вы все настроите. Однако использование плагинов увеличивает общее потребление ресурсов на вашем веб-сайте, поэтому выбирайте плагины с умом.
Заключительная мысль о красномucing Размер файла изображения
Показанные различные методы не являются взаимоисключающими. Вы можете использовать один, два или все три, и результаты, как правило, только улучшатся. Основная цель состоит в том, чтобы максимально уменьшить размеры файлов, не слишком жертвуя качеством изображения.
Помните, что чем легче ваш сайт, тем он выгоднее для ваших читателей и для вас. Они обеспечивают более плавную загрузку, а вы платите меньше за хранилище и пропускную способность. Это беспроигрышная ситуация.
Читать далее
- Различные типы веб-сайтов
- Лучшие генераторы lorem Ipsum
- Базовое руководство в формате HTML для чайников
- Платформы для создания собственного веб-сайта и мобильного приложения
- Места для самостоятельного изучения программирования
Статья Джейсона Чоу
Джейсон — поклонник технологий и предпринимательства. Он любит создавать веб-сайты. Вы можете связаться с ним через Twitter.
Как уменьшить размер фото
На чтение: 4 минАвтор: Сергей Фомин
Содержание статьи (кликните для открытия/закрытия)
- Простые способы уменьшить размер фото
- Создание скриншота в программе Ножницы
- Программа Диспетчер рисунков Microsoft Office (Picture Manager Microsoft Office 2010)
В интернете очень много статей как уменьшить размер фото. Но большая их часть описывает сжатие фотографий в Фотошопе. Для новичков эта программа сложна, и для уменьшения размера фотографии Photoshop нам не понадобится.
Мы рассмотрим 2 способа, как уменьшить размер фото стандартными средствами операционной системы Windows. Это программа Ножницы и с помощью пакета Microsoft Office.
Зачем уменьшать фотографии? Современная цифровая фототехника делает снимки высокого разрешения и от этого размеры файлов с изображениями могут составлять десятки мегабайт. Для размещения в сети, на сайтах такие объемы не нужны, так как замедляют загрузку страниц.
Создание скриншота в программе Ножницы
Для быстрого выбора программы можно воспользоваться контекстным меню. Кликаем правой кнопкой мыши на выбранной фотографии. Переходим в пункт Открыть с помощью…
Вызов программы из контекстного менюОткрываем изображение на вашем компьютере для просмотра в программе Просмотр фотографий Windows
Средство просмотра фотографийИзменяем размер окна до желаемого, фотография при этом должна отображаться целиком в этом окне.
Запускаем программу Ножницы из меню Пуск. В строке поиска меню наберите название программы Ножницы. И кликаем по ярлыку программы, который отобразится в списке поиска.
Программа НожницыНа кнопке Создать есть черный треугольничек — это раскрывающийся список. Нажмите и выберите пункт Прямоугольная область. При этом вид курсора изменится с ножниц на перекрестие.
Теперь нужно выделить прямоугольный участок на экране с нашим фото.
Выделение начинайте с верхнего левого угла при нажатой левой кнопке мыши. Растягиваем прямоугольник до нижнего правого угла нашей фотографии. И только после этого отпускаем левую кнопку мыши. Не раньше.
Если не получилось, попробуйте сделать заново. Для этого нажмите кнопку Создать в окне Ножницы.
Теперь сохраним полученное изображение. Это можно сделать двумя способами: Через меню Файл — Сохранить как... или Нажать на иконку Дискета
- Выберите Тип файла: JPEG-файл
- Задайте имя вашему снимку
- Нажмите кнопку Сохранить
После сохранения имеем следующий результат
Результат сжатия фотоКак видите, размер исходного фото стал значительно меньше. И теперь его можно разместить в Интернет на своем сайте или страничке в социальной сети.
Программа Диспетчер рисунков Microsoft Office (Picture Manager Microsoft Office 2010)
Данное средство входит офисный пакет Microsoft до версии 2010 (включительно), поэтому он должен быть установлен.
Кликаем на фото правой кнопкой мыши и выбираем Открыть с помощью — Диспетчер рисунков Microsoft Office (смотрите скриншот выше)
Диспетчер рисунков Microsoft Office
Кликаем Изменить рисунки
Сжатие рисунков средствами Microsoft Office 2010Кликаем Сжатие рисунков
И в параметрах сжатия выбираем Для документов (можно выбрать Для веб-страниц, но при этом изображение станет мельче, читайте подсказку в параметрах)
Нажимаем кнопку ОК. Теперь все наши изменения необходимо сохранить.
Внимание! Нажатие Дискеты перезапишет исходный файл и уменьшит его размер.
Сжатое фото хорошо отображается на экране компьютера, но будет не пригодно для печати на фотобумаге (качество будет плохим). Рекомендую оригинал фотографии оставлять, а изменения сохранять в новый файл командой из меню Файл — Сохранить как.
.. (смотри сохранение в способе 1)
Теперь вы знаете два способа как уменьшить размер фото.Подводя итог можно сказать, что средств для сжатия изображений гораздо больше. Каждый выбирает тот, что удобнее. Первый способ подойдет тем у кого на компьютере нет офисного пакета. Можно установить бесплатную программу Riot и сжимать в ней или FastStone Image Viewer. А чем Вы сжимаете фото?
Дополнительная информация:
- Рубрика Работа с графикой
Полное руководство по изображениям веб-сайтов [2021]
Получение правильного изображения нужного размера и формата в нужном месте на веб-странице имеет решающее значение для отличного веб-дизайна и надежного взаимодействия с конечным пользователем. Мы составили Полное руководство по размеру изображения веб-сайта на основе наиболее часто задаваемых вопросов.
Содержание
- Соотношения и изображения
- Фавиконы, логотипы и изображения шаблонов
- Основные изображения и полноразмерные изображения
- Изображения для сообщений в блогах и страниц контента
- Размер изображения и время загрузки страницы (важно для SEO)
- Типы файлов изображений
- Имена изображений и альтернативные теги
- Размеры видео и GIF
- Встраивание и хостинг видео
- Цветовые профили
- Другие соображения
Соотношения и изображения
Существуют различные рекомендации относительно того, какие размеры вы должны использовать для изображений веб-сайта, поэтому, прежде чем вы начнете спорить о пикселях, мы должны прийти к соглашению о соотношениях.
Определение формы изображения для каждого раздела вашего сайта (какие соотношения должны быть в игре) является важным первым шагом.
Общие соотношения сторон
- Квадрат 1:1 . Квадратные изображения, которые чаще всего имеют размер 1080 x 1080 пикселей, отлично подходят для изображений в тексте, рекламы на боковой панели и Instagram.
- 16:9 Панорамный . Это ваше обычное соотношение изображений Hero для стандартных широкоэкранных размеров. Он часто имеет размер 1920 x 1080 пикселей и используется в презентациях, широкоэкранных телевизорах и ландшафтных изображениях.
- 3:2 Прямоугольник . Часто используется в печати или на телефонах, размер 1080 x 720px.
- 4:3 Прямоугольник. Чуть выше, чем 3:2, прямоугольник 4:3 был наиболее распространенным соотношением размеров экрана до того, как широкоэкранные мониторы стали популярными.
- 1,91:1 Альбомное соотношение сторон. Обычно используемые и поддерживаемые на различных платформах социальных сетей, пропорции ландшафта также популярны для «избранных изображений» для сообщений в блогах и другого контента. Рекомендуемая минимальная ширина 1080 пикселей.
Фавиконы, логотипы и изображения шаблонов
Фавиконы
Фавиконы — это маленькие значки, которые можно найти на вкладке браузера и в закладках. Они не используются во многих местах, но все же важно иметь их на своем сайте.
Файлы Favicon должны иметь формат .ico или .png и должны иметь соотношение сторон 1:1 (квадратное) и минимальный размер от 16×16 до 32×32 пикселей.
Чтобы преобразовать png в файл ico, вы можете использовать такие инструменты, как favicon.
io.
Логотипы на панели навигации
Если вы используете логотип своего сайта на верхней панели навигации, мы рекомендуем размер изображения логотипа:
- Горизонтальные логотипы: соотношение 3:2 или 250 x 100 пикселей
- Квадратные логотипы: соотношение 1:1 или 160 x 160 пикселей
Основные изображения и размеры полноразмерных изображений
Ваше основное изображение, скорее всего, будет иметь соотношение сторон 16:9, если вы собираетесь использовать всю высоту браузера. При таком соотношении ширина вашего изображения, скорее всего, будет варьироваться от 1500 пикселей (абсолютный минимум) до 2560 пикселей (рекомендуемый максимум). Мы рекомендуем идти с 19Ширина 20 пикселей, так как это самая распространенная ширина браузера в Северной Америке.
Какие разрешения экрана наиболее распространены?
По данным StatCounter, с июня 2020 г.
по май 2021 г. наиболее распространенными разрешениями экрана рабочего стола во всем мире являются:
- 1920 x 1080: 20,99%
- 1366 x 768: 20,23%
- 1536 x 864: 9,72%
- 1440 x 900: 6,23%
- 1280 x 720: 5,45%
- 1600 x 900: 3,47%
Невероятно полезно проверить отчет о разрешении экрана Google Analytics, чтобы узнать, какие размеры экрана наиболее распространены для вашей конкретной аудитории.
Аудитория > Технологии > Браузер и ОС > Разрешение экрана
Размер файла имеет значение
Несмотря на то, что «чем больше, тем лучше», когда речь идет об обеспечении высокого разрешения, больше НЕ значит лучше, если учитывать время загрузки страницы во внимание. Поскольку время загрузки страницы является ключевым фактором в алгоритме Google Core Web Vitals, вы должны убедиться, что размер вашего самого большого файла изображения не превышает 20 МБ.
Если вы планируете разместить более одного изображения на своей веб-странице, размер каждого файла изображения будет добавляться к общему размеру страницы. Большие размеры файлов и несколько файлов будут влиять на производительность сайта и время загрузки страниц.
Размеры основных изображений для мобильных устройств
Большинство адаптивных веб-сайтов изменяют размер ваших основных изображений в соответствии с устройством, на котором они отображаются. Однако, если у вас есть очень большие изображения или вы используете видео в своих основных разделах, вы можете указать альтернативные изображения, которые будут отображаться, когда кто-то посещает сайт на меньшем экране. Это может помочь сократить время загрузки страницы на устройствах, которые используют данные по сравнению с Wi-Fi, а также может помочь сэкономить некоторую пропускную способность и использование данных для тех, кто использует свои телефоны.
Некоторые хорошие пропорции и размеры для мобильных изображений заголовка:
- Вертикальные изображения Соотношение 4:5, 1080 x 1350px
- Квадратные изображения Соотношение 1:1, 1080 x 1080 пикселей
Изображения для постов в блогах и страниц контента
Дизайн вашего веб-сайта определит наилучшее соотношение сторон для ваших изображений.
Когда вы создаете и сохраняете изображения, лучше всего установить их размер с тем же соотношением сторон, что и область, в которую они будут помещены, чтобы у вас не было каких-либо странных проблем с изменением размера или обрезкой.
Определите соотношение сторон
Взгляните на дизайн своего веб-сайта и оцените, какие соотношения вы используете в своем шаблоне сайта. Как только вы определите эти соотношения, вы сможете оценить, каким должно быть разрешение этих изображений. В то время как ваши основные изображения 16:9 должны иметь ширину около 1920 пикселей, ваши изображения 16:9, которые занимают половину страницы или меньше, могут быть легко уменьшены до ширины 960 пикселей.
Измените размер изображений перед загрузкой на сайт
Мы настоятельно рекомендуем изменить размер изображения до разрешения, аналогичного тому, где оно используется. Например, если вы собираетесь разместить в своем блоге квадратное изображение размером 1080 x 1080 пикселей, обрежьте его и сохраните как 1080 x 1080 пикселей.
Большинство стоковых изображений и пользовательских файлов фотографий ОГРОМНЫ — ширина превышает 4000 пикселей. Эти большие фотографии в высоком разрешении прекрасны, но нет необходимости сохранять их в таком размере при использовании на веб-странице.
Изображения в блогах: Избранные изображения и публикация в социальных сетях
Хорошим стандартом для сообщений в блогах является использование коэффициента 1,91 или 1200 x 627 пикселей, потому что это также хорошая основа для обмена изображениями в социальных сетях, таких как Facebook и LinkedIn.
Изображения для горизонтальных галерей
Мы рекомендуем, чтобы все изображения в карусельных галереях имели одинаковую высоту в 1500 пикселей, независимо от того, являются ли они вертикальными или горизонтальными. Это удерживает страницу от прыжков и создает более удобный пользовательский интерфейс при прокрутке галереи изображений.
Изображения товаров
Если у вас есть изображения товаров, мы рекомендуем оставить их в масштабе 1:1, чтобы обеспечить согласованность во всей галерее вашего магазина и для изображений сравнения товаров.
Но даже если вам нужно загрузить изображения не в масштабе 1:1, мы рекомендуем, чтобы самая длинная сторона была от 1500 до 2500 пикселей; большие изображения особенно важны, когда у вас есть возможность увеличить изображения продукта.
Для онлайн-покупок необходимы изображения с высоким разрешением, чтобы посетитель мог «увидеть» продукт как можно подробнее.
Изображения половинной ширины
Вы можете использовать эти размеры изображения в разделах или столбцах, которые должны занимать половину ширины страницы. В зависимости от ваших целей и потребностей в дизайне вы можете использовать соотношение сторон 4:3, 3:2, 1,91:1 или 1:1 с максимальной стороной от 1200 до 1500 пикселей по всему телу вашего веб-сайта. Что касается основной части сайта, мы также не рекомендуем, чтобы размер каждого изображения был на пару мегабайт меньше 20 МБ, мы настоятельно рекомендуем постараться не выходить за пределы этого диапазона 200 КБ, если это возможно.
Размер изображения влияет на время загрузки страницы
Время загрузки страницы веб-сайта зависит от ряда факторов, включая дизайн веб-страницы, браузер, хост вашего веб-сайта, используемое устройство и многое другое.
Идеальная загрузка веб-страницы не должна превышать двух секунд, чтобы избежать потери потенциальных клиентов, конверсий или продаж. Вы можете узнать больше об улучшении времени загрузки страницы здесь, если вам интересно.
Время загрузки страницы влияет на показатель отказов
Источник изображения
Какой тип файла изображения следует использовать? (PNG vs JPEG)
Наиболее распространенные типы файлов для веб-сайтов:
JPEG | Настоятельно рекомендуется и является лучшим вариантом для фотографий или видеоматериалов на вашем веб-сайте. Самый легкий по размеру файл, тип файла с потерями — это означает, что он всегда будет терять информацию, чем больше вы редактируете изображение. |
PNG | Рекомендуется для значков, плоской цветной графики и логотипов, поскольку поддерживает прозрачность, но имеет больший размер файла. |
ТИФФ | Формат файла изображения с тегами; Это типы файлов без потерь, которые обеспечивают более высокое качество, но имеют большие размеры файлов. |
GIF | GIF допускает прозрачность, может быть анимированным и обычно имеет очень маленький размер файла. Вы также можете использовать его для быстрой анимации логотипа, продукта, который вы продаете, или графики на вашем веб-сайте. |
СВГ | Он же «Масштабируемая векторная графика»; Некоторые разработчики веб-сайтов, такие как Wix, позволяют загружать форматы файлов SVG, которые затем позволяют вам вносить изменения в редакторе веб-сайтов в цвета этой графики. Этот формат файла остается четким при любом размере, потому что он математически нарисован с помощью программного обеспечения с открытым исходным кодом. Они, как правило, имеют больший размер файла, могут быть анимированы, поддерживают прозрачность и представляют собой формат файла без потерь. |
Лучше всего подходит для печати и публикаций.Имена изображений и альтернативные теги
Именование файлов изображений
Выбор правильного имени файла для этих изображений также может помочь SEO-рейтингу вашей страницы в результатах поиска изображений.
Обязательно называйте файлы соответствующими и описательными ключевыми словами и не используйте символы подчеркивания. Например:
Вместо:
drinkcoffee.jpg
drink_coffee_2.jpg
Используйте описательные ключевые слова:
женщина-пьющая-кофе-рядом-стол.jpg
Использование альтернативных тегов изображений
Хорошие альтернативные теги помогают всем трудолюбивым поисковым роботам выяснить, о чем ваши изображения, в то время как они дополнительно индексируют ваш сайт. Они также используются программами чтения с экрана для описания изображения пользователям с нарушениями зрения. Предоставление тегов alt дает хороший контекст для поисковых роботов, помогает слабовидящим пользователям, а также способствует ранжированию ваших веб-страниц. Alt-теги изображения должны описывать изображение без набивки ключевыми словами. Подумайте, как бы вы описали изображение тому, кто его не видит.
Размеры видео и GIF
Использование анимированных .
gifGIF позволяют использовать прозрачность и анимацию, но их цена зависит от размера файла. Гифка шириной 1500 пикселей не лучший вариант для скорости загрузки страницы вашего сайта. Лучше всего сохранять размер файлов менее 1 МБ, особенно если вы собираетесь использовать их в качестве фонового изображения для своего главного раздела. Вы захотите, чтобы в разделе героев было видео высокого разрешения, поскольку меньший gif может быть действительно пиксельным, если его принудительно масштабировать в вашем браузере.
Использование видео в качестве фона
Видео в вашем разделе героев могут быть очень привлекательными, и они могут помочь передать суть вашей компании или бизнес-проекта. Фоновые видео на самом деле не предназначены для просмотра в формате 4K, и иногда они накладываются определенным цветом, чтобы затемнить или осветлить фон, чтобы обеспечить контраст с заголовком страницы и подзаголовком.
Пара вещей, о которых следует помнить для фоновых видео в главных разделах:
- Если ваше видео предназначено для полноэкранного просмотра на главной странице, мы рекомендуем использовать соотношение сторон 16:9.
.jpg)
- Старайтесь, чтобы фоновое видео длилось от 5 до 20 секунд
- Сохранить размер видеофайла до 6 МБ или меньше
- Не отключайте звук. Видео, которые автоматически воспроизводят звук, оцениваются как одно из самых раздражающих событий, которые может предложить веб-сайт. Кроме того, добавление звука увеличит размер вашего файла, поэтому мы предлагаем вам просто удалить его, если он не нужен, или отключить звук по умолчанию при загрузке страницы.
- Не позволяйте видео конкурировать с контентом на странице. Убедитесь, что между текстом и цветом изображения достаточно контраста, чтобы вы могли легко читать текст. Вы можете использовать цветовые наложения, чтобы обеспечить контраст для изображения, которое имеет как светлые, так и темные области.
- Рассмотрите возможность ленивой загрузки видео в нижней части веб-сайта, чтобы основной контент на странице загружался быстрее.
Встраивание и хостинг видео на вашем сайте
Вы можете обнаружить, что вам нужны видеоролики на вашем веб-сайте, чтобы повысить удобство работы в Интернете для ваших посетителей. Стоит ли встраивать или загружать свои видео для размещения прямо на вашем сайте?
Размещение видео на вашем сайте
Загрузка видео на ваш сайт может замедлить загрузку страницы, поэтому предпочтительнее их встраивание. Практически каждый сайт видеохостинга предоставляет создателям доступ к ссылке «встроить видео». Вопрос только в том, с какой платформы вы берете видео.
Если вы загружаете видео для использования на своем сайте, вам следует использовать файл MP4 с качеством HD, чтобы оно работало в большинстве браузеров и отлично выглядело на большинстве устройств. При сохранении в файлах вашего сайта давайте своим видео описательные заголовки, которые отражают то, о чем идет речь в видео, чтобы помочь повысить SEO.
Встраивание видео на ваш сайт
При встраивании видео на ваш сайт следует обратить внимание на несколько моментов:
- Встроенное видео — это хороший способ избежать ограничений размера файла и хранилища, установленных вашим хост-провайдером.
- Встроенные видео обеспечивают более высокое качество потоковой передачи.
- Встроенные видео также ускоряют загрузку страниц.
- Встраивание видео также позволяет учитывать просмотры с вашего сайта при подсчете просмотров на таких платформах, как YouTube или Vimeo, что повышает вашу ценность для SEO.
Если вы автоматически воспроизводите видео при загрузке страницы, убедитесь, что звук отключен. Если видео не является ключевым элементом страницы, рекомендуется не включать автовоспроизведение.
- Показать элементы управления видео, предоставляя пользователю возможность управления взаимодействием с контентом
- Если видео альбомное, экспортируйте видео с соотношением сторон 16:9 (панорамное, альбомное)
- Если видео должно быть вертикальным (подходит для Instagram Stories или TikTok), соотношение сторон 9:16 рекомендуется.
Цветовые профили
Существует множество профилей, но наиболее рекомендуемым для наших целей является sRGB.
Это связано с тем, что sRGB является стандартом для цифровых изображений, Интернета и вашего домашнего принтера. Использование цветового профиля sRGB гарантирует, что ваши цвета не будут выглядеть размытыми, тусклыми или перенасыщенными на разных устройствах, в программах и приложениях.
Другие рекомендации по изображению
Перед загрузкой… Сжать!
Независимо от того, где вы получили изображение, мы рекомендуем вам использовать TinyPNG, Optimizilla или бесплатную версию Kraken, чтобы уменьшить размер файлов JPGS и PNGS. Эти сайты уменьшают размер файла, но практически не влияют на качество ваших изображений. Для большинства изображений вы должны стремиться сжать изображение до 100 КБ или до 200 КБ для полноразмерных изображений.
Разрешение изображения
Наиболее важно при печати изображения. Значение разрешения будет определять количество пикселей вашего изображения, которое будет напечатано на линейный дюйм бумаги, поэтому печатная работа для результатов, таких как брошюры или художественная работа над книгой, должна иметь разрешение 300 пикселей на дюйм или любое другое значение, которое запрашивает ваш принтер.
Поскольку мы показываем изображения в Интернете, разрешение изображения не имеет такого большого значения, если вам нужно распечатать изображения. Если вам действительно нужен номер, мы бы сказали, используйте 72 ppi dpi (точек на дюйм). Если вам интересно узнать больше о разрешении изображения, зайдите на сайт photoshopessentials.com, чтобы получить более подробное представление о разрешении изображения и немного о мифе о 72 ppi. Ниже приведены изображения с разным разрешением, но с одинаковым размером файла и размером в пикселях.
Размер в пикселях и размер файла
Пиксели составляют размер файла изображения. Чем меньше пикселей, тем меньше у вас информации об изображении и тем меньше оно будет. Взгляните на это изображение телефона ниже, изображения имеют ширину от 262 до 1192 пикселей. Рядом, в уменьшенных версиях, они выглядят очень похоже. Однако, если вы начнете увеличивать масштаб, вы быстро потеряете резкость, в то время как изображение справа остается четким из-за большего количества пикселей.
Следование стандартам или отказ от шаблона
Это руководство по изображениям веб-сайтов предназначено для того, чтобы помочь вам ответить на все те вопросы, которые возникают при разработке и обслуживании вашего веб-сайта. Тем не менее, «правила» дизайна, UX и SEO изменчивы и меняются, и это руководство — не последнее слово в том, что вы должны делать со своим дизайном. Некоторые из лучших сайтов, которые мы видели, намеренно и добросовестно нарушают эти правила, и результат потрясающий.
Не знаете, что делать с вашим сайтом? Наши отмеченные наградами дизайнеры веб-сайтов могут помочь вам.
Какого размера должны быть мои изображения для Интернета?
Если вы уменьшите размер изображений до максимального размера, с которым вы планируете их отображать (или чуть больше), прежде чем загружать их на свой веб-сайт, вы можете получить лучшее качество изображения, чем если бы вы полагались исключительно на изменение размера изображения.
функциональность вашей системы управления контентом (и определенно лучшее качество изображения, чем если бы ваша система управления контентом вообще не обрабатывала изменение размера изображения).
JPEG — лучший формат файлов для большинства изображений веб-сайтов, и вы можете сохранять их в среднем качестве (а не в высоком разрешении) без заметной разницы на веб-странице (если вы не предложили опцию увеличения) . Не используйте файлы PNG, если вам не нужны частично прозрачные изображения (они имеют огромный размер файла по сравнению с jpeg)
Кроме того, если вы потратите время на уменьшение изображений перед их загрузкой, процесс загрузки будет проходить быстрее, особенно если у вас много изображений. Высота 1100-1500 пикселей примерно соответствует размеру любых изображений, и вам часто будет достаточно изображений высотой ≤800 пикселей для вашего веб-контента. Исключением является случай, когда вы хотите предоставить пользователям возможность увеличивать масштаб для просмотра деталей ваших изображений.
В этом случае хорошо настроить специальный случай для изображений с высоким разрешением (чтобы ваши страницы не загружались медленно для каждого пользователя). Мы можем сделать это для вас.
Photoshop — лучший редактор изображений для качественного изменения размера (и вам может быть интересно прочитать статью «Как изменить размер изображений для вашего веб-сайта в Photoshop», где рассказывается о том, как тщательно выполнять этот процесс). В качестве альтернативы вам может подойти редактор изображений на вашем компьютере или вы можете попробовать бесплатное программное обеспечение Canva.
Самое главное — использовать только изображения нужного вам размера или немного больше.
Также: никогда не загружайте изображение меньшего размера, чем то, в котором вы хотите его отобразить. Цифровые изображения становятся размытыми, если их увеличить.
Вы можете получить информацию о размере изображения, щелкнув его правой кнопкой мыши для получения информации об изображении («Получить информацию» > «Размеры») или просмотрев данные изображения из папки на вашем компьютере (выберите изображение в папке без открывая его, и миниатюры и данные изображения должны отображаться в соседнем окне).
Какой размер вам нужен для отображения на вашем сайте?
Чтобы решить, в каком размере должны отображаться ваши изображения, вам нужно подумать о:
- максимальные размеры контейнеров контента в макете вашего сайта
- размеры экранов устройств, на которых они будут просматриваться
- как вы собираетесь использовать изображения (обложки, баннеры, слайд-шоу, миниатюры, общий интерес и т. д.)
Пользователи WordPress :
Если любое из изображений, которые были загружены в размерах, превышающих 2560px , WordPress автоматически создает «масштабированную» версию изображения, и эти изображения, как правило, размыты и неприемлемы. Очень большие изображения должны быть изменены перед загрузкой, чтобы избежать этого, если только вам не нужно очень большое изображение для масштабируемого изображения или если вы показываете очень высокое изображение и вам нужно изображение во всю ширину. В этом случае вы должны получить доступ к исходному изображению через код.
