Oc-windows.ru

IT Новости из мира ПК
2 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Изменение размера изображения

Изменение размера изображения

В Affinity Photo есть параметры, позволяющие изменять пиксельные размеры документа или изображения и (или) разрешение при печати.

Можно изменить размер изображения посредством масштабирования или передискретизации . Эти действия можно выполнить независимо друг от друга или одновременно.

Масштабирование

При масштабировании определенное разрешение, используемое при печати, встраивается в метаданные изображения для принудительной печати с конкретным количеством точек на дюйм (например, 300 тчк/дюйм). Это не влияет на пиксельные размеры изображения.

Передискретизация

При передискретизации выполняется одно из перечисленных ниже действий.

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

При передискретизации изображения пользователь может выполнять указанные ниже действия.

  • Сохранять пропорции изображения или изменять его размеры без сохранения соотношения сторон.
  • Выбирать метод интерполяции (см. примечание ниже).
  • Одновременно масштабировать изображение.

Передискретизация может выполняться с указанной ниже целью.

  • Увеличить изображение до определенных размеров при подготовке к печати.
  • Уменьшить изображение для отображения на экране и оптимизировать размер файла.
  1. В меню Документ выберите пункт Изменить размер документа .
  2. Убедитесь, что параметр Передискретизация отключен.
  3. Измените параметр Разрешение , чтобы отрегулировать количество пикселей (точек) на дюйм, выводимых при печати документа. В профессиональной полиграфии следует устанавливать более высокие значения (например, 300 тчк/дюйм).
  4. Нажмите Изменить размер документа .

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

  1. В меню Документ выберите пункт Изменить размер документа .
  2. Убедитесь, что параметр Передискретизация включен.
  3. Введите новые размеры документа в полях Размер : левое поле — ширина, правое поле — высота.
    • Чтобы изменять ширину и высоту независимо друг от друга, нажмите значок фиксации между полями Размер (для отмены фиксации).
  4. (Необязательно) Выберите другую единицу измерения во всплывающем меню Единицы . Линейки изменятся в соответствии с новыми единицами измерения.
  5. Измените параметр Разрешение , чтобы отрегулировать количество пикселей (точек) на дюйм, выводимых при печати документа. В профессиональной полиграфии следует устанавливать более высокие значения (например, 300 тчк/дюйм).
  6. Выберите метод передискретизации во всплывающем меню.
  7. Нажмите Изменить размер документа .

Методы передискретизации

Пользователю доступны приведенные далее параметры передискретизации.

  • Ближайший сосед : простая передискретизация с самой быстрой обработкой. Используйте для абстрактных изображений и пиксельных композиций.
  • Билинейный : алгоритмическая передискретизация, применяемая при понижающей дискретизации изображений.
  • Бикубический : алгоритмическая передискретизация, применяемая при повышающей дискретизации изображений. Этот метод передискретизации обеспечивает большую плавность по сравнению с билинейным, но обработка осуществляется медленнее.
  • Фильтр Ланцоша 3 : сложная алгоритмическая передискретизация, обеспечивающая быстрые результаты, но имеющая наибольшее время обработки. Доступны «разделяемый» и «неразделяемый» варианты; последний дает немного лучшие результаты, но выполняется значительно медленнее по сравнению с «разделяемым».

Вместо добавления абсолютных значений ввода можно ввести выражения. Дополнительные сведения см. в теме Выражения для ввода в поле.

Как уменьшить размер фото до 2 МБ и менее без потерь в качестве

Для начала поговорим о том, как уменьшить размер фотографии. Ведь размер изображения напрямую влияет на его вес. Чем меньше ширина и высота в пикселях — тем меньше вес файла.

Узнать размер фотографии просто. Нажмите на файл правой кнопкой мыши и зайдите в «свойства» во вкладку «подробно». Там вы и увидите ширину и высоту. Огромные фотографии редко нужны, так что если вы видите значения типа 5000х3000, то можете смело уменьшать. Например до 1200х700. Это сократит вес файла раз в пять и сжатие фото уже не потребуется.

