Intislim

Как работает ?

Основные шаги при работе с :

  1. Создайте открывающий и закрывающий теги .
  2. Внутри создайте элемент для каждого выражения, что хотите обработать.
  3. Добавьте атрибут , содержащий выражения для таких вещей как высота и ширина области просмотра, ориентация и т.д.
  4. Добавьте атрибут с соответствующим именем файла изображения для загрузки.
  5. Добавьте дополнительные имена файлов к атрибуту , если нужно поддерживать разную плотность пикселей, например для Retina дисплеев.
  6. Добавьте резервный (fallback) элемент .

Вот простой пример, где для случая, когда ширина видимой области меньше 768px — загружается уменьшенное (smaller) изображение:

Можно заметить, что синтаксис, используемый в атрибуте является таким же, как и при использовании в CSS media queries. Вы можете использовать те же самые проверки, т.е. проверять , , , ,  и т.д.

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

Этот код загружает уменьшенную альбомную (landscape) версию изображения для устройств с малым экраном и соответствующей ориентацией. И увеличенную версию того же изображения для устройств с большим экраном.

Если устройство имеет книжную (portrait) ориентацию — загружается книжная версия изображения, уменьшенная для устройств с малым и увеличенная для устройств с большим экраном.

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

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

Very large screens

I’ve created folder named and placed here image 4000×1591 size. I’ve added a tag˛with proper PNG image type (it’s very important) and media query needed for large screens: .Now code looks like this:

Because my screen is 1366px I have to fake large resolution with Chrome Developer Tools:

Large resolution faked with DevTools

How it looks like in Network panel?

Large PNG image

Proper image was loaded, but can’t we make it smaller? 2.9 MB could be way too much on slower network.Let’s use WEBP lossless compressed version and add it to code:

2 things are very important:

  1. I’ve added which is used by browser to decide whether this type of image is supported or not.
  2. WEBP image has to be above regular version, because browser takes first source which meets criteria defined in .

What is the size of new image?

Much smaller WEBP image

WEBP image is 3 times smaller than original image! It makes a huge difference, especially when many images are used on the site. But what if we don’t need image with such a large size?

HTML picture tag

tag allows us to load different images for different requirements. It may contain zero or more elements and one tag as a fallback for older browsers. Support is quite wide today:

If you have to support old browser like IE 11 or Safari on iOS 9.2.x, you can use picture polyfill:

Google’s WEBP image format

WEBP format was introduced by Google, they provide some interesting case studies which provide results proving how effective it is:

But what about browsers support? As we can find on , it is supported only on Chromium-based browsers:

Is it a problem? I don’t think so. Webp support is being discussed on Mozilla forums, so it’s a possibility that sooner or later it will be supported:

Also, WEBP is under consideration in Microsoft Edge browser:

I’ve created a Github repo related to this article:

Where you can find how end result looks like. I want to divide implementation section to 5 subsections:

  1. Very large 4k screens, 1921px and wider
  2. Regular desktop/laptop screens, from 1281px to1920px width
  3. Tablet landscape, from 461px to 1280px width
  4. Tablet portrait, from 461px to 1280px width
  5. Mobile screens, to 460px width

And each sub-section will have 2 versions — regular PNG image and WEBP image. As an example I want to use vargazs’s photo from Pixabay:

Which is available for free download with many interesting resolutions.

Starting point

The starting point looks like this:

There is no defined, so fallback with tag is used.What is the size of used image? Let’s see:

Starting point — no optimisation

And now we can start to add images designed for particular size.

How to create WEBP image?

There is many online converters, but I want to use fastest way in my opinion, converting from Intellij IDEA:

Convertion from PNG to WEBP directly from IDE

Ограничения Picturefill

IE9

Picturefill отлично работает с разными версиями IE, однако IE9 не поддерживает элементы, которые используются внутри . Чтобы обойти это, оберните source элементы в теги с помощью условных комментариев; это сделает их видимыми для IE9, например:

Android 2.3

