Если вы посмотрите в Интернете, вы увидите много примеров искаженных, пиксельных или усеченных изображений. Даже на известных сайтах. В этом блоге объясняется, как вы можете избежать их и сделать свой веб-сайт красивым и четким.
Итак, скажем, вы хотели создать хорошую веб-страницу с изображением.
Но в итоге вы столкнулись с одной из следующих проблем:
- Искаженное изображение
- Сокращенное изображение
- Переполнение изображения [19459
- Pixelated Image
- Медленная загрузка изображения
Давайте рассмотрим каждый из этих ошибочных дисплеев и посмотрим, как вы можете это исправить.
Как правило, вы хотите чтобы отобразить изображение с фиксированными размерами, в разделе вашей веб-страницы. Аккуратно организован со всем другим контентом. Мы назовем область, в которой вы хотите отобразить свое изображение, в качестве контейнера поле .
Теперь, если соотношение сторон изображения (объясненное ниже) точно соответствует таковому для коробки, все будет играй честно. Но все идет не так, как надо.
Искаженное изображение
Искажение происходит при соотношение сторон изображения не совпадает с форматом окна. Соотношение сторон — это отношение ширины к высоте изображения. Например, если вы попытаетесь поместить квадратное изображение в прямоугольное поле, вы обязательно увидите искажение. Никогда не слышали о квадратном колышке в круглой дыре!
Решение
Решение, позволяющее избежать искажения, состоит в том, чтобы позволить изображению течь в одном направлении, а не заставлять его принимать соотношение сторон коробки. Если вы не уверены в соотношении сторон вашего динамического изображения, сохраняйте свою коробку гибкой, чтобы приспособиться к различным соотношениям сторон. Это можно сделать двумя способами:
Оставить одно измерение фиксированным и допустить его переполнение вдоль второго
Например, вы можете применить к боксу надлежащие стили для имеют фиксированную ширину, позволяя высоту автоматически регулировать. Высота дисплея будет изменяться и вычисляться на лету от фиксированной ширины изображения.
Оставьте одно измерение фиксированным и дайте ему усечь в другом направлении
Допустим, вы хотите, чтобы ваш ящик имел фиксированную ширину и высоту, но пропорции исходного изображения могут отличаться. Затем вы также можете обрезать изображение в горизонтальном или вертикальном направлении, не позволяя ему искажаться, чтобы соответствовать рамке. В этом случае любая часть изображения, выходящая за рамки, будет вырезана.
Усеченное или переполненное изображение
Если вы сделали осознанный выбор, как указано выше, усечь образ, это здорово. Но вы можете получить неожиданные усеченные или переполненные изображения и по другим причинам.
Усеченное изображение
[19459 Переполнение изображения
Усеченные или переполненные изображения обычно возникают, когда существует проблема с общим макетом вашей страницы. Это может произойти, когда ваш блок изображения плавный, но другие разделы имеют фиксированное положение.
Давайте рассмотрим пример, чтобы проиллюстрировать это. Допустим, ваше изображение вверху страницы. После изображения вы хотите оставить зазор 20 пикселей, а затем отобразить текстовое содержимое.
Вы протестировали макет с изображением высотой 200 пикселей. Принимая это во внимание, вы применили фиксированную верхнюю позицию вашего текстового контента, чтобы она была в 220px.
Все это выглядело хорошо, пока в производстве, где изображения могут динамически изменяться. Если прямоугольник стилизован как жидкий, он будет пытаться получить динамическую высоту для отображения изображения без изменения его пропорций.
Но так как у нас есть фиксированная позиция для текстового содержимого на 220 пикселей сверху, изображение будет либо резко обрежьте его, либо он может перетекать в текст. То, что из этих двух произойдет, будет зависеть от того, как стили были определены.
Решение
Можно избежать резкого усечения или переполнения, если сохранить весь макет страницы быть жидким. Для адаптивных страниц мы должны расположить все элементы относительно прилегающего контента. И не относительно самой страницы.
В приведенном выше примере вместо того, чтобы размещать текстовое содержимое на 250 пикселей вниз от верхней части страницы, мы можем иметь плавную разметку, чтобы текст отображался под изображением независимо от где изображение заканчивается. Промежуток в 20 пикселей между ними также может гарантировать, что у нас есть необходимый предполагаемый разрыв между ними.
Пикселирование
]
Пикселизация возникает всякий раз, когда мы пытаемся отобразить уменьшенное изображение в большом окне просмотра. Допустим, ваше оригинальное изображение имеет ширину 50 пикселей. И вы хотите отобразить его на своей веб-странице шириной 400 пикселей.
Браузеру потребуется растянуть изображение шириной 50 пикселей до 400 пикселей, что приведет к пикселизации или зернистому изображению.
Решение
Решение пиксельного или зернистого изображения довольно простое. Мы просто должны убедиться, что ширина нашего исходного изображения составляет 400 пикселей или больше. Другими словами, мы всегда должны использовать изображение с более высоким разрешением, чтобы избежать пикселизации.
Производительность
Так почему бы не всегда использовать изображения с очень высоким разрешением? Потому что это повлияет на производительность вашей веб-страницы. Изображение с более высоким разрешением будет иметь большие размеры, и вашему браузеру потребуется больше времени для загрузки изображения из Интернета.
Поэтому не используйте размеры, превышающие предполагаемый дисплей, чтобы избежать снижения производительности.
Чтобы избежать проблем, связанных с пикселизацией и производительностью, всегда проверяйте, можете ли вы иметь исходное изображение в том же разрешении, что и на целевом дисплее. Не меньше. Или больше.
Оптимизация для нескольких разрешений
Может потребоваться изменить исходное изображение до другого предполагаемого разрешения. Кроме того, для адаптивных макетов для некоторых изображений у вас может быть несколько дисплеев с разным разрешением. Например, меньший размер для мобильного телефона. И большой размер для настольного компьютера.
Если вы сохраняете разрешение изображения для настольного компьютера, то это большая нагрузка для загрузки этого большого изображения на мобильный телефон. Вы обязательно увидите увеличение времени загрузки, так как скорость мобильной сети, как правило, меньше.
Решение
Существуют доступные решения, которыми вы можете воспользоваться. Например, вы можете использовать инструмент с открытым исходным кодом из облачного хранилища (https://www.responsivebreakpoints.com/) для создания изображений различных размеров. Инструмент генератора также создает HTML5-тег изображения, который вы можете скопировать и вставить в свой код. Атрибут srcset тега img настроен для вывода списка версий изображения и значений ширины в соответствии с интеллектуально выбранными точками останова.
Современные браузеры, обрабатывающие тег img, будут знать, как выбрать правильную версию изображения в соответствии с доступное пространство изображения в вашем адаптивном веб-макете. Более подробное описание облачного решения для получения изображений с различными разрешениями можно найти в этом сообщении в блоге здесь.
Загрузка...
