Как подогнать фото под разрешение экрана телефона

Обновлено: 04.07.2024

Как правильно подготавливать и добавлять в проект картинки под разные экраны (mdpi, hdpi, xhdpi, etc..) ?

Например, нарисовал я картинку для ImageButton. Мне ее нужно в фотошопе(к примеру) нарезать самому на расширения под разные экраны ?

Или же можно так:

сохранить картинку в максимальном разрешении, потом import the Image Asset in Android Studio , потом правый клик мышкой на res ⇒ New ⇒ Image Asset и тогда картинки сами порежутся и поместятся в нужные папки (drawable-mdpi etc..) ?

8,174 3 3 золотых знака 27 27 серебряных знаков 50 50 бронзовых знаков 2,425 1 1 золотой знак 15 15 серебряных знаков 32 32 бронзовых знака

Конечно вы можете использовать инструмент ImageAsset, который входит в Android Studio, он специально для этого существует и избавляет от нудной рутины, так как сам порежет на нужные для ресурсов разрешения (например иконка hdpi - 72x72 пикселя), размещает нужные картинки по нужным папкам ( -mdpi, -hdpi, -xhdpi и тд.) , добавляет недостающие папки и пр.

Кроме того, инструмент позволяет легко сделать поля, подложку и некоторые прочие функции, актуальные в такой работе, не метаясь между несколькими приложениями - легко, комфортно и очень быстро.

Так же содержит готовый пак стандартных иконок андроид (Clipart -> Choose ).

Однако инструмент имеет существенное ограничение - он не работает с произвольными размерами - только стандартные квадратные иконки (стандартных размеров в пикселях) для статусбара, самого приложения, панели уведомлений и тд., то есть прямоугольный фон для кастомной кнопки произвольных размеров в пикселях (например 40х120 пикселей) он не сделает под все разрешения экранов. Это очень плохо и тут уже приходится самому по старинке.

В общем, для случаев, когда инструмент справится с задачей (а его задача - подготовка различных иконок стандартных размеров), его не только можно, но и нужно использовать, так как он делает всю "черную" работу прямо в IDE, но применить его можно не для всех типов картинок, к сожалению.

Для подготовки 9-patch изображний из "обычного" в Android Studio так же существует встроенный инструмент, которым тоже вполне можно и нужно пользоваться:

правый клик на .jpg картинке ->Create 9-patch file.
в каталоге res/drawable/ (или res/mipimap/ если иконки там) создается копия .jpg картинки с расширением .9.jpg
двойной клик на файле image.9.jpg открывает редактор.

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

Приветствую всех на блоге. Обещался, что статья про youtube и его адаптацией будет последняя. В общем забыл я написать как адаптировать картинки под любые разрешения мобильных устройств. Дел, как всегда на пару минут, а пользы целый вагон, если не хотите, чтобы ваша мобильная версия выглядела убого, то читайте дальше.

Проблема.

А так они показываются на экранах мобильных устройств. Как видите, вроде бы картинка сужается по ширине, а вот по высоте никак, сохраняя свои размеры.

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

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

Решение.

А решение очень простое, прописываете такие директивы к стилям вывода картинок в постах и во всех местах блога.

Внимание, если в классе уже есть, прописанные стили типа width и height, то их стираем и ставим те которые я дал вам.

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

Давайте подобьем все операции. А их всего четыре.

Ну что, начинающие и уже бывалые блоггеры дал я вам пищу для размышления. А у вас картинки правильно настроены, либо же как всегда ?

APPDATE | 13 Декабря 2020 20:26

Есть много различных причин изменить размер фотографии. Вам может потребоваться другое соотношение сторон или вы можете просто вырезать ненужные части фотографии. В любом случае для этого есть несколько вариантов. Имеется два типа изменения размера, в первом случае — сжатие, то есть вы сохраняете изображение того же размера, но уменьшаете размер файла. Во втором — изменение размера кадра, например когда из снимка с соотношением сторон 4:3 делают квадрат 1:1 для публикации в Instagram. Каждое приложение из нашей подборки делает и то, и другое.