Как и IE9, Android 2.3 не показывает элементы внутри . Однако он понимает атрибут при использовании в обычных тегах. Убедитесь в том, что всегда включаете резервный с именем файла по умолчанию в атрибут  для Android 2.3 и других браузеров, которые могут иметь такую же проблему.

Требуется JavaScript и встроенная поддержка Media Query

Соответственно требуется, чтобы JavaScript был включен в браузере. Picturefill 2.0 не предоставляет «no-js» решения, ведь если это будет сделано, то когда браузер выкатит нативную поддержку — будет показываться уже несколько изображений. Однако, вы можете использовать Picturefill 1.2, если параметр «no-js» является для вас обязательным.

Другим требованием Picturefill является встроенная поддержка media query, чтобы позволить обрабатывать выражения в атрибуте . Все современные браузеры поддерживают media-выражения, лишь IE8 и ниже не имеют их поддержки, что соответствует лишь малой части пользователей.

Возможны дополнительные HTTP-запросы

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

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

2. How to Use “srcset” for a Set of Images

Instead of using just one image everywhere, it’s much better if we can have a set of images we load depending on the size of the viewport, loading large images for wide viewports and small images for narrow viewports.

That’s what the  attribute is for: a set of images rather than just one via the  attribute.

Width Switching

When an image is loaded with only a regular  attribute the browser doesn’t know how wide it is until after it’s loaded. But with the  attribute we can tell the browser how wide each of our images is in advance. It can then use that information to load the most appropriate image depending on the size of the viewport at the time.

You’ll still use the  attribute when using  as this provides the default image the browser should use, and acts as a fallback if someone is using an old browser that doesn’t support .

Go Mobile First

It’s a good idea to follow a mobile first approach here and load your smallest image via the  attribute. Then add your default image and its larger alternative images inside the  attribute as a comma separated list, specifying the width of each, (after a space), with :

It’s important to include your default image in the  along with its width, despite advice you may have heard to the contrary, or the browser will not include it in the list of options to choose from and so it will never load at any viewport width.

With the above code the browser will load the small image at small viewport sizes, the medium image at medium viewport sizes, and the large at large viewport sizes. (Describing viewport sizes very roughly).

If the browser doesn’t support , (something that’s only an issue for quite old browsers), it will fall back to showing the small image. If catering for older browsers is necessary for your projects be sure to include some CSS to scale your default image to the correct size.

Note: Despite the fact the above code will work as is, according to the  if you use  for width switching, you must also include a  attribute, which we will talk about shortly.

Pixel Density Switching

You can also use  to load images according to their DPI instead, but instead of specifying their width you should show their pixel density represented as :

However, you cannot use pixel density and width in the same  attribute, and you cannot use pixel density specifications with the  attribute we are about to add into the mix. For that reason, you are generally more likely to find you’ll want to use width specifications in your  attributes.

5. How to Use

The  element does nothing in and of itself. Rather, it is designed to wrap around an  element and one or more  elements. The  elements give the browser more information to help it decide which file it should render, and at what size, through the  element.

The  element’s child  element is required, and that child should not have its own  and  attributes because that functionality will be shifted to the  element. Further, the  element must also have  and  attributes. So let’s take the example code we’ve put together so far and convert it into the format  requires:

To reintroduce the functionality we had in our  and  attribute we can add a  element with the same attributes, like so:

That has everything working again, but as we mentioned earlier, there’s no point in using  if all we’re doing is resolution switching. So let’s imagine all our currently loaded images are in landscape orientation, then we’ll add in a whole second set of images for use in portrait orientation instead.

The first thing we’ll do is specify that our current set of images should only be used when the viewport is in landscape orientation. In our  element we can do this by adding a  attribute with the value 

From here, we can add a second  element that only activates when the site is in portrait orientation. This element will provide a new , with new image widths, but will still use the same layout  as before. This way we’ll keep the same amount of empty space either side of the image at various viewport dimensions:

There we go, now we’ll have portrait images in portrait orientation, and landscape images in landscape orientation–some nice art direction to go along with our resolution switching.

We could build on this a lot further if we needed to. For example, as well just having a set of regular landscape images, we could have  element with a set of wide-landscape images. We could set this to show if the site is both in landscape orientation and at least 1200px wide: 