Сделать это можно в любой графической программе или в онлайн сервисе. Для примера в Фотошопе вам потребуется всего два клика: 1) меню Изображение 2) размер изображения. Выбираем ширину и высоту и нажимаем Ок. Готово.

Как уменьшить размер фото без Фотошопа? В программе Paint, или в онлайн сервисах, например на сайте photo-resizer.ru.

Инструкция в Paint

Paint есть на каждом компьютере, возможно его вам уже будет достаточно. Проделайте следующее:

  1. Нажмите на ваше фото правой кнопкой мыши, выберите «Открыть с помощью», «Paint».
  2. Ваше фото открылось в редакторе. Внизу вы видите исходные размеры снимка. Вверху есть кнопка «Изменить размер», жмем на нее.
  3. Появляется окно, где нужно выбрать новые параметры, в пикселях или процентах на ваш выбор. Вводите данные, жмете ОК. Не забудьте сохранить изменения.

Я провела эксперимент на качественном фото с камеры. Вместе с размером вес моего снимка уменьшился с 10 Мегабайт до 300 Килобайт!

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

Выводы об изменении размеров фото в Паинте

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

Если размер фотографии окажется слишком большим, можно изменить её размер. И, как мы увидели, это можно сделать например с помощью программы Paint. Для этого:

  1. Открываем файл с помощью Паинта;
  2. Изменяем размер картинки в %, или по горизонтали на 1024 (можно и меньше);
  3. Сохраняем изображение в формате JPEG.

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

Вы также можете сжать фото или картинку онлайн до нужных размеров.

Уменьшаем онлайн

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

Сайтов довольно много, я решила взять одну фотографию и прогнать по всем самым популярным сервисам чтобы выбрать лучший. Исходные данные: фотография, сделанная на зеркалку и обработанная в Лайтруме. Вес 10Мб, размер 5184х3456.

Compressor.io

Сразу скажу — это один из лучших вариантов. Compressor.io сделал из моих 10 мегабайт всего 1 мегабайт. Визуально абсолютно без потери качества. Весьма неплохо. Сайт поддерживает следующие форматы: compress jpg, png, gif, svg, webp. Минус — нет других опций, нельзя изменить ширину-высоту.

IMGonline.com.ua

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

  • Лучшее качество 10Мб превратились в 2,5Мб
  • Среднее качество — из 10Мб получилось 2Мб

Ну, разница невелика. Качество визуально хорошее. Сервис использовать можно, к тому же он мультифункционален.

Websiteplanet.com

Приятный сайт для сжатия фотографий, очень простой, на русском языке. Есть три режима сжатия: низкий, средний, высокий. Я попробовала средний вариант и websiteplanet сделал из 10 Мб фотографию в 1,3. Очень достойно, и качество хорошее, и бесплатно. Пожалуй, мой фаворит номер два по сжатию файла онлайн.

Читать еще:  Wave Editor — редактор звуковых файлов и как им пользоваться

Iloveimg.com

Можно кадрировать (обрезать), изменить размер и сжать фото. Сайт на английском языке, показал неплохие результаты и уменьшил вес онлайн на 86% — из 9.70 MB стало 1.37 MB. Все бесплатно и почти без потери качества, рекомендую.

Imagecompressor.com

Этот сайт показал более скромные результаты: из 10Мб — 1,6 Мб. Что ж, тоже недурно. В остальном Imagecompressor абсолютно идентичен Compressor.io. Английский язык не напрягает, все предельно понятно. Кстати, сжатие на английском — compress, так что если увидите это слово, значит это то, что нужно.

Jpeg optimizer

Jpeg optimizer выдал не очень хорошие показатели по сравнению с другими сервисами. Из 10Мб он сделал 2 Мб, к тому же после обработки выкатил фото на весь экран в каком-то гигантском масштабе. Так что порадоваться тут нечему. Разве что тому, что можно поменять разрешение фотографии одновременно со сжатием.

Tinypng

На этом сервисе мне вовсе не удалось уменьшить фото онлайн, так как он не поддерживает снимки более 5 мегабайт. Кроме того, бесплатно можно обработать не более 20 файлов. Но если у вас снимок меньше 5Мб, то вы вполне можете воспользоваться Tinypng для сжатия до нужного размера.

