Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

docs: replace code-example with docs-code (#55186)

Browse source 
PR Close #55186
This commit is contained in:
Matthieu Riegler 2024-04-03 10:08:39 +02:00 committed by Andrew Scott
parent f8d59211ac
commit 87cdfaf88f
1 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
adev/src/content/guide/image-optimization.md
View file

@ -118,17 +118,17 @@ IMPORTANT: For the "fill" image to render properly, its parent element **must**
NgOptimizedImage can display an automatic low-resolution placeholder for your image if you're using a CDN or image host that provides automatic image resizing. Take advantage of this feature by adding the `placeholder` attribute to your image:
<code-example format="typescript" language="typescript">
<docs-code format="typescript" language="typescript">
<img ngSrc="cat.jpg" width="400" height="200" placeholder>
</code-example>
</docs-code>
Adding this attribute automatically requests a second, smaller version of the image using your specified image loader. This small image will be applied as a `background-image` style with a CSS blur while your image loads. If no image loader is provided, no placeholder image can be generated and an error will be thrown.
The default size for generated placeholders is 30px wide. You can change this size by specifying a pixel value in the `IMAGE_CONFIG` provider, as seen below:
<code-example format="typescript" language="typescript">
<docs-code format="typescript" language="typescript">
providers: [
{
provide: IMAGE_CONFIG,
@ -137,7 +137,7 @@ providers: [
}
},
],
</code-example>
</docs-code>
If you want sharp edges around your blurred placeholder, you can wrap your image in a containing `<div>` with the `overflow: hidden` style. As long as the `<div>` is the same size as the image (such as by using the `width: fit-content` style), the "fuzzy edges" of the placeholder will be hidden.
@ -145,11 +145,11 @@ If you want sharp edges around your blurred placeholder, you can wrap your image
You can also specify a placeholder using a base64 [data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) without an image loader. The data url format is `data:image/[imagetype];[data]`, where `[imagetype]` is the image format, just as `png`, and `[data]` is a base64 encoding of the image. That encoding can be done using the command line or in JavaScript. For specific commands, see [the MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs#encoding_data_into_base64_format). An example of a data URL placeholder with truncated data is shown below:
<code-example format="typescript" language="typescript">
<docs-code format="typescript" language="typescript">
<img ngSrc="cat.jpg" width="400" height="200" placeholder="data:image/png;base64,iVBORw0K...">
</code-example>
</docs-code>
However, large data URLs increase the size of your Angular bundles and slow down page load. If you cannot use an image loader, the Angular team recommends keeping base64 placeholder images smaller than 4KB and using them exclusively on critical images. In addition to decreasing placeholder dimensions, consider changing image formats or parameters used when saving images. At very low resolutions, these parameters can have a large effect on file size.
@ -157,11 +157,11 @@ However, large data URLs increase the size of your Angular bundles and slow dow
By default, NgOptimizedImage applies a CSS blur effect to image placeholders. To render a placeholder without blur, provide a `placeholderConfig` argument with an object that includes the `blur` property, set to false. For example:
<code-example format="typescript" language="typescript">
<docs-code format="typescript" language="typescript">
<img ngSrc="cat.jpg" width="400" height="200" placeholder [placeholderConfig]="{blur: false}">
</code-example>
</docs-code>
## Adjusting image styling