Note: While the  and  attributes both contain media conditions, they are not used in the same way. The  attribute is specifically used to create a collection of layout sizes, with a layout width specified after each condition. The  attribute contains just a media condition, and only if it evaluates to true does the  element it’s attached to activate.

Additional note: I have seen it said you should not simultaneously use the  and  attributes on a  element, however I have not found verification of this in the spec, and in my tests the two seem to work together swimmingly.

Order Matters

When constructing your  elements, be mindful of the fact that as soon as the browser hits a  element with a  attribute that returns true it will stop looking and render from the  for that element. So make sure you put media queries with higher specificity first.

For example, we just mentioned the option of having a  element with a media query looking for both landscape orientation and a  of . If you first placed a  element that needed only landscape orientation, it would activate before the browser got the chance to go any further. So in this example don’t do this:

Do this:

Using  for Partially Supported File Types

The fact that  will go through a stack of  elements until it finds an image it can load successfully means you can use it quite handily to load newer file formats that don’t have 100% browser support yet.

In this example, if WebP is supported in the browser it will load as it’s specified in the first  element. If the browser cannot load the WebP image it will attempt to load the SVG from the second  element. And finally if neither are supported, the PNG will load instead:

You’ll notice that in this example the  attribute is used. When loading alternate file formats through  you should specify the MIME type in this way to allow the browser to instantly check on file type support as soon as it hits the  element in question.

A Note on Accessibility

Screen readers will use the  text supplied in the fallback  element for whichever image is displayed in the browser. Make sure, therefore, that the alt text represents all the images equally well!

Тень от изображения.

ЧþñàÃÂþ÷ôðÃÂàÃÂÃÂÃÂõúàÃÂõýø, øÃÂÿþûÃÂ÷ÃÂõÃÂÃÂàÃÂòþùÃÂÃÂòþ box-shadow.

ÃÂõÃÂòþõ ÷ýðÃÂõýøõ -à ÃÂÃÂþ ÃÂôòøó ÃÂõýø ÿþ þÃÂø X.

ÃÂÃÂþÃÂþõ ÷ýðÃÂõýøõ â ÃÂÃÂþ ÃÂôòøó ÃÂõýø ÿþ þÃÂø Y.

âÃÂõÃÂÃÂõ ÷ýðÃÂõýøõ â ÃÂð÷üÃÂÃÂøõ ÃÂõýø. ÃÂÃÂûø ÃÂÃÂþàÿðÃÂðüõÃÂàýõ ÃÂúð÷ÃÂòðõÃÂÃÂÃÂ, ÃÂþ ÿþ ÃÂüþûÃÂðýøàÃÂõýàýõ ñÃÂôõàÃÂð÷üÃÂÃÂþù.

çõÃÂòÃÂÃÂÃÂþõ ÷ýðÃÂõýøõ â ÃÂðÃÂÃÂÃÂöõýøõ ÃÂõýø. ÃÂþ ÃÂüþûÃÂðýøàÃÂõýàÃÂþóþ öõ ÃÂð÷üõÃÂð, ÃÂÃÂþ ø ÃÂûõüõýÃÂ.

ÃÂÃÂÃÂþõ ÷ýðÃÂõýøõ â ÃÂòõàÃÂõýø. æòõàÃÂõýø üþöýþ ÷ðôðÃÂàúðú ò àRGB-ÃÂþÃÂüðÃÂõ ÃÂðú ø ò RGBA-ÃÂþÃÂüðÃÂõ. ÃÂþ ÃÂüþûÃÂðýøàÃÂòõàÃÂÃÂÃÂýÃÂù.

img {width: 300px;height: 150px;border: 1px solid #000;border-radius: 10px;box-shadow:5px 5px 10px #2B1015;
}

ÃÂñÃÂõúðýøõ ø÷þñÃÂðöõýøàÃÂõúÃÂÃÂþü.

ÃÂûàýðóûÃÂôýþÃÂÃÂø ò index.html ôþñðòÃÂÃÂõ ÃÂõúÃÂÃÂ.

à à àà à à à à charset=»utf-8″>à à à à à rel= «stylesheet» type= «text/css» href= «style.css» />à à à à à ÃÂ÷þñÃÂðöõýøÃÂà à àà à àà à à à à src=»images/img1.jpg»>à à à à à

íÃÂþ ÃÂõúÃÂÃÂ, úþÃÂþÃÂÃÂù þñÃÂõúðõàø÷þñÃÂðöõýøõ ÃÂÿÃÂðòð.

à à à à à

ÃÂûàýðóûÃÂôýþÃÂÃÂø ýðÿøÃÂõü ýõÃÂúþûÃÂúþ ðñ÷ðÃÂõò

à à à à à

ÃÂñ÷ðàÿõÃÂòÃÂù

à à à à à

ÃÂñ÷ðàòÃÂþÃÂþù

à à à à à

ÃÂñ÷ðàÃÂÃÂõÃÂøù

à à à à à

àÃÂÃÂþàðñ÷ðàþñÃÂõúðõàø÷þñÃÂðöõýøõ ÃÂöõ ÃÂýø÷ÃÂ.

à à à

ÃÂÃÂûø üàÃÂþÃÂøü, ÃÂÃÂþñàø÷þñÃÂðöõýøõ ÃÂðÃÂÿþûðóðûþÃÂàÃÂûõòð, ð ÃÂõúÃÂàþñÃÂõúðû õóþ ÃÂÿÃÂðòð, øÃÂÿþûÃÂ÷ÃÂõü ÃÂòþùÃÂÃÂòþ float , ÷ýðÃÂõýøõü úþÃÂþÃÂþóþ ñÃÂôõàleft.

àôûàÃÂþóþ, ÃÂÃÂþñàÃÂõúÃÂàýõ ÿÃÂøûøÿðû ú ø÷þñÃÂðöõýøÃÂ, øÃÂÿþûÃÂ÷ÃÂõü ÃÂòþùÃÂÃÂòþ margin-right.

img {width: 300px;height: 150px;border: 1px solid #000;border-radius: 10px;box-shadow:5px 5px 10px #2B1015;float: left;margin-right: 20px;
}

Downloading Picturefill

Picturefill Version 3.0.2 (Stable)

Version 3 is a full rewrite of the Picturefill codebase, featuring optimized performance, better emulation of native behavior, and parsers that adhere much more closely to the specification. It also handles many of the quirks, shortcomings, and edge cases related to first-generation native implementations.

Feedback on this release is highly welcomed—if you encounter any problems, please file an issue on GitHub.

  • picturefill.js

    (development version, unminified code)

  • picturefill.min.js

    (production version, minified code)

Picturefill Version 2.3.1

Picturefill 2 is a lightweight polyfill that may not perfectly match native responsive images behavior. Please note however that because of a recently-fixed bug, you should absolutely not be using any version of Picturefill prior to 2.3.1. If you are, please update immediately. These downloads include the matchMedia polyfill for browsers that need it (like IE9).

  • picturefill.js

    (development version, unminified code)

  • picturefill.min.js

    (production version, minified code)

3. Using “sizes” to Control Image Layout

The  attribute allows you to specify a width for the image layout. Note this is a separate concept to the real image widths specified per file in the  attribute. The width given in  is related solely to layout, and can be thought of as creating empty placeholder slots into which the browser can insert images from your .

It doesn’t matter which image file the browser chooses to load from your , it will display it at the width you specified in 

For example, if you wanted your image to always appear at 80% the width of the viewport you could use:

Note: percentage values are not allowed, but  (viewport width) values are.

In this example the browser will still choose between the small, medium and large images depending on the size of the viewport, but whichever image is chosen it will display at a width of .

Adding Media Conditions

In our example above we used only one value in the  attribute, but you can conditionally change up your image layout by adding “media conditions”.  are the true or false states we evaluate when we use media queries, and when evaluated in  allow you lay out your images differently depending on things like viewport width.

For example, we might want an image to be laid out at a width of  so there is some empty space to its left and right, as per our previous example. However we might only want to spare that much of our viewport if it’s sufficiently wide, say a minimum of . 

We can achieve this by changing our code to add the media condition  before our  size, like so:

Now the image will only be sized at  if the viewport is at least  wide.

We can also have our image layout default to a width of  if the viewport does not meet the media condition we just added. Because a default value in  doesn’t require a media condition, all we need to do for this is add the  value, after a comma:

If we choose to, we can also add another size and media condition in between, so that as the viewport narrows to  we set the length to :

“sizes” Does Not Directly Determine “srcset” Image Selection

Note that in our examples above, regardless of the layout we give our images via the  attribute, the browser will still select the image of best fit automatically, just as it did before we added any media conditions.

You might see it said that you should use media conditions in  to determine which image should be loaded from the list in your . This is indirectly the case, but it can be unhelpful to think of the functionality in this way.

The reason I say that is you might be led to believe you need to use media conditions within  the way you might use them in regular media queries, i.e. designating a specific media condition to trigger each image you want to load. However this is not quite how things work here.

Rather, the browser is always going to handle the image selection automatically.

What’s really happening is that with  you’re saying:

You’re not saying which specific image file you want to load, just that you want to create a placeholder “slot” of a certain size to fit your layout.

And with  you are saying:

The browser will generate empty image “slots” based on your  attribute, then choose the best fitting images from your  to fill them.

At a glance your slot sizes and image widths won’t necessarily seem to closely correspond. You might have four images in your  and only two flexibly sized “slots” in your  and still all four images could be used at different times by the browser.

We saw something like this in our earlier example, where we created a “slot” size that is active between  and  viewport width, and lays out an image with a width of .

This pixel width of this slot could hence calculate to anywhere between roughly  and . In our example we provided images at widths of ,  and .

The browser will generally choose the smallest image from the  that is still wider than the current “slot”. As such, if the “slot” were at a width of of  it would load the  image, but if the slot were at a width of  it would load the  image. One media condition, two possible images.

The only reason what you put in  influences which image is selected from  is that it changes the size of “slot” the browser is trying to best fit. But the two concepts are still quite separate and should be thought of as such.

So to summarize:

  1. First, think of your image layout as a series of placeholder slots and decide what size those slots should be.
  2. Then, create a set of images with widths that will best fit the slots you have decided to create.

Усиление резкости изображений с image-rendering

Поддержка браузерами — 90,82% (на 11.2017)

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

Это широко поддерживаемое свойство контролирует алгоритм, применяемый браузером при масштабировании. Оно имеет 2 значения: crisp-edges и pixelated.

Значение crisp-edges удерживает цветовой контраст между пикселями. Другими словами, никакого сглаживания не производится, что отлично подходит для создания контраста.

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

Если вы внимательно посмотрите на края цветов на gif-изображении, представленном ниже, вы сможете увидеть разницу между изображениями: обычным и с примененным CSS-свойством image-rendering: pixelated.

CSS

img {
  image-rendering: pixelated;
}

Picturefill JavaScript API

Under ordinary circumstances, you likely won’t need to do more than include picturefill.js in your page, but in some situations you may want to run picturefill’s function manually yourself, and there are a few options to keep in mind:

The Picturefill function

Picturefill.js exposes a single global function: the function. is automatically called one or more times while a page is loading, and it also is triggered when the browser window is resized (or on orientation change). You can run the function at any time in JavaScript yourself as well, which may be useful after making updates to the DOM, or when conditions relevant to your application change:

Picturefill function options

When running the function, you can pass options specifying the following configuration options:

  • Elements: An array of elements you’d like picturefill to evaluate. The Default value for is all elements in the page that have a attribute or have a element as a direct parent.

  • Reevaluate: If you dynamically change the , attributes, or modify elements, please use this reevaluate option and provide an array or array-like object of your mutated elements. As an alternative the mutation plugin can be used.

Picturefill plugins/extensions

Picturefill core polyfills the core part of responsive images, including full support for , and /.

