Размер инструктируемых изображений: 13 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:53

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

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

Затем они предложили: «Другой вариант, который может сработать, - это загрузка изображений с более традиционным соотношением сторон. Все от 16: 9 до 4: 3 должно отображаться очень хорошо».

Обратите внимание, что они говорят, что это «может сработать». Вот что я обнаружил в своих попытках добиться приличного отображения моих изображений. (Обратите внимание, что я использую изображения из моей инструкции «Легко сделать кубик Рубика», отсюда и все эти изображения кубиков!)

Вышеупомянутое изображение имеет исходный размер (600x195), который не находится в этом диапазоне традиционных соотношений сторон. Как видите, Instructables показывает это изображение в слишком большом увеличении с обрезанными левой и правой сторонами. Давайте посмотрим, что мы можем сделать, чтобы это изображение отображалось правильно.

Шаг 1. Давайте попробуем соотношение сторон 16: 9

Итак, давайте попробуем соотношение сторон 16: 9 (ширина: высота). Я сохраню исходную ширину 600 пикселей, 16: 9 означает, что высота должна быть 338 пикселей, поэтому мы сделаем холст размером 600x338 и поместим в него изображение 600x195.

Итак, давайте посмотрим, как выглядит это изображение 600x338 (соотношение сторон 16: 9). Так что интересно, когда я вставил это изображение и предварительно просмотрел его, оно идеально подошло - левый и правый края не были обрезаны! Я сделал снимок экрана для доказательства, смотрите на следующем слайде.

Но когда я просматриваю это в своем браузере (Chrome), я вижу на изображении выше, что правая и левая стороны снова отрублены! Итак, из этого эксперимента выяснилось, что изменение размера до соотношения сторон 16: 9 не решит наших проблем!

Кстати, 16: 9 - это «новое» стандартное соотношение сторон, известное как «широкоэкранный», тогда как 4: 3 - это «полноэкранный» старой школы, который был распространен еще во времена лампового телевидения. Да, вы, миллениалы, наверное, не понимаете, о чем я говорю.

Шаг 2:16: 9 Недавно загруженное изображение, просмотренное при предварительном просмотре

Это изображение представляет собой снимок экрана, показывающий, что наше изображение 16: 9 в предварительном просмотре выглядит идеально. Успех не так ли? Что ж, не так быстро - посмотрите, что происходит, когда мы действительно просматриваем эту страницу в нашем браузере (Chrome)! Левый и правый края снова обрезаются! Просто вернитесь к предыдущему слайду и убедитесь в этом сами.

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

Кроме того, да, под моим изображением много белого пространства. Это потому, что я поместил изображение 600x195 на холст 600x338 и поместил его вверху, так что внизу осталось пустое белое пространство. Что мы можем с этим поделать? Что ж … мы постараемся рассмотреть это на следующем слайде.

Итак, давайте продолжим смотреть, как мы можем сделать это изображение отображаемым полностью.

Шаг 3: 16: 9 отображается с обрезанными левыми и правыми сторонами

Для протокола: если по какой-либо причине ваш браузер идеально отображает эти изображения 16: 9, я говорю именно об этом. Вот скриншот того, как я вижу свое изображение 16: 9 на шаге 1, отображаемое после «усадки» после первоначального предварительного просмотра - обратите внимание, что левая и правая обрезаны.

Если вы видите, что мое изображение из Шага 1 отображается идеально, что ж, отлично. Дайте мне знать! Но вот как я это вижу. Да, это намного лучше, чем исходное изображение с титульного листа, но оно все равно обрезано. Так что для меня, несмотря на совет сотрудников Instructables, соотношение сторон 16: 9 не совсем подходит. Перейдем к соотношению сторон 4: 3.

Шаг 4. Давайте попробуем соотношение сторон 4: 3

Итак, давайте попробуем соотношение сторон 4: 3. Я сохраню исходную ширину 600 пикселей, 4: 3 означает, что высота должна быть 450 пикселей, поэтому мы сделаем холст размером 600x450 и поместим в него изображение 600x195.

Как выглядит это изображение 600x450 (соотношение сторон 4: 3)?

Опять же, когда я впервые вставляю его, изображение выглядит великолепно (за исключением пустого пространства внизу). Левый и Правый отображаются нормально. Глядя на это в браузере, кажется, что правая и левая сторона продолжают отображаться нормально.

Как отмечалось ранее, все это пустое белое пространство под изображением вызвано тем, что я перетащил свое изображение 600x195 на холст 600x450 и просто поместил его вверху.

