Размер фотографии будет изменён с учётом указанного размера в сантиметрах (миллиметрах, дюймах), а также с учётом указанного размера в DPI, согласно стандартам бумажной печати. Размеры в см, мм и дюймах можно указывать с точностью до тысячных, например, вместо формата 15x10 можно выставить 15,201x10,203 см.

Таблица со стандартными размерами фотографий при вертикальном (портретном) положении:

Формат фото в сантиметрах (cm)	Размер в миллиметрах (mm)	Размер в пикселях (для печати 300 dpi )	Соотношение сторон (при альбомной ориентации)
3х4 (после ручной обрезки)	30x40	354x472	4:3 (1.33)
3,5х4,5 (после ручной обрезки)	35x45	413x531	4:3 (1.33)
9x13	89х127	1063x1535	10:7 (1.43)
10x15	102х152	1181x1772	3:2 (1.5)
13x18	127х178	1535x2126	7:5 (1.4)
15x20 (≈A5)	152х203	1772x2362	4:3 (1.33)
15x21	152х216	1772x2480	4:3 (1.33)
18x24	178x240	2126x2835	19:14 (1.36)
20x25	203x254	2362x2953	5:4 (1.25)
20x30 (≈A4)	203х305	2362x3543	3:2 (1.5)
30x40	305x406	3543x4724	4:3 (1.33)
30x45	305x457	3543x5315	3:2 (1.5)

Стандартный размер бумажного листа формата A4 - 21x29,7 см или 2480x3508 пикселей при 300 dpi. Размеры других форматов листов можно увидеть на странице в Википедии , но только не забывайте, что там перечислены размеры в миллиметрах и дюймах, т.е. в настройках на этой странице нужно выбрать соответствующую величину.

Если нужно изменить размер фотографии без учёта DPI (точек на дюйм), то есть только соблюдая пропорции указанного формата, то для этого нужно установить параметр "Размер в DPI" на "0" в настройках.

Исходное изображение никак не изменяется. Вам будет предоставлена другая обработанная картинка.

1) Укажите изображение в формате BMP, GIF, JPEG, PNG, TIFF:

2) Введите нужный формат фото в сантиметрах, миллиметрах или в дюймах
Нужный формат: X в миллиметрах (mm) сантиметрах (cm) дюймах (inches)
(По умолчанию указан формат 15x10 , который подходит для альбомной (горизонтальной) фотографии, для портретной (вертикальной) фотографии эти значения нужно поменять местами, то есть указать 10x15 , как и указано в таблице) Размер в DPI: (0 = "не учитывать DPI, сделать по пропорции на основе указанного формата")
(Размер исходной jpg-картинки в DPI можно , считав метаданные) Тип изменения размера точно до указанных размеров:
C соблюдением пропорций и обрезкой лишних краев
Резиновое растягивание или сужение, без обрезки
Без обрезки, с добавлением красного розового фиолетового синего бирюзового небесного салатового зелёного жёлтого оранжевого чёрного серого белого фона по краям Привязаться к: верхней левой центральной правой нижней части изображения

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

При создании веб-сайтов чаще всего используют графические форматы PNG , GIF и JPEG , а для дизайнерских работ с изображениями - графический редактор Adobe Photoshop , обладающий богатыми возможностями для сжатия и изменения размера изображений без потери качества, что является невероятно важным для веб-разработки.

Как вставить изображение в HTML?

Для того чтобы вставить изображение на HTML-страницу, используется одиночный простой тег:

,

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

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

Он показывается на месте картинки в момент его недоступности, загрузки или в режиме работы браузера «без картинок ». Добавляется он с помощью атрибута alt тега .

Пример добавления альтернативного текста к графическому файлу:

Назначение размеров картинки в HTML

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

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

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

Если атрибуты height и width не используются, браузер загружает изображение сразу, задерживая отображение текста и прочих элементов страницы.

Данные параметры можно указать как в пикселях (размер картинки постоянен и не зависит от разрешения экрана пользователя), так и в процентах (размер картинки зависит от разрешения экрана).

Например:

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

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

Расположение картинки в HTML

Как и ко многим тегам HTML, к применим атрибут align , который выполняет выравнивание изображения:

- картинка располагается выше текста;

- картинка располагается ниже текста;

- картинка располагается слева от текста;

- картинка располагается справа от текста.

Картинка-ссылка

Делается это следующим образом:

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

Как можно сделать картинку фоном в HTML?

Изображение можно не только вставлять на страницу в качестве видимого объекта, но и сделать фоновым. Для определения картинки как фона необходимо в теге прописать атрибут background=”xxx” , где xxx - адрес картинки, указанный таким же способом, как в примерах выше.

Для примера зададим такую текстурную картинку в роли фоновой:

Сохраните изображение в папке с заготовленной заранее страницей и пропишите следующие строки:

Фон с текстом.

Фоновая картинка на странице задана.

Для изменения размеров рисунка средствами HTML у тега предусмотрены атрибуты width (ширина) и height (высота). В качестве значения используются пикселы, при этом аргументы должны совпадать с физическими размерами картинки. Например, на рис. 10.6 показано изображение, которое имеет размеры 100х111 пикселов.

Рис. 10.6. Картинка исходного размера

Соответственно, HTML-код для размещения данного рисунка, приведен в примере 10.4.

Пример 10.4. Размеры рисунка

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

Рис. 10.7. Размеры картинки не указаны и она еще не загрузилась

Рис. 10.8. Картинка загружена, текст переформатирован

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

На рис. 10.9 приведено то же изображение, что показано на рис. 10.6, но с увеличенной в два раза шириной и высотой.

Рис. 10.9. Вид картинки, увеличенной в браузере

Код для такого рисунка останется практически неизменным и показан в примере 10.5.

Пример 10.5. Изменение размера рисунка

Такое изменение размеров называется ресемплированием, при этом алгоритм браузера по своим возможностям уступает графическим редакторам. Поэтому увеличивать таким способом изображения нужно только в особых случаях, а то слишком ухудшается качество картинки. Лучше воспользоваться какой-нибудь графической программой. Исключением являются рисунки, содержащие прямоугольные области. На рис. 10.10 приведен файл узора, который занимает 54 байта и имеет исходный размер 8 на 8 пикселов, увеличенных до 150 пикселов.

Рис. 10.10. Увеличенное изображение

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

Инструкция

Вначале попробуйте найти картинку с помощью поисковых систем. Введите запрос, а затем выберите вкладку с настройками поиска. У Google, например, это кнопка «Инструменты поиска», а у Яндекса иконка с изображением ползунков. После нужно выбрать пункт «Размер» и указать точные значения. Или, например, если нужна фотография с хорошим разрешением, выделить «Большие».

Если картинки с нужным размером нет, то ее можно подогнать под рамки самостоятельно. Тут есть пути. Первый заключается в том, что вы сначала создаете документ с нужным размером, а затем изменяете картинку. Второй противоположный – открываете картинку и меняете размер. Разницы, по сути, нет: все зависит от ваших предпочтений и целей. Примеры будут рассматриваться в программе Adobe Photoshop, но вы можете использовать и другие графические редакторы.

Первый способ. Нажмите «Файл» - «Создать…» или же комбинацию клавиш Ctrl+N. Перед вами появится окно с настройками. Укажите там параметры ширины, высоты и необходимого цветового разрешения. Затем откройте понравившееся изображение в браузере, нажмите правую кнопку мыши и выберите пункт «Копировать картинку». Затем вернитесь в программу и нажмите комбинацию Ctrl+V.

Картинка появится в окне графического редактора. Затем нажмите «Редактирование» - «Свободное трансформирование» или комбинацию Ctrl+T. Появится ключевые точки, с помощью которых вы сможете подогнать картинку под величину рабочего окна. Как только вы получите желаемый результат (кстати, можно выходить за границы рабочей зоны), нажмите «Файл» - «Сохранить как…» или комбинацию клавиш Ctrl+S.

Второй способ. Вам необходимо сначала на компьютер, затем нажать «Файл» - «Открыть…» (или комбинацию Ctrl+O) и выбрать необходимое изображение. После выберите «Изображение» - «Размер изображения…» или нажмите комбинацию Alt+Ctrl+I. Снимите галочку «Сохранять пропорции» и укажите нужный размер. Затем нажмите клавишу ОК.

Изображения - составляющие практически любого сайта, поэтому без изменения размера не обойтись. Изменять размер картинки можно 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(высота) и они не будут соответствовать пропорциям, то картинка будет иметь именно такой размер, но в сжатом или растянутом виде, в зависимости от значений.

Почему нежелательно увеличивать картинки

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

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