Some aspects of the native feature are left out to provide a clean and lightweight polyfill. In case you need a specific behavior of the native implementation not included in picturefill core, just add the corresponding plugin. The best way is to merge all scripts together.

  • intrinsic dimension: This extension adds support for intrinsic dimension behavior of responsive images. It’s useful when you don’t style your images with CSS.
  • Mutation plugin: This plugin automatically detects any DOM mutation and polyfills new or changed responsive images automatically. It also adds support for responsive images IDL attributes/properties. If you have a highly dynamic website or a SPA you probably want to use this plugin. (This plugin does not work with IE8.)
  • Type support: This plugin extends support for the attribute and detects JPG2000, APNG and JPEG XR support. If you want to use new image formats you probably want to use this plugin.
  • OldIE (IE6/7): picturefill supports most browsers including IE8+. In case you need to support IE6/7, you can combine the oldIE plugin with jQuery to add support for these browsers.

Source selection algorithm option

By default Picturefill attempts to mimic the resource selection algorithms current native implementations, but Picturefill 3 also includes an optional and experimental custom source selection algorithm. The algorithm skews the resource selection algorithm toward smaller image candidates( on extremely high dppx devices ( and up), to conserve bandwidth in situations where there may be little or no visual difference between sources.

To use , create a array that runs before picturefill:

Developer feedback on this new algorithm is highly welcomed. We’d love to see some data around potential bandwidth savings, and this data may go on to inform native responsive image implementations in the future.

Usage

Note that while the underlying formula is fairly symmetric (allows round-tripping), data is lost at high levels of filtering because pixels only allow integer values. For example, by the time you de-saturate an image to extreme levels (>95% or so), all the pixels are basically a uniform medium gray (within a few digits of the average possible value of 128). Turning the contrast back up again results in a flattened color range.

Also, order of operations is important when applying multiple contrast adjustments — saturated values «blow out» (exceed the clamped max value of 255) quickly, meaning highly saturating and then de-saturating will result in a darker image overall. De-saturating and then saturating however doesn’t have as much data loss, because the highlight and shadow values get muted, instead of clipped (see explanation below).

Generally speaking, when applying multiple filters it’s better to start each operation with the original data and re-apply each adjustment in turn, rather than trying to reverse a previous change — at least for image quality. Performance speed or other demands may dictate differently for each situation.

Выравнивание изображений с помощью vertical-align

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

Свойство vertical-align применяется не только в ячейках таблиц. Оно также может выравнивать строчные элементы, родителями которых также являются строчные элементы, поэтому с его помощью мы можем выровнять изображение внутри строки текста. У этого свойства имеется довольно много значений, которые можно применить к строчным элементам, поэтому вам будет из чего выбрать.

HTML

PDF

Важные моменты, которые необходимо учитывать при работе с изображениями

Н° ÿÃÂðúÃÂøÃÂõÃÂúþü ÿÃÂøüõÃÂõ òàÃÂòøôøÃÂõ, ÃÂÃÂþ ÿÃÂø ÷ðÿøÃÂø ÃÂÃÂøàÃÂòþùÃÂÃÂò ôûàø÷þñÃÂðöõýøàþýþ ÿÃÂõúÃÂðÃÂýþ ýðÃÂøýðõàüðÃÂÃÂÃÂðñøÃÂþòðÃÂÃÂÃÂàÿþô ÃÂð÷üõÃÂàÃÂúÃÂðýð. ÃÂþ! íÃÂþóþ ýõôþÃÂÃÂðÃÂþÃÂýþ ôûàÃÂþ÷ôðýøàÿþûýþÃÂõýýÃÂàðôðÿÃÂøòýÃÂàÃÂðùÃÂþò.

ÃÂÃÂöýþ ÃÂÃÂøÃÂÃÂòðÃÂÃÂ, ÃÂÃÂþ ø÷þñÃÂðöõýøàüþóÃÂàøüõÃÂàÃÂð÷ýÃÂù òõÃÂ, ø ÿÃÂø ñþûõõ ÃÂÃÂöõûÃÂàø÷þñÃÂðöõýøÃÂàñÃÂôõàÃÂÃÂÃÂðôðÃÂàÿÃÂþø÷òþôøÃÂõûÃÂýþÃÂÃÂàÃÂðùÃÂð, þý ñÃÂôõà÷ðóÃÂÃÂöðÃÂÃÂÃÂàóþÃÂð÷ôþ üõôûõýýõõ, þÃÂþñõýýþ ýð üþñøûÃÂýÃÂàÃÂÃÂÃÂÃÂþùÃÂÃÂòðÃÂ.

ÃÂÃÂþÃÂþù üþüõýÃÂ, úþÃÂþÃÂÃÂù ýõþñÃÂþôøüþ ÃÂÃÂøÃÂÃÂòðÃÂÃÂ, â ÃÂÃÂþ ÃÂþ, ÃÂÃÂþ úðÃÂÃÂøýúð ôþûöýð ÃÂüõýÃÂÃÂðÃÂÃÂÃÂàÿÃÂþÿþÃÂÃÂøþýðûÃÂýþ ø àõõ ÃÂüõýÃÂÃÂõýøõü ýð ýõù ôþûöýð þÃÂÃÂðòðÃÂÃÂÃÂàÃÂðüðàóûðòýðàÃÂðÃÂÃÂàø÷þñÃÂðöõýøÃÂ.

ÃÂûàÃÂõÃÂõýøàòÃÂõàÃÂÃÂøàÿÃÂþñûõü ø÷þñÃÂðöõýøàýðôþ þÿÃÂøüø÷øÃÂþòðÃÂÃÂ. á ÃÂÃÂþù ÃÂõûÃÂàøÃÂÿþûÃÂ÷ÃÂÃÂÃÂÃÂàÃÂð÷ûøÃÂýÃÂõ ÃÂõÃÂòøÃÂÃÂ. àýøü þÃÂýþÃÂÃÂÃÂÃÂàÃÂðúøõ, úðú TinyPNG, Image Optimizer. ÃÂÿÃÂøüø÷øÃÂþòðÃÂàø÷þñÃÂðöõýøàüþöýþ ÃÂðúöõ àÿþüþÃÂÃÂàÿÃÂþóÃÂðüüàPhotoshop.

ÃÂûàúþÃÂÃÂõúÃÂýþù ÿþôóÃÂÃÂ÷úø ø÷þñÃÂðöõýøù ðòÃÂþàòøôõþÃÂÃÂþúð ÃÂõúþüõýôÃÂõàøÃÂÿþûÃÂ÷þòðÃÂàjs-ñøñûøþÃÂõúàPicturefill. áÃÂÃÂõÃÂÃÂòÃÂÃÂàÃÂðúöõ ø ôÃÂÃÂóøõ òðÃÂøðýÃÂàÿþôóÃÂÃÂöõýøàø÷þñÃÂðöõýøù ôûàðôðÿÃÂøòýÃÂàÃÂðùÃÂþò. àýøàÃÂþöõ ÃÂðÃÂÃÂúð÷ðýþ ýð òøôõþÃÂÃÂþúõ.

àÃÂõûþü òøôõþÃÂÃÂþú ÿþûýþÃÂÃÂÃÂàþÃÂýþòðý ýð ÿÃÂðúÃÂøÃÂõÃÂúøàÿÃÂøüõÃÂðÃÂ. áÃÂÃÂþóþ ÃÂûõôÃÂàÃÂõúþüõýôðÃÂøÃÂü ðòÃÂþÃÂð, òàýðÃÂÃÂøÃÂõÃÂàþÿÃÂøüø÷øÃÂþòðÃÂàüõôøð-úþýÃÂõýàø ÿþôóÃÂÃÂöðÃÂàõóþ ýð ÃÂðùÃÂ.

ÃÂÃÂøÃÂÃÂýþóþ òÃÂõü ÿÃÂþÃÂüþÃÂÃÂð! ãÃÂøÃÂõÃÂààÃÂôþòþûÃÂÃÂÃÂòøõü! ÃÂÃÂõóôð òðàLoftblog.

XHTML

Использование сегодня

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

Тем временем вам не нужно ждать, если хотите использовать  прямо сейчас. Просто воспользуйтесь Picturefill 2.0; polyfill от умных людей из Filament Group.

После скачивания файла picturefill.js в свой проект просто подключите его в шапке:

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

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

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