Извлеченный урок - кажется, требуется соотношение сторон 4: 3, чтобы правая и левая стороны не были обрезаны. К сожалению, это означает, что для коротких и широких изображений будет много свободного места, потому что вам придется перетащить эти изображения на холст размером 4: 3. Да, вы можете центрировать свое изображение так, чтобы было одинаковое белое пространство сверху и снизу, но в любом случае будет много белого пространства выше или ниже вашего изображения, но, насколько мне известно, это компромисс, который вы нужно сделать в Instructables, чтобы ваши изображения отображались в целости и сохранности.

Шаг 5: 4: 3 с центрированием изображения

Вот то же изображение 600x195, помещенное на холст 600x450, но отцентрованное так, чтобы сверху и снизу оставалось равное пустое пространство. Выглядит немного лучше, текст не так далек от изображения.

Шаг 6: 4: 3 с изображением внизу

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

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

Шаг 7: Какая минимальная ширина?

Теперь посмотрим, какой должна быть минимальная ширина. Показанное изображение имеет размер 382x206, близкое к 2: 1, оно кажется действительно огромным, не так ли? Очевидно, Instructables увеличил изображение, чтобы оно соответствовало некоторой установленной ширине, вероятно, 640 пикселей, я не уверен.

Но он подходит, потому что он более «квадратный», то есть не слишком широкий для своей высоты. Ой, подождите, меня снова обманули превью! На самом деле это не подходит - стороны R&L снова усечены.

На самом деле, это странно, испортился не только предварительный просмотр. Я действительно посмотрел на это в браузере, и сначала он отрисовался правильно (то есть края R&L не были обрезаны). Но если снова взглянуть на это через браузер, то теперь изображение отображается с измененным размером с обрезанными краями R&L. Странный.

Итак, попробуем уменьшить изображение. Мы уменьшим изображение до 200x108, сохраняя то же соотношение сторон 2: 1.

Шаг 8: уменьшение изображения при сохранении соотношения сторон

Поэтому я изменяю размер изображения до 200x108, сохраняя то же соотношение сторон 2: 1.

Теперь снова кажется, что сначала он подходит (с сильно ухудшенным разрешением (качеством изображения)!), Но, конечно, вы, вероятно, смотрите на него, и он совсем не подходит и выглядит точно так же, как исходное изображение, за исключением того, что оригинал имеет лучшее разрешение. Опять же, Instructables расширяет изображение, чтобы оно соответствовало определенной ширине, поэтому это меньшее (200x108) изображение выглядит так ужасно, намного хуже, чем исходное 382x206.

Я говорю «возможно», потому что я действительно понятия не имею, как Instructables отображает эти изображения в вашем браузере. По какой-то причине, если я обновляю свой кеш и просматриваю этот Instructable, размеры моих изображений, похоже, не остаются постоянными, поэтому я действительно не знаю, что делает Instructables, за исключением того, что это может быть непоследовательным. Таким образом, цель этого руководства - выяснить, как изменить размер изображений, чтобы они отображались хотя бы в некоторой степени согласованно!

Шаг 9: Убедитесь, что изображения сначала отображаются правильно

Вот что я увидел вначале сразу после загрузки изображения - подходит! (Обратите внимание, что мне пришлось уместить приведенный выше снимок экрана в изображение 1600x1200 (то есть с соотношением сторон 4: 3), чтобы Instructables отображал весь снимок экрана!)

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

Шаг 10. Пример 382 x 287 (соотношение 4: 3)

Я сохранил ширину 382 и поместил исходное изображение 382x206 на холст 382x287, чтобы сделать его с соотношением сторон 4: 3, потому что ранее мы обнаружили, что Instructable требуется изображение, соответствующее этому соотношению 4: 3, чтобы отображать его целиком.

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

Шаг 11. Расширение изображения с 300 x 206 до 600 x 206, чтобы увидеть, лучше ли оно отображается

Я поместил исходное изображение 382x206 (2: 1) на холст 600x206 (3: 1), чтобы посмотреть, не заставит ли его расширение до 600 пикселей отображать все изображение целиком. Опять же, сначала это было так, но, как вы можете видеть, сейчас этого не происходит.

Это действительно странная вещь - каждый раз, когда вы впервые вставляете изображение, кажется, что Instructables будет правильно отображать это изображение, независимо от размера или соотношения сторон этого изображения. На этот раз я даже вышел из Instructables и закрыл эту вкладку, а затем повторно посетил этот Instructable, так сказать, «свежий», чтобы проверить, правильно ли отображается изображение. Обычно этого достаточно, чтобы позволить Instructable сделать свое дело и начать изменять размер изображений, которые не имеют соотношение сторон 4: 3, и отображать их с обрезанными левой и правой сторонами.

