Оптимизация главных/вступительных фотографий для мобильных устройств и дисплеев XXL.

Это изрядное количество вопросов. Тогда в обратном порядке:

• Нет автоматизированного инструмента, который заменит ваше суждение.

• Не следует увеличивать резкое (в фокусе, с мелкими деталями) изображение сверх его естественного разрешения. Если изображение имеет ширину 1024 пикселя, точка останова должна быть на уровне 1024 пикселя или раньше. Мягкие изображения (размытые, небо, туманные пейзажи) во многих случаях могут быть увеличены до 150% и более. Глаз легко замечает ухудшение изображения на высококонтрастных краях, а не иначе.

• Обязательно обрезать. Нет причин не делать этого, и вы можете легче оптимизировать размер файла.

Ваши пункты списка, не по порядку:

• Размер файла всегда имеет значение, но мягкие изображения сжимаются намного лучше, чем четкие. Вы заметите, что установленное фоновое изображение coverвсегда мягкое или имеет строго ограниченную область резкости (как в вашем примере). Однако это не единственная причина использовать мягкие изображения:

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

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

• Вам не нужен замещающий текст для фонового изображения. Это фон. По определению он не содержит важной информации о сайте. (Если это так, то это не должно быть фоном.)

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

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

Чтобы ответить на ваш свернутый вопрос, хотя часто это не требуется - или на самом деле потребуется больше времени на проектирование/разработку, - но в вашем примере может быть просто узкая обрезка изображения (также с версиями retina @2x) для мобильного макета. Прелесть медиа-запросов CSS в том, что вы можете включать определенные версии изображения в более широкий спектр устройств и разрешать обычно более медленным интернет-соединениям загружать только необходимые изображения.

Для всего этого нет жестких и быстрых правил, иначе дизайн был бы наукой, а не искусством (и ремеслом), но эмпирическое правило, которого я придерживаюсь, заключается в том, что если есть острые черты, никогда не превышайте их. 100%, а если изображение размытое или размытое, 120-150% может быть нормально , но ymmv.

Что касается инструментов, я делаю все это с помощью своего Chrome + Web Inspector + Window-Resizer (расширение Chrome) . Я видел, что Adobe работает над чем-то под названием Edge Reflow, но я не подписчик CC, поэтому я не пробовал.