Вывод. Топ-3 сервиса: Websiteplanet.com, Compressor.io, Iloveimg.com.

RIOT (Radical Image Optimization Tool) — удобное приложение для оптимизации изображений. Программа работает с файлами форматов png, gif и jpg. Есть возможность настройки яркости, контрастности и гаммы. Поддерживается функция пакетной обработки фотографий.

Приложение имеет полную совместимость с операционной системой Windows XP и актуальнее (32 и 64 бит). Язык интерфейса — английский, русская версия не поддерживается. Загрузить и установить утилиту можно абсолютно бесплатно.

После запуска приложение RIOT необходимо открыть графическое изображение для редактирования. Для этого следует воспользоваться функцией «Open», которая расположена на панели инструментов.

Загруженное изображение отобразится в окне «Initial image». В окне «Optimized image» отображается итоговый результат оптимизации фотографии. Для настройки файла используется панель инструментов, которая расположена в нижней части интерфейса главного окна программы RIOT. В процессе редактирования фотографий формата PNG необходимо выполнить основные настройки:выбрать внешний инструмент для оптимизации, алгоритм для установки качества, цвет, тип сжатия (низкий, средний, высокий или максимальный).

Настройка программы RIOT

При работе с JPEG файлами выполняются другие настройки: установка качества в процентах, формат кодирования и и т.д.

Сжатие фотографий в RIOT

По завершению всех настроек можно посмотреть размер итогового файла в строке «Optimized image». Далее нужно сохранить полученный файл. Для этого используется функция «Save», которая расположена на верхней панели инструментов.

  • простой и удобный интерфейс;
  • бесплатная модель распространения;
  • возможность просмотра результатов сжатия в реальном времени.
  • поддержка только 3 форматов изображений: jpeg, png, gif.

Уменьшаем вес фото на компьютере

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

Программы, которые сжимают изображение и уменьшают вес фото в мегабайтах:

Adobe Photoshop

Все-таки самая основная графическая программа. Я уже рассказала как уменьшить снимок в 2 клика если нужно (Меню — Изображение — Размер):

Дальше необходимо сохранить файл со сжатием. Жмем «Файл», «Сохранить как». Выбираем формат и место сохранения, теперь самое главное. После нажатия кнопки «Сохранить» у вас появится небольшое окно с параметрами сохранения. Нужно выбрать качество (от 1 до 12). В зависимости от выбранного качества вы будете видеть как меняется вес файла — это очень удобно.

Paint

Это самый простой редактор, который есть у каждого. Он не сжимает фото, но поможет изменить размер, что сразу скажется на весе. Моя фотография 5184х3456 весом 6Мб после изменения до 1200х899 стала весить 320Кб! Так что, для каких-то простых целей можно ограничиться Paint.

А делается все очень просто. Нажимаете на ваш файл правой кнопкой мыши «Открыть с помощью», выбираете Paint. Внизу редактора вы видите исходные параметры фотки, вверху есть кнопка изменить р-р. Вводите нужные параметры и сохраняете.

Другие программы для уменьшения веса изображения

Аналогично это делается в любом другом графическом редакторе. Какие программы для уменьшения веса картинки можно скачать кроме Фотошопа и Пэйнта?

  • FastStone Image Viewer
  • XnView
  • Irfanview
  • ACDSee
  • Snagit
  • ФотоМАСТЕР

В этих программах вы можете обработать и сжать сразу несколько фото. Это называется пакетная обработка. Другие фоторедакторы для компьютера с описанием можно посмотреть здесь.

Еще один вариант для ленивых чтобы ничего не скачивать — MS Picture Manager. Он уже может быть установлен в составе вашего Microsoft Office.

Уменьшаем вес фото на телефоне

Довольно распространенная ситуация когда вовсе нет доступа к компьютеру или ноутбуку. Что делать? Воспользоваться мобильным приложением. Выбор довольно большой от простых прог до продвинутых фоторедакторов для Андроид и айфон.

Список приложений чтобы уменьшить фото до нужного размера на телефоне:

  • Photo & Picture Resizer
  • Photo Resizer
  • Сжатие foto Puma
  • Auto photo compress
  • Video and Image compressor
  • Lit photo

Подойдет все, где вы видите слово compress и resize. Выбирайте по отзывам.

Как сжать фотографии для сайта

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

У вас 2 варианта:

  1. Оптимизировать изображения еще до загрузки. То есть, проделать все действия, о которых мы писали выше и загружать на сайт уже легкие фото.
  2. Воспользоваться плагином оптимизации изображений.

Лучше всего использовать оба варианта. Потому что если фотографии очень громоздкие, то никакой плагин с ними не справится.

Список плагинов для сжатия изображений на сайте:

  • EWWW image optimizer
  • Short Pixel
  • TinyPNG
  • Optimus
  • WP Smush

Так же могут помочь плагины сжатия и кеширования — во многих из них есть функция сжатия без потери качества. Например, плагин PageSpeed Ninja очень неплох.

FILEMinimizer Pictures

FILEMinimizer Pictures — небольшая утилита, которая используется для работы с графическими изображениями. С помощью программы можно уменьшить размер фотографии без потери качества. Приложение позволяет работать как с одним файлом, так и с несколькими изображениями одновременно.

Утилита имеет полную совместимость с операционной системой Windows XP и свежее (32/64 бит). Язык интерфейса — английский, русская версия не поддерживается.Модель распространения FILEMinimizer Pictures — бесплатная.

После запуска программы необходимо добавить файл для оптимизации. Для этого нужно воспользоваться функцией «Open Files» на панели инструментов.

После того, как файл добавлен в приложении, нужно выбрать папку для сохранения исходного файла. Далее пользователям необходимо выбрать уровень сжатия в строке «Compression Settings». Здесь доступно три уровня сжатия:

  1. Web/E-mail. Позволяет сжимать фотографии для отправки по электронной почте или загрузке на сайты и форумы.
  2. Standard. По заверению разработчиков — самый оптимальный вариант для сжатия изображений без потери качества. Подходит для решения любых задач.
  3. Low/Print. Используется для сжатия фотографий, которые будут распечатаны на принтере.
Читать еще:  Как сделать загрузочную флешку Windows (Виндовс) 10

Также пользователи могут установить пользовательские настройки сжатия. Для этого необходимо установить галочку возле пункт «Custom Settings» и открыть раздел параметров. Здесь необходимо выбрать разрешение для фотографии и отметить галочкой пункт, который отвечает за сохранение оригинального качества. Далее следует установить сжатие в процентах.

По завершению установок всех параметров сжатия необходимо выбрать функцию «Optimize Files» на верхней панели инструментов.

  • простой и удобный интерфейс;
  • бесплатная модель распространения;
  • возможность выбора готовых шаблонов для сжатия фотографий.
  • нет официальной поддержки русского языка.

Выводы

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

  • Онлайн сервисы
  • Компьютерные программы
  • Мобильные приложения
  • Плагины WP

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

Уменьшить размер фото

Иногда нужно уменьшить размер фото. В данной статье я буду подразумевать под размером — разрешение. Просто многие люди путают эти понятия. Но в конце статьи напишу как можно уменьшить и размер так же.
Может быть для того, чтобы передать кому-то фотографию через интернет, а фото с фотоаппаратов и нынешних телефонов сейчас имеют такое разрешение, что получаются за счёт этого с большим объемом («весом»). Поэтому резонно задаться вопросом «А зачем передавать фото с разрешением этак 4000х3000 px, когда там всё равно этого не нужно?». Ведь с одной стороны большой размер фото означает его качество. Следовательно чем выше качество, тем более детальнее отображается вся картинка и мелкие детали, чтобы потом можно было увеличить и увидеть что там вдалеке на горе находится, к примеру. Но вот с другой стороны, если у Вас фото не требующее такого большого качества и его не нужно увеличивать или же интернет-соединение слабое или лимитированый тарифный план, да и вообще причин много может быть, то нет резона пользоваться таким фото.

В общем не буду Вас больше томить предисловием и поскорее перейду к практике.

Уменьшить размер фото можно несколькими способами: с помощью стандартных средств Windows, с помощью дополнительных программ и онлайн.

Как уменьшить размер (картинки, изображения) фото в Windows с помощью стандартных средств?

Под стандартными средствами я подразумеваю самый распространнёный графический редактор, который есть во всех версиях Windows — это знаменитый Paint.

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

Кликаем ПКМ по нужному нам изображению (фото) и выбираем из контекстного меню Открыть с помощью -> Paint

Уменьшить размер фото

Уменьшить размер фото

Уменьшить размер фото

В общем там не сложно. Можете так же выбрать Единицу измерения, чтобы было более удобнее (хотя кому как).
Далее всё это дело сохраняете как обычно и наслаждаетесь результатом.

Как уменьшить размер фото в Windows с помощью программ?

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

Я уже писал в той статье что остановил свой выбор на первой, поэтому покажу как изменить размер с помощью FastStone Image Viewer.

Открываем нужное фото и наводим курсор мыши на левый край. В нём содержится список редактирования изображений. В частности можно либо сразу быстро изменить размер:

Уменьшить размер фото

Уменьшить размер фото

Уменьшить размер фото

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

Как уменьшить размер фото онлайн?

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

Рассмотрим несколько популярных сайтов.

Самый нормальный и адекватный сервис для изменения размера фото. В нём нет ничего лишнего и всё очень просто. Выбираете изображение, указываете на сколько нужно уменьшить, либо вручную пишите размер (в пикселях), а затем жмете Загрузить

Уменьшить размер фото

Уменьшить размер фото

Единственный недостаток тут, который я заметил, это тот, что нельзя скопировать из предложенного поля адрес ссылки. Хотя она и находится в поле, но при нажатии на него происходит загрузка. Но с другой стороны нам это и не нужно особо. Ведь главное уменьшить и сохранить фото себе. А обойти этот недостаток можно нажав ПКМ на это поле, либо на поле «прямой ссылкой на файл» и выбрав в контекстном меню Копировать адрес ссылки.

2) Следующий сайт — Fotoresize . Такой же простенький и без лишних «наворотов».

Выбираем фото, указываем размер в пикселях, при желании заполняем поле с текстом и жмем Загрузить:

Уменьшить размер фото

Уменьшить размер фото

Единственное что я не понял, так это зачем нужно поле Качество. Уменьшать качество и так уменьшенного фото? Ну это уже издевательство. Тем более выше качество не сделать.
Ну а маленький недостаток в том, что текст для подписи невозможно настроить (изменить место, цвет, размер). Но с другой стороны оно нам и не нужно особо.

3) Следующий сайт — это сервис от Inettools .

Этот сервис так же поможет изменить размер картинки, притом не только уменьшить, но и увеличить (правда качество будет не лучшим, но оно и понятно).

Заходим, жмем кнопку «Выбрать» и выбираем фото на компьютере. Далее жмем кнопку Загрузить

Уменьшить размер фото

Уменьшить размер фото

Уменьшить размер фото

Так же на этом сайте можно Обрезать фото или Конвертировать , но это уже не для этой статьи.

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

4) Следующий сайт — Croper который с виду такой простенький, но по функциям похож на редактор изображений какой-то. Сейчас Вы в этом убедитесь.

Выбираем фото как обычно и Загружаем его:

Уменьшить размер фото

Уменьшить размер фото

Уменьшить размер фото

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

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

Уменьшить размер фото

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

Читать еще:  Прошивка HTC Desire 601

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

На этом всё. Теперь Вы точно сможете без труда изменить размер фото любым способом.

Для справки, чтобы больше путались:

Размер фото — это чаще всего ошибочное обозначение его разрешения. Оно (разрешение) измеряется в пикселях (точках на дюйм). Иногда и в милиметрах и сантиметрах для России. Его Вы можете видеть как «циферки» 320х240, 600х800, 1024х768, 100х100 и т.д. Принцип Вы поняли. Расшифровывается как «320 пикселей по ширине и 240 пикселей по высоте».

Реально же Размером фото считается его «вес». Это относится не только к фото, а ко всем файлам. Измеряется в байтах (б, b), килобайтах (Кб, kb), мегабайтах (Mb, Mb), гигабайтах (Гб, Gb), терабайтах (Тб, Tb) и т.п. Здесь могут быть абсолютно любые цифры. Более подробно о размерах файлов можете узнать в учебниках или в поиске по запросу «единицы измерения информации».

Итак, если хотите уменьшить размер фото, а разрешение нужно оставить, то самым правильным вариантом будет изменить формат изображения.

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

Рассмотрим для начала Paint.

Предположим, что работаете в ОС Windows 7. Тогда открываем файл как я писал выше (ПКМ -> Открыть с помощью -> Paint), либо открываем сам Paint и в верхнем меню выбираем Открыть (или попросту комбинация клавиш Ctrl+O).

Уменьшить размер фото

Уменьшить размер фото

В Windows XP нужно нажать на верхнее меню Файл -> Сохранить как.
Появится окошко с сохранением, в котором самое главное для нас — это поле Тип файла в котором и выбираем другой формат:

Уменьшить размер фото

Уменьшить размер фото

Уменьшить размер фото

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

Теперь рассмотрим изменение размера через просмотрщики изображений. Я не буду показывать все, а возьму, к примеру, лишь один просмотрщик (уже другой) — XnView (второй в обзоре).

Предположим что у Вас уже открыто изображение. Значит нам остается только нажать верхнее меню Файл -> Сохранить как и в окошке выбрать тип файла:

Уменьшить размер фото

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

Напоследок хочу дать совет по выбору типа (формата) изображений для уменьшения размера. Наиболее популярным является формат jpg ( jpeg ), поэтому если фото другого формата, то лучше в него сохранять. Вторым и третьим по уменьшению размеров лучше брать gif и png .

Размер картинки в html: как им управлять?

Размер картинки в html: как им управлять?

От автора: приветствую вас. Картинки — практически один из самых важных элементов на веб-страницах. Благодаря им нам значительно проще и интереснее воспринимать то, что мы видим на экране. Но если заводить речь об их встраивании в веб-страницы, то нужно знать как минимум то, как управлять размером картинки в html. Именно об этом мы сегодня поговорим.

Способы задать размер изображениям

Будем смотреть все на очень простом примере. Вот такой есть код:

Это блок с идентификатором, внутри которого лежит картинка. Предположим, что наш блок имеет фиксированные размеры. Для наглядности зададим еще и красную рамку, чтобы четко видеть его границы:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Итак, ширина блока — 200 пикселей, а высота — 160. И вот нам нужно, чтобы в него вписалось фото. Но величины ее, допустим, мы не знаем. Ну ладно, я могу вам сказать, что я сделал примерно 300 на 200 пикселей, в таком случае фото попросту не влезет в блок. Давайте посмотрим, что будет:

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

Предположим, что фото лежит на сервере и изменить непосредственно ее ширину и высоту нельзя. В таком случае один из вариантов — задать фиксированную ширину и высоту картинке с помощью атрибутов тега img: width и height.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Теперь изображение по высоте занимает не все доступное место, но зато ее пропорции не нарушены.

Собственно, такой способ задания размера (прямо в html через атрибуты) годится лишь в том случае, когда вы работаете с каким-то конкретным изображением на конкретной страницы. Если размеры необходимо определить группе картинок, намного правильнее использовать отдельной файл стилей, в котором прописывать все необходимые правила.

В css правила можно задать как отдельной картинке (выделив ее идентификатором), группе (прописав каждому изображению класс или с помощью других доступных селекторов) либо сразу всем, обратившись по селектору img.

Как сделать в css адаптивные картинки?

Для этого уже давно веб-разработчики и верстальщики используют такой достаточно простой код:

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

Если удалить атрибут width из html-кода, то результат будем аналогичным:

Но заметьте, что при изменении размеров блока-контейнера изображение растягивается уже на новые размеры, без нарушения пропорций. При этом, если вы попробуете уменьшить размеры блока, картинка не вылезет за него, а все так же послушно будет вписываться в него по ширине. Вот таким образом мы делаем “резиновые” и, по сути, адаптивные картинки.

Итак, сегодня я показал вам, как управлять размером картинок в html и css. Используйте эти знания и изображения на ваших сайтах будут смотреться ровно и красиво.

Ссылка на основную публикацию
Adblock
detector
×
×