К моему удивлению, первые пару раз, когда я пересматривал эту «свежую» инструкцию, это изображение оставалось отображаться полностью, но, увы, после того, как я ушел, чтобы сделать что-то еще и пришел, может быть, через час или около того, это изображение начало отображаться увеличено с усечением L&R сторон, как вы видите выше.

Почему и как это происходит? Понятия не имею. Я понятия не имею, почему ожидание некоторого периода времени после загрузки изображения может заставить Instructables отображать его по-другому, но это так. В качестве доказательства я покажу свой снимок экрана, на котором изображение выше отображается идеально в первые 10-15 минут после того, как я загрузил его на следующем слайде.

Шаг 12: Подтверждение того, что изображения отображаются правильно изначально после загрузки

Вот снимок экрана, показывающий, что изображение 600x206 отображается полностью сразу после загрузки. Это снимок экрана с предыдущего слайда. Вернитесь к предыдущему слайду, и вы увидите, насколько сейчас изображение приподнято!

Обратите внимание, что размер моего снимка экрана на самом деле был 1563x766, но, как я узнал из своих экспериментов в начале этого руководства, я знал, так как он не подходит для этого соотношения сторон 4: 3 (1563x766 примерно 4: 2), поэтому, если бы я только что загрузил этот снимок экрана в исходном размере. Instructable обрежет края. Я поместил это изображение на холст формата 4: 3, поэтому под моим снимком экрана много пустого белого пространства.

Обратите внимание, что снимок экрана был также сделан до того, как я изменил заголовок шага 11 и закончил вводить весь этот текст на случай, если вам это интересно!

Извлеченный урок - просмотр загруженного изображения в браузере сразу после загрузки не обязательно покажет, как оно будет отображаться в будущем. По какой-то причине изображение почти любого размера и / или соотношения сторон, кажется, хорошо отображается сразу после загрузки и даже в течение примерно 10-15 минут после загрузки и даже после выхода из Instructables и просмотра его в новом сеансе браузера и т. Д..

Но подождите час или больше, и все изменится! Ваше изображение, если оно не соответствует соотношению сторон 4: 3, будет скорректировано (обычно увеличено) с помощью Instructable, чтобы края были обрезаны.

Шаг 13: Итог - что я узнал

Итак, итоги - что я узнал?

1. Чтобы изображение отображалось целиком, обязательно соблюдение соотношения сторон 4: 3 (ширина: высота)!

2. Используйте исходные изображения большого размера с максимально возможным разрешением и поместите их на холст с соотношением сторон 4: 3. Если он слишком большой, Instructables уменьшит его, и вы получите хорошие четкие изображения.

3. Если ваше изображение слишком маленькое (намного меньше 600 пикселей в ширину), Instructable расширит ваше изображение и сделает его шириной не менее 600 пикселей, что сделает его менее резким. Я говорю «иш», потому что я точно не знаю, какую ширину использует Instructable, но кажется, что она близка к 600. Это, вероятно, 640, что было обычной шириной во времена старых школьных ламповых мониторов.

600x450 и 640x480 - это соотношение сторон 4: 3. Все "полноэкранные" ламповые мониторы старой школы имели разрешение 640x480 (ширина x высота).

4. Что делать, если исходное изображение не имеет ширины не менее 600 пикселей? Все, что вы можете сделать, это поместить его на холст с соотношением сторон 4: 3, который отображает ваше изображение, близкое к его исходному размеру. Если исходное изображение маленькое, там будет много пустого белого пространства, поэтому попробуйте центрировать изображение или поместить белое пространство выше или ниже изображения, чтобы оно выглядело как можно лучше.

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

В качестве примера приведенное выше изображение представляет собой холст размером 600x450 с помещенным в него изображением 382x206, центрированным таким образом, чтобы у нас было одинаковое пустое пространство сверху и снизу. Изображение отображается примерно в исходном размере, я думаю, что Instructables может расширить его до 640x480 (незначительное расширение), так что это лучшее, что мы можем сделать с этим исходным изображением.

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

Каждый раз, когда вы впервые вставляете изображение, кажется, что Instructables будет правильно отображать это изображение, независимо от размера или соотношения сторон этого изображения. Он может даже отображаться правильно в течение некоторого времени после этого, но НЕ ОБУЧАЙТЕСЬ, потому что в конечном итоге он изменит их размер и доставит вам проблемы, если вы не будете следовать этому правилу 4: 3!

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