Вы не знаете, как увеличить размер картинки? Это очень простая задача, так как все, что вам нужно, уже установлено на вашем компьютере. Прочитайте это руководство, и вы узнаете, как изменять размер фотографии с помощью 5 простых инструментов.
Способ 1. Как изменить размер изображения в Microsoft Paint
- Найдите и запустите MS Paint . Он предустановлен на всех версиях операционной системы Windows. Пуск> Все программы> Стандартные> Paint :
- Перетяните изображение в окно Paint или используйте Меню> Открыть (Ctrl + O) .
- В главном меню программы найдите пункт «Изменить размер » и выберите его:
- Откроется панель изменения размеров и пропорций изображения. Значение вы можете указать в пикселях. Не забудьте установить флажок «Сохранять пропорции ». Иначе изображение будет деформировано:
- Чтобы увеличить размер картинки, нажмите кнопку «ОК » и сохраните фотографию.
Советы:
- Если не получается задать нужные размеры фотографии, не растягивая ее, вы можете использовать инструмент «Обрезка », чтобы удалить ненужные края. Как это сделать, описано в пункте 3 ;
- Чтобы быстрее открыть фотографию, кликните по ней правой кнопкой мыши и выберите из контекстного меню пункт «Открыть с помощью Paint »;
- Лучше всего сохранять изображение в том же формате, что и оригинал.
Способ 2. Как изменить размер изображения в MS Photo Gallery
- Если Microsoft Photo Gallery не установлена на вашем компьютере (Пуск> Фотогалерея ), вам необходимо скачать и установить его как часть Windows Essentials 2012 ;
- Запустите MS Photo Gallery и найдите свой графический файл;
- Кликните по нему правой кнопкой мыши и выберите пункт «Изменить размер …»:
- Выберите готовый пресет: «Малый 640 пикселей », «Средний 1024 », «Большой 1280 » и т.д.
- Нажмите «Изменить размер и сохранить ». После того, как увеличите размер картинки, изображение будет размещено в той же папке, в ней также останется оригинал.
Советы:
- Если нужно задать точный размер изображения, в выпадающем меню выберите пункт «Пользовательский » и установите размер для большей стороны фотографии;
- Чтобы изменить размер нескольких фотографий одновременно, выберите их, удерживая нажатой клавишу Ctrl .
Способ 3. Как изменить размер изображения в Photoscape
Можно увеличить размер картинки в Фотошопе. Или использовать для этого Photoscape .
- Загрузите Photoscape и установите его. Запустите программу;
- Перейдите на вкладку «Редактор » и найдите фотографию, которую хотите изменить:
- В нижней части изображения находится кнопка «Изменить размер », нажмите на нее.
- Задайте новый размер фотографий. Убедитесь, что опция «Сохранять соотношение сторон » включена и нажмите кнопку «OK »:
- Сохраните отредактированное изображение.
Советы:
- Если необходимо изменить размер нескольких изображений, используйте вкладку «Пакетный редактор ». Добавьте папку и измените размер всех фотографий в ней;
- Если вы не знаете точный размер, можно задать «Процент » от исходного размера.
Способ 4. Как изменить размер изображения в IrfanView
- Установите IrfanView — отличный инструмент для просмотра и увеличения размера картинки;
- Добавьте фотографию, перетянув ее в окно программы, или нажав первую кнопку в панели инструментов:
- Перейдите на вкладку «Изображение », выберите «Изменить размер /пропорции » (Ctrl + R );
- Установите новый размер в пикселях, сантиметрах, дюймах, или в процентах от исходного изображения:
- Сохраните изображение.
Советы:
- Вы можете использовать стандартные размеры: 640 на 480 пикселей, 800 на 600 пикселей, 1024 на 768 пикселей и т.д.;
- Чтобы сохранить высокое качество фотографий, убедитесь, что для параметра DPI задано значение не менее 300.
Способ 5. Как изменить размер изображения онлайн
- Чтобы увеличить размер картинки онлайн, перейдите на сайт PicResize .
- Нажмите кнопку «Browse », чтобы выбрать фотографию. Нажмите «Continue »:
- Выберите процент от исходного изображения, например на 50% меньше. Инструмент отобразит размер изображения на выходе. В качестве альтернативы можно ввести точный размер, выбрав в выпадающем меню пункт «Custom Size »:
Изображения - составляющие практически любого сайта, поэтому без изменения размера не обойтись. Изменять размер картинки можно 2 способами: в графическом редакторе или программно в коде html на css .
Если в коде css на html не задать размер изображения, то его высота и ширина на сайте будут такими же в пикселях, как у исходного файла. То есть вы можете изменить размер изображения без css и html, используя, только графический редактор и оно автоматически будет меняться на сайте, если не указывать его размер. Но есть случаи, когда необходимо программно изменять размер картинки в css на html.
1. Изменение картинки в графическом редакторе
Изменять размер изображения вы можете в любом графическом редакторе(photoshop, gimp, xnview) и оно автоматически будет меняться на сайте в соответствии с оригинальными размерами.
Плюсы метода:
Картинка грузится быстрее поскольку не нужно скачивать лишние данные(пиксели), которые будут потом сжаты программно.
Минусы:
Графические редакторы некачественно сжимают картинки менее 200 пикселей по ширине и высоте.
Всегда, когда это возможно и целесообразно старайтесь изменять размер именно в графическом редакторе, чтобы картинки быстрее загружались, чем при программном изменении. Разница в скорости может составлять десятки раз.
2. Изменение картинки в коде css на сайте
Плюсы:
Быстрее и удобнее задать размер. Данный способ уменьшения изображения обычно применяется для удобства. Например, когда у одной картинки может быть много различных размеров - часто удобнее менять значения у одной и той же программно, чем закачивать все варианты форматов одного изображения, отредактированные в графическом редакторе.
Качественно сжимаются небольшие картинки, менее 200 пикселей по высоте или ширине в отличие от графических редакторов. Если вы хотите, чтобы на сайте размер изображения был меньше 200 пикселей, то лучше, чтобы исходный размер был больше на 30-50%(260-300 пикселей), чтобы сохранить хорошее качество при уменьшении.
При этом разница в скорости загрузки сайта чувствоваться не будет т. к. небольшие изображения занимают очень мало места и при увеличении их размера на 30% вы не заметите изменений. Но разницу в качестве заметите.
Минусы:
Картинки, сжатые программно, дольше загружаются т. к. изменение размера происходит только после скачивания оригинальной версии. Поэтому если размер картинки больше 200 пикселей по ширине или высоте, то лучше сжимать в графическом редакторе, чтобы сайт работал быстрее.
Как изменить размер картинки в html с помощью css
Чтобы изменить размера изображения в html средствами css используются свойства width(ширина) и height(высота) внутри атрибута style. Вы можете написать только width или height , и оставшееся неуказанное значение автоматически изменится с сохранением пропорций картинки. Например, указав только ширину изображения с помощью width, его высота(height) изменится автоматически, сохранив пропорции. И наоборот, при указании только высоты(height), его ширина также автоматически поменяется, сохранив пропорции картинки.
Пример кода без указания размеров изображения
Результат в браузере
Код страницы
Пример кода с изменением размеров изображения в.css
Результат в браузере
Код страницы
style="width:150px; " >
В обоих примерах, показанных выше использована одна и та же картинка с размером 300x184px(ширина и высота). В 1 примере картинка отобразилась в браузере без изменений с оригинальным размером 300x184px т. к. в css не указывались ширина и высота. А во 2 примере картинка отобразилась в браузере уменьшенная в 2 раза т. к. была указана ширина 150px, высота соответственно автоматически изменилась до 92 px. Как вы видите, свойство height, можно не указывать вообще т. к. оно автоматически изменяется пропорционально width.
Если вы укажете оба параметра: width(ширина), height(высота) и они не будут соответствовать пропорциям, то картинка будет иметь именно такой размер, но в сжатом или растянутом виде, в зависимости от значений.
Почему нежелательно увеличивать картинки
Важно: Увеличение размеров картинки сопровождается потерей качества. При изменении любым способом важно ставить значения меньше, чем в оригинальном изображении, т. е. только уменьшать.
Если задать размер в пикселях больше, чем у исходного изображения, то качество ухудшится. И потеря качества будет отчетливо видна, потому что компьютер не может добавить новые пиксели, он может только увеличить размер существующих. Чем больше увеличение картинки от исходного значения, тем хуже ее качество и отчетливее видны квадратные пиксели.
Этот урок является своеобразным продолжением предыдущего, в котором мы рассматривали , теперь пора углубить ваши познания и посмотреть CSS свойства изображения.
Размеры изображения в CSS
Давайте разберемся, что здесь нового, я создал класс img в котором прописал размеры изображения, width это ширина, а height у нас высота, размеры я указал больше оригинальных, чтобы вы наглядно могли видеть, как изменится изображение.
Для наглядности приведу пример где будет много текста, и вы увидите какие отступы от изображения бывают в данном примере мы будем использовать свойство margin которое даст вам возможность оценить его возможности.
Для наглядности приведу пример где будет много текста, и вы увидите какие отступы от изображения бывают в данном примере мы будем использовать изображение без задания отступов чтобы вы наглядно могли увидеть разницу.
В браузере мы видим следующее:
Отступы от изображения в данном примере я сделал благодаря параметру margin который задал нам отступы от всех четырех краев по 20 пикселей. Здесь можно сделать более хитрую манипуляцию, можно задавать отступ от конкретного края, например:
- margin-top – отступ от верхней стороны
- margin-right – отступ от правой стороны
- margin-bottom – отступ от нижней стороны
- margin-left – отступ от левой стороны
Соответственно здесь вы можете настроить все более тонко, или же задать отступ всего от одной или двух сторон не трогая другие.
В браузере:
Задаем рамку вокруг изображения, благодаря параметру border для начала зададим ширину рамки с помощью border-width задаем её в пикселях, далее стиль рамки, то есть её вид border-style здесь есть несколько значений выбирать вам:
И последний параметр, который мы будем регулировать это цвет рамки, который задается параметром border-color.
В браузере видим:
Как вы поняли мы присвоили фон тегу body благодаря селектору тегов, так как он у нас занимает весь документ, так же мы можем присвоить и другим тегам. Параметр background сделал нам фон рисунком адрес к которому мы прописываем в скобочках. Так же можно и манипулировать с фоном например:
background: url(proba.png) repeat-x;
Фон будет повторяться только по оси X то есть горизонтально в одну линию.
background: url(proba.png) repeat-y;
Фон будет повторяться только по оси Y то есть вертикально в одну линию.
background: url(proba.png) no-repeat;
Фон не будет повторяться, а появится лишь одно изображение.
background-size: 500px 200px;
Это дополнительный параметр, который задает размер изображения для фона, ширина и высота.
Прозрачность изображения с помощью CSS
В браузере видим следующее:
Это свойство пришло с появлением CSS3 и собственно получило достаточно обширное применение. Реализуется с помощью параметра opacity задает прозрачность изображения, значения от 0 до 1, а второй параметр filter: alpha(Opacity=50); делает тоже самое только для браузера Internet Explorier так как старые версии не поддерживают параметр opacity, значения от 0 до 100. В примере я специально сделал два изображения, чтобы наглядно было видно разницу.
На этом урок «CSS свойства изображения» заканчивается, я надеюсь этот урок был вам полезен и вдохновил на дальнейшее изучения языка и получение новых знаний.
Дата публикации:2014-04-22