Размер Фото - Photo Resizer

Сжатие фото и изменение размера

Еще одно достойное приложение для сжатия и изменения размера, которое отлично справляется с обеими задачами. Вы можете изменить размер фотографий с точки зрения размеров, то есть сжать их, чтобы они занимали меньше места. Кроме того, приложение поддерживает пакетное сжатие, а также есть встроенный редактор для изображений, который позволяет внести незначительные правки.

Resize Me! Pro - Photo & Picture resizer

С помощью этого приложения вы также сможете сжимать и изменять размер изображение по мере своей необходимости. Имеется поддержка PNG и JPEG, работа с EXIF-данными и пакетное изменение. Приложение доступно бесплатно со встроенными покупками.

Photo Resizer

Пожалуй, самое простое приложение для изменения размера фотографий из нашей подборки. Photo Resizer отлично подходит для базовых задач. Выбираете фотографию, выбираете размер из предустановок или устанавливаете свой и получаете переделанное изображение. Вот и всё, что оно умеет. Мы ценим дополнительные инструменты, которые есть в большинстве приложений для изменения размера фотографий, но иногда приятно просто указать определенный размер и получить фото нужного размера.

Photo Resizer: обрезка, изменение размера, сжатие

Это приложение отлично справляется со своими задачами в большинстве случаев. Имеется поддержка PNG и JPEG, а также различных методов изменения размера фотографий. Например, вы можете использовать соотношение сторон, точное значение в пикселях или процентах. Кроме того, приложение поддерживает пакетное изменение, инструменты кадрирования, а также имеется встроенный редактор и возможность поделиться готовым снимком.

Большинство сегодняшних сайтов адаптивны. А если в нём нужно центрировать и выровнять изображение, необходимо научиться делать изображения плавными или адаптивными с помощью CSS.

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

Также вы узнаете некоторые общие проблемы, которые могут возникнуть при попытке сделать изображения адаптивными. Я постараюсь объяснить, как их решить.

Что мне следует использовать: относительные или абсолютные единицы?

Сделать изображение гибким или отзывчивым на самом деле довольно просто. Когда вы загружаете изображение на веб-сайт, оно имеет ширину и высоту по умолчанию. Вы можете изменить их с помощью CSS.

Чтобы изображение было отзывчивым, нужно присвоить новое значение его свойству width. Тогда высота изображения автоматически изменится.

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

Например, если вы определите фиксированную ширину 500 пикселей, ваше изображение не будет отзывчивым, потому что единица измерения абсолютная.

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

Один из вопросов, который мне задают чаще всего, — следует ли использовать медиа-запросы.

Медиа-запрос — еще одна важная функция CSS, которая помогает сделать веб-сайт адаптивным. Я не буду вдаваться в подробности, но вы можете прочитать другой мой пост позже, чтобы узнать, как использовать медиа-запросы более подробно.

Ответ на этот вопрос: «это зависит от обстоятельств». Если хотите, чтобы изображение имело разные размеры от одного устройства к другому, нужно будет использовать медиа-запросы. В противном случае вы этого не сделаете.

Теперь для этого примера ваше изображение имеет ширину 50% для любого экрана. Но если вы хотите сделать его полноразмерным для мобильных устройств, понадобится помощь медиа-запросов:

Таким образом, в соответствии с правилом медиа-запроса любое устройство размером менее 480 пикселей будет занимать всю ширину экрана.

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

Прежде чем перейти к примеру, необходимо понять, что именно делает свойство max-width.

Свойство max-width устанавливает максимальную ширину для элемента, которая не позволяет ширине этого элемента быть больше, чем его значение max-width (но может быть меньше).

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

Поэтому вы можете определить свойство max-width для изображения и установить его на 100%, что сжимает изображение с 500 до 360 пикселей. Таким образом, вы сможете увидеть полное изображение на экране меньшего размера.

Хорошо то, что, поскольку вы используете относительные единицы, изображение будет плавным на любом устройстве размером менее 500 пикселей.

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

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

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

Читайте также: