image-rendering в CSS


Содержание

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53405f987d958d75 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

image-rendering

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.6+

Краткая информация

Значение по умолчанию auto
Наследуется Да
Применяется К изображениям, фоновым картинкам, ,

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

image-rendering нестандартное свойство и поддерживается только браузером Firefox начиная с версии 3.6 и Fennec 1.0.

Синтаксис

image-rendering: auto | optimizeSpeed | optimizeQuality | inherit | -moz-crisp-edges

Значения

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

Рис. 1. Результат применения методов интерполяции

HTML5 CSS 2.1 CSS 3 IE 9 Cr 15 Op 11 Sa 5 Fx 8

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

Рис. 2. Результат использования image-rendering с разными значениями

Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?

I have an image that is 100×100 in pixels. I want to show it twice the size, so 200×200 and I want to do it by CSS and (explicitly) not by the server.

Since a few years, images get anti-aliased by all browsers instead of doing a by-pixel scale.

Mozilla allows to specify the algorithm: image-rendering: -moz-crisp-edges; So does IE: -ms-interpolation-mode: nearest-neighbor;

Any known webkit alternative?

3 Answers 3

Unfortunately, it looks like this feature is absent in WebKit. See this recent bug report:

image-rendering

This is an experimental technology
Because this technology’s specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The image-rendering CSS property provides a hint to the browser about the algorithm it should use to scale images.

This property applies to the element itself as well as any images supplied in other properties for the element. It has no effect on non-scaled images. For example, if the natural size of the image is 100×100px but the page author specifies its dimensions as 200×200px (or 50×50px ), then the image will be upscaled (or downscaled) to the new dimensions using the specified algorithm. Scaling may also apply due to user interaction (zooming).

Canvas can provide a fallback solution for crisp-edge/optimize-contrast through manual image data manipulation.

Илон Маск рекомендует:  Что такое код ircg_part

Syntax

Initial value auto
Applies to all elements
Inherited yes
Media visual
Computed value as specified
Animation type discrete
Canonical order the unique non-ambiguous order defined by the formal grammar

Values

Formal syntax

Examples

Live Examples

image-rendering: auto;

78% 100% 138% downsized upsized

image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)

78% 100% 138% downsized upsized

image-rendering: crisp-edges; (-webkit-optimize-contrast)

78% 100% 138% downsized upsized

Specifications


Specification Status Comment
CSS Image Values and Replaced Content Module Level 3
The definition of ‘image-rendering’ in that specification.
Candidate Recommendation Initial definition

Though initially close from the SVG image-rendering property, the values are quite different now.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support ( auto ) (Yes) 3.6 (1.9.2) No support [1] 11.60 (Yes)
crisp-edges No support 3.6 (1.9.2) -moz No support 11.60 -o (Yes) [3]
pixelated 41.0 No support [2] No support 26.0 (Yes) [4]
optimizeQuality , optimizeSpeed No support 3.6 (1.9.2) No support 11.60 (Yes)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 41.0 ? ? ? ?

[1] Internet Explorer 7 and 8 support the non-standard -ms-interpolation-mode property with two values ( bicubic and nearest-neighbor ):

  • applies only to images (JPG, GIF, PNG, . )
  • in IE7 only for images without transparency
  • does not inherit
  • default value IE7: nearest-neighbor (low quality)
  • default value IE8: bicubic (high quality)
  • obsolete as of IE9

[2] This feature is not implemented yet. See bug 856337.

[3] Supported with the non-standard name -webkit-optimize-contrast .

[4] WebKit Nightly support, see WebKit bug 146771.

CSS — image-rendering

The image-rendering CSS property provides a hint to the browser about the algorithm it should use to scale images. It applies to the element itself as well as any images supplied in other properties for the element. It has no effect on non-scaled images.

Examples

Example1

Live Examples

image-rendering: auto;

78% 100% 138% downsized upsized

image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)

78% 100% 138% downsized upsized

image-rendering: crisp-edges; (-webkit-optimize-contrast)

78% 100% 138% downsized upsized

Syntax

Values

Formal syntax

Description

The image-rendering CSS property provides a hint to the browser about the algorithm it should use to scale images. It applies to the element itself as well as any images supplied in other properties for the element. It has no effect on non-scaled images.

For example, if the natural size of the image is 100×100px but the page author specifies its dimensions as 200×200px (or 50×50px ), then the image will be upscaled (or downscaled) to the new dimensions using the specified algorithm. Scaling may also apply due to user interaction (zooming).

Initial value auto
Applies to all elements
Inherited yes
Media visual
Computed value as specified
Animatable no
Canonical order the unique non-ambiguous order defined by the formal grammar

Browser Compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support ( auto ) (Yes) 3.6 (1.9.2) No support [1] 11.60 (Yes)
crisp-edges No support 3.6 (1.9.2) -moz No support 11.60 -o (Yes) [2]
pixelated 41.0 No support (bug 856337) No support 26.0 (Yes) [3]
optimizeQuality , optimizeSpeed No support 3.6 (1.9.2) No support 11.60 (Yes)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 41.0 ? ? ? ?

Notes

[1] Internet Explorer 7 and 8 supports the non-standard -ms-interpolation-mode property with two values ( bicubic and nearest-neighbor ):

  • applies only to images (JPG, GIF, PNG, . )
  • in IE7 only for images without transparency
  • does not inherit
  • default value IE7: nearest-neighbor (low quality)
  • default value IE8: bicubic (high quality)
  • obsolete as of IE9

[2] Supported with a non-standard name: -webkit-optimize-contrast .

[3] WebKit Nightly support, see bug

Canvas can provide a fallback solution for crisp-edge/optimize-contrast through manual imageData manipulation.

Specifications

Specification Status Comment
CSS Image Values and Replaced Content Module Level 3
The definition of ‘image-rendering’ in that specification.
Candidate Recommendation Initial definition

Though initially close from the SVG image-rendering property, the values are quite different now.

image-rendering: pixelated

As web developers we play with images all the time and in most cases browsers are great at scaling images to fit the boundaries of our site designs whilst keeping the images pretty. But what happens when you want to control how the browser scales the images on your page?

Chrome 41 (Beta in January 2015) introduces a new CSS property image-rendering: pixelated (Spec) that gives you a little more control over how the browser renders a scaled up image.

The CSS property image-rendering and the value pixelated are interesting because they turn off the browser’s standard smooth scaling (normally bi-linear interpolation) and replaces it with another scaling algorithm (nearest neighbor in most cases) when resizing the images.

Imagine you had an image that was 2×2 pixels and you scaled it up to 100×100 pixels, the browser would render it in a way that didn’t make it look blocky. Something like:

There are many cases where you would not want this smoothing behavior and instead use a method that preserves a more accurate representation of the image.

To get this effect, you simply apply image-rendering: pixelated; to your image as follows.

Try the Demo. As you can see the application of the property has a significant effect on how the image is rendered.


This property can be applied in many places:

  • elements
  • elements
  • Any element with a background-image property

I still don’t get it. Where should I use this?

If you are just showing photos on your site, then you probably don’t want this.

A great use-case is games, you frequently have to scale up the canvas to make it fit the screen size correctly. Prior to this CSS property the browser would interpolate the canvas in such a way that it would look blurry (see below [sic]).

Oh wow, @ChromiumDev Canary finally landed `image-resizing: pixelated` for ! Before & after: pic.twitter.com/QcPDtHu3s5

If you are building an airline ticketing tool, or an app that displays QR codes then frequently the user will want it to be full screen so that it is easier to scan, so controlling the image-rendering is critical.

Default Smoothing Preserving pixelation (only visible in Chrome M41+ or Opera 26+)

If you are interested in seeing the implementation, checkout Issue 317991 (it is left open for the implementation of the crisp-edges value. Star the issue to track the implementation).

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Свойства CSS, влияющие на рендеринг шрифта

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

Примечание: на скриншотах показан рендеринг шрифтов в Сафари 5 на МакОси 10.6.

Размер шрифта

Незначительное изменение размера шрифта может очень сильно отразиться на внешнем виде гарнитуры

Прежде всего, есть свойство font-size . Растеризация векторных контуров шрифта под размеры, адекватные современным экранам, означает, что каждая буква представлена лишь кучкой пикселей. Следовательно, небольшая разница в размере шрифта может очень сильно отразиться на внешнем виде гарнитуры.

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

Высокий контраст; тёмный текст на светлом фоне

Светлый текст на тёмном фоне

Светлый текст на тёмном фоне, как правило, выглядит толще, чем тёмный на светлом (см. также исследование на эту тему, выполненное Шоуном Бланком), поэтому в таких случаях стоит уделять особенное внимание низкой контрастности. Учитывайте, что недостаток контраста может вызвать затруднения у читателей с нарушенным зрением. Утилита Colour Contrast Check, написанная Джонатаном Снуком, проверяет цвета фона и переднего плана на соответствие WCAG.

WebKit и сглаживание шрифтов

Свойство -webkit-font-smoothing (работающее только в браузерах с поддержкой WebKit) позволяет дизайнеру указать один из трёх вариантов: subpixel-antialiased (по умолчанию), antialiased, или none. Тим Ван Дамм показал, что значение «antialised», как правило, делает текст более тонким в Сафари на Маках, чему очень сильно обрадовались дизайнеры, ранее использовавшие посторонние свойства — например, text-shadow — чтобы текст выглядел менее неуклюжим.

Другие чуваки подвергали сомнению использование -webkit-font-smoothing как средство утончения текста, хоть это и префикс, а не постхак. Кристоф Зиллгенс утверждает, что диагональные засечки выглядят плохо при отключённом сабпиксельном анти-алиасинге; Дмитрий Фадеев говорит, что мелкий текст менее резок.

Повороты

Наверное, очевидно, что вращение текста ведёт к проблемам с рендерингом. Плоские преобразования в CSS3, как объяснил Энди Кларк в своём посте для Typekit, позволяют дизайнерам поворачивать элементы; хотя этой фишкой можно достичь желаемого графического результата, негоризонтальный набор — это подлинные дебри рендеринга. К счастью, подобные эффекты менее заметны на экранах с высоким разрешением.

Скриншот текста, повёрнутого на 90 o ; изображение развёрнуто

Скриншот текста, повёрнутого на 45 o ; изображение развёрнуто

Скриншот текста на Safari Mobile, повёрнутого на 45 o ; изображение развёрнуто

Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Пользовательский интерфейс : image-rendering

Материал из WebWikiABCD

Содержание

image-rendering

Определяет метод обработки масштабируемых изображений.

Синтаксис

image-rendering: auto | inherit | optimizeSpeed | optimizeQuality | -moz-crisp-edges

Используемые значения

auto Значение по умолчанию. Зависит от браузера пользователя. С версии 1.9 (Firefox 3.0), в Gecko используется билинейная дискретизация. optimizeQuality Определяют, что браузер пользователя должен обработать изображение с лучшим качеством в ущерб скорости. optimizeSpeed Определяют, что браузер пользователя должен обработать изображение с наибольшей скоростью в ущерб качеству. -moz-crisp-edges Расширение Mozilla для CSS. Вообще, Gecko (Firefox) используется метод дискретизации по ближайшему соседнему. Используйте это значение, чтобы запретить режим масштабирования sharp edges getting blurry (четкие сглаженные границы).

Значением по умолчанию является auto. Атрибут Каскадных таблиц стилей (CSS) наследуется.

Замечания

В настоящее время значения auto и optimizeQuality свойства image-rendering эквивалентны. Для обоих используется билинейная дискретизация. Также эквивалентны optimizeSpeed и -moz-crisp-edges. В них используется метод дискретизации по ближайшему соседнему.

Различные режимы масштабирования применяются к:

  • изображениям
  • фоновым рисункам
  • элементу HTML5
  • элементу HTML5

Примеры

В примерах показано как применять свойство image-rendering к различным элементам и объектам.

Image-rendering в CSS

Невозможно отучить людей изучать самые ненужные предметы.

Надо знать обо всем понемножку, но все о немногом.

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить — становится деканом. (Т. Мартин)


Самоучитель CSS
Новости
Справочник CSS
Афоризмы
  • 02 ноябрь 2020, 00:00
CRAB MONSTER — БОЕВЫЕ КРАБЫ ПРИНОСЯТ ХОРОШИЙ ЗАРАБОТОК / ЗАРАБОТОК В ИНТЕРНЕТЕ — «Видео уроки — CSS»
  • 02 ноябрь 2020, 00:00
ПЕРВЫЙ ЗАРАБОТОК В BEST FIENDS. 3000 РУБЛЕЙ СТРАХОВКА / ЗАРАБОТОК В ИНТЕРНЕТЕ — «Видео уроки — CSS»
  • 02 ноябрь 2020, 00:00
CRAB MONSTER — ВЫВОДИМ ПЕРВЫЙ ЗАРАБОТОК. Рефбек 100% — «Видео уроки — CSS»
  • 10 ноябрь 2020, 00:01
26 ноября MediaTek представит 5G-процессор для смартфонов среднего класса — «Новости сети»
Помогли мы вам
image-rendering
Internet Explorer Chrome Opera Safari Firefox Android iOS
10.0+ 11.60+ 3.6+

Краткая информация

Значение по умолчанию auto
Наследуется Да
Применяется К изображениям, фоновым картинкам, ,

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

image-rendering: auto | optimizeSpeed | optimizeQuality | inherit | crisp-edges

Значения

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

Рис. 1. Результат применения методов интерполяции

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

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

Рис. 2. Результат использования image-rendering с разными значениями

Браузеры

Chrome не поддерживает значения optimizeSpeed и optimizeQuality . Вместо crisp-edges поддерживает значение -webkit-optimize-contrast .

Opera поддерживает значение -o-crisp-edges .

Firefox поддерживает значение -moz-crisp-edges .

Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Пользовательский интерфейс : image-rendering

смотрим также

Материал из Справочник Web-языков

Содержание

image-rendering

Определяет метод обработки масштабируемых изображений.

Синтаксис

image-rendering: auto | inherit | optimizeSpeed | optimizeQuality | -moz-crisp-edges

Используемые значения

auto Значение по умолчанию. Зависит от браузера пользователя. С версии 1.9 (Firefox 3.0), в Gecko используется билинейная дискретизация. optimizeQuality Определяют, что браузер пользователя должен обработать изображение с лучшим качеством в ущерб скорости. optimizeSpeed Определяют, что браузер пользователя должен обработать изображение с наибольшей скоростью в ущерб качеству. -moz-crisp-edges Расширение Mozilla для CSS. Вообще, Gecko (Firefox) используется метод дискретизации по ближайшему соседнему. Используйте это значение, чтобы запретить режим масштабирования sharp edges getting blurry (четкие сглаженные границы).

Значением по умолчанию является auto. Атрибут Каскадных таблиц стилей (CSS) наследуется.

Замечания

В настоящее время значения auto и optimizeQuality свойства image-rendering эквивалентны. Для обоих используется билинейная дискретизация. Также эквивалентны optimizeSpeed и -moz-crisp-edges. В них используется метод дискретизации по ближайшему соседнему.

Различные режимы масштабирования применяются к:

  • изображениям
  • фоновым рисункам
  • элементу HTML5
  • элементу HTML5

Примеры

В примерах показано как применять свойство image-rendering к различным элементам и объектам.

Илон Маск рекомендует:  Что такое код gzinflate
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL