HomeToolsImage Optimization

Image Optimization

Bạn đang xem: Image Optimization Tại dichvufacebook.vn

Optimizing your images is important for improving performance for your trang web or application.

This page provides an overview of considerations that can impact image optimization and covers the various Cloudinary optimization features and options you can use to make sure your images are delivered to your users in the quickest and best way possible, a key component in improving Core Website Vitals metrics.

See also

See also

  • Core Website Vitals
  • Video optimization

Optimizing an image involves delivering images in the format, dimensions, resolution, and quality that will yield the smallest possible file size while ensuring that the resulting image is appropriate for the specific content, the overall page thiết kế, the requesting device, and the expectations of your site visitors.

The following table summarizes the main elements that impact image file size and potential solutions for addressing those issues. However, in many cases, implementing the solutions on your own can be very time or labor intensive. Click the backlinks on each issue to learn how to use Cloudinary functionality to implement these solutions with minimal or no coding.

Issue
Problem
Possible Solutions

Image quality
Often photographs are delivered at their original extra-high resolution, for fear of losing too much visual quality or to make sure users with high-res (retina display and DPR 2+) devices will get the quality they expect. The result is a huge file and slow delivery speeds.
In most cases, you can significantly lower quality without a significant visual impact. Consider your image purpose and audience, and use the lowest possible quality that is acceptable for the image content, audience, and purpose.

When it’s important to deliver top-quality images for high-res devices, use the <picturevàgt; element and its srcset attribute to deliver different resolutions for different devices.

Image format

  • All image formats use some form of image compression. Some image formats are also lossy, meaning they discard some pixel data. Lossy formats work quite well for some image content, but not for others.
  • Different browsers support a variety of formats that may be more efficient than the standard JPG, PNG, and GIF formats. Delivering the standard formats for all browsers misses out on valuable savings from newer formats like AVIF and WebP.
  • Small images, like buttons and logos are often a larger percentage of site images than designers realize and many appear on every page. These types of images don’t look good in lossy formats, but delivering them as PNGs results in a large cumulative size for these images, which can slow your page load time.
  • Make sure each image is delivered in the right format for its image content.
  • Take advantage of CDN services or other tools/logic to test which browser is making the request and deliver different formats for different browsers using the <picturevàgt; element and its srcset attribute.
  • Instead of large animated GIFs, deliver animated WebP or use JPEG-XR (with CSS Animations (using the step property) to supported browsers, or convert to an MP4. You can also consider delivering lossy animated GIFs to get a smaller file when image quality is not a top priority.
  • Vector graphics (SVG) are based on line, point, and shape markup, rather than pixels. Using vectors for geometric graphics, enables sharp results at every resolution and zoom, with a minimal file size.
  • CSS3 effects and animations along with website fonts can sometimes be used to produce resolution-independent resources at a fraction of the size of the corresponding image.
  • Image Sprites: When vectors and CSS3 cannot replace raster images, using a single CSS image sprite, rather than many images, reduces server requests and thus saves bandwidth.

Image metadata
By default, images contain a lot of metadata stored by cameras and graphics applications, but this data is completely unnecessary in delivered images.
As a best practice, keep the metadata in your original sao chép of the graphics, but remove it in delivered images.

Image sizing and resizing
If you need to display an image at a size smaller than the original, and you rely on the browser to resize images, then you are delivering unnecessarily large files.

This applies both to a standard image resize, and responsive thiết kế, which requires multiple different images sizes.
The required dimensions can be determined on the server side (before it is delivered to the browser).

For responsive thiết kế, use the <picturevàgt; element and its srcset attribute to deliver different size images at different breakpoints.

Even when resizing on the server side, keep in mind that you can crop to focus on important content, and not just scale down your images.

Whenever you apply any transformation to an image, Cloudinary performs the following optimizations by default:

  • Strips all associated metadata from the transformed image file, except the following:

    • JFIFVersion
    • ResolutionUnit
    • XResolution
    • YResolution
    • Colorspace
    • DPI

    To override this behavior and deliver a transformed image with all of its metadata intact, add the fl_keep_iptc flag. Alternatively, you can use the fl_keep_attribution flag to keep the copyright-related metadata in the transformed image, but still strip the other metadata content that gets stripped by default.

  • Applies automatic optimization and quality adjustments to generated images. To override the default adjustments, set the quality parameter in your transformation.

lưu ý

lưu ý

transformed image. The original image file remains unchanged.

Each of the default optimizations affect only theimage. The original image file remains unchanged.

The image quality setting defines the compression level to apply to an image as a value between 1 (smallest file size) and 100 (best visual quality).

The setting you choose entails a trade-off between visual quality and file size: the lower the quality value, the more the file is compressed to a smaller file size, and the more data is lost in the process, the result of which is a loss of visual quality. At the higher quality levels, the loss of visual quality is barely noticeable to the human eye. The ultimate visual quality result also depends on other factors such as the size of the original image and the resolution of the user’s monitor or mobile screen.

Adjusting the quality of your images to a level that still provides good visual output, is one of the most powerful tools in image optimization. You can often deliver images at less than half of the original file size with little to no visually noticeable difference. Optimizing image quality can also help improve your Core Website Vitals score.

There are a few ways to control the quality of images delivered from Cloudinary:

As mentioned above, when you deliver an image with any transformation applied, it also applies a default quality level. Depending on the content, purpose, and audience for the majority of your images, you may want to modify the Default image quality level in the Upload Settings for your tài khoản.

You can choose a fixed quality level, or use one of the q_auto options as the default.

When you want specific image transformations to use a quality setting that is different to the default set for your tài khoản, or if you are not performing any other transformations on an image you deliver, you can specify the quality level as a transformation.

For example, the q_60 parameter below decreases the delivered file size from 118 KB to 73 KB:

URL:

Sao chép to clipboard

https://res.cloudinary.com/demo/

image/upload/

q_60/

sample.jpg

Ruby:

Sao chép to clipboard

cl_image_tag(

"

sample.jpg

"

,

:quality

=>

60

)

PHP (cloudinary_php v1.x (legacy)):

Sao chép to clipboard

cl_image_tag(

"

sample.jpg

"

,

array

(

"

quality

"

=>

60

))

Library:

PHP (cloudinary_php v2.x):

Sao chép to clipboard

(

new

ImageTag

(

'

sample.jpg

'

)) ->delivery(

Delivery

::quality(

60

));

Library:

Python:

Sao chép to clipboard

CloudinaryImage(

"

sample.jpg

"

).image(quality=

60

)

Node.js:

Sao chép to clipboard

cloudinary.image(

"

sample.jpg

"

, {

quality

:

60

})

Java:

Sao chép to clipboard

cloudinary.url().transformation(

new

Transformation().quality(

60

)).imageTag(

"

sample.jpg

"

);

JS:

Sao chép to clipboard

cloudinary.imageTag(

'

sample.jpg

'

, {

quality

:

60

}).toHtml();

jQuery:

Sao chép to clipboard

$

.cloudinary.image(

"

sample.jpg

"

, {

quality

:

60

})

React:

Sao chép to clipboard

<Image

publicId

=

"

sample.jpg

"

>

<Transformation

quality

=

"

60

"

/>

</Imagevàgt;

Vue.js:

Sao chép to clipboard

<cld-image 

public

-id=

"

sample.jpg

"

>

<cld-transformation

quality

=

"

60

"

/>

<

/

cld-imagevàgt;

Angular:

Sao chép to clipboard

<cl-image 

public

-id=

"

sample.jpg

"

> <cl-transformation quality=

"

60

"

> <

/

cl-transformationvàgt;

<

/

cl-imagevàgt;

.NET:

Sao chép to clipboard

cloudinary.Api.UrlImgUp.Transform(

new

Transformation().Quality(

60

)).BuildImageTag(

"

sample.jpg

"

)

iOS:

Sao chép to clipboard

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(

60

)).generate(

"

sample.jpg

"

)!, cloudinary: cloudinary)

Android:

Sao chép to clipboard

MediaManager.get().url().transformation(

new

Transformation().quality(

60

)).generate(

"

sample.jpg

"

);

Kotlin:

Sao chép to clipboard

cloudinary.image {
publicId(

"

sample.jpg

"

) delivery(Delivery.quality(

60

)) }.generate()

Control the visual quality and compression level of images with the quality parameter (q in URLs). This parameter represents the compression level to apply to an image as a value between 1 (smallest file size possible) and 100 (best visual quality). Reducing the quality is a trade-off between visual quality and file size: the lower the quality value, the more the file is compressed to a smaller file size, the more data is lost in the process, and the result is a loss of visual quality. The loss of visual quality is barely noticeable to the human eye at the higher quality levels, and final visual quality also depends on other factors such as the size of the image and the resolution of the user’s monitor or mobile screen.

XEM THÊM  Best FF Auto Headshot Sensitivity 2021
XEM THÊM  Best FF Auto Headshot Sensitivity 2021

For example, reducing the quality of the uploaded JPEG image named sample to 60 results in a file size of 73 KB compared to the original file size of 245 KB with a barely noticeable reduction in visual quality:

URL:

Sao chép to clipboard

https://res.cloudinary.com/demo/

image/upload/

q_60/

sample.jpg

Ruby:

Sao chép to clipboard

cl_image_tag(

"

sample.jpg

"

,

:quality

=>

60

)

PHP (cloudinary_php v1.x (legacy)):

Sao chép to clipboard

cl_image_tag(

"

sample.jpg

"

,

array

(

"

quality

"

=>

60

))

Library:

PHP (cloudinary_php v2.x):

Sao chép to clipboard

(

new

ImageTag

(

'

sample.jpg

'

)) ->delivery(

Delivery

::quality(

60

));

Library:

Python:

Sao chép to clipboard

CloudinaryImage(

"

sample.jpg

"

).image(quality=

60

)

Node.js:

Sao chép to clipboard

cloudinary.image(

"

sample.jpg

"

, {

quality

:

60

})

Java:

Sao chép to clipboard

cloudinary.url().transformation(

new

Transformation().quality(

60

)).imageTag(

"

sample.jpg

"

);

JS:

Sao chép to clipboard

cloudinary.imageTag(

'

sample.jpg

'

, {

quality

:

60

}).toHtml();

jQuery:

Sao chép to clipboard

$

.cloudinary.image(

"

sample.jpg

"

, {

quality

:

60

})

React:

Sao chép to clipboard

<Image

publicId

=

"

sample.jpg

"

>

<Transformation

quality

=

"

60

"

/>

</Imagevàgt;

Vue.js:

Sao chép to clipboard

<cld-image 

public

-id=

"

sample.jpg

"

>

<cld-transformation

quality

=

"

60

"

/>

<

/

cld-imagevàgt;

Angular:

Sao chép to clipboard

<cl-image 

public

-id=

"

sample.jpg

"

> <cl-transformation quality=

"

60

"

> <

/

cl-transformationvàgt;

<

/

cl-imagevàgt;

.NET:

Sao chép to clipboard

cloudinary.Api.UrlImgUp.Transform(

new

Transformation().Quality(

60

)).BuildImageTag(

"

sample.jpg

"

)

iOS:

Sao chép to clipboard

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(

60

)).generate(

"

sample.jpg

"

)!, cloudinary: cloudinary)

Android:

Sao chép to clipboard

MediaManager.get().url().transformation(

new

Transformation().quality(

60

)).generate(

"

sample.jpg

"

);

Kotlin:

Sao chép to clipboard

cloudinary.image {
publicId(

"

sample.jpg

"

) delivery(Delivery.quality(

60

)) }.generate()

Image with quality set to 60

The quality parameter is also automatically applied when delivering images with any other transformation applied. That is, unless the original uploaded image is requested, then a default quality value of 80 is also automatically applied to the transformed image.

The interactive image example below shows the effect that the various quality settings have on an image’s visual quality. The image is scaled down to a width of 600 pixels and initially displayed with a quality setting of 100. Click on the quality buttons below the image to see how different quality settings impact the image quality.

beach hut

https://res.cloudinary.com/demo/image/upload/w_600/q_100/beach_huts.jpg

Quality:

100

Size:

228KB

10

20

30

40

50

60

70

80

90

100

Notes

Notes

  • Images in the WebP format are lossless when specifying a quality of 100, and lossy when specifying a quality less than 100. See the How to support WebP images, save bandwidth and improve user experience blog bài viết for more information on the WebP format.
  • Images in the WebP format are lossless if the quality isn’t specified and the original image’s format is lossless (e.g., PNG).
  • Animated GIFs ignore the quality setting unless the lossy flag is added. See the Lossy compression for optimizing animated GIFs article for more information.
  • The JPEGmini add-on automatically applies the best compression possible to JPEG images while maintaining a high visual quality.

Chroma subsampling is a method of encoding images by implementing less resolution for chroma information (colors) than for luma information (luminance), taking advantage of the human visual system’s lower acuity for color differences than for luminance. To override the default behavior of whether to perform chroma subsampling, a separate value can be added to the quality parameter as follows:

  • 444 can be added to prevent subsampling. For example: q_80:444
  • 420 can be added to force subsampling. For example: q_95:420.

lưu ý

lưu ý

Chroma subsampling is not performed on images that include a text overlay unless specifically requested.

Cloudinary’s intelligent quality and encoding algorithm analyzes an image to find the best quality compression level and optimal encoding settings based on the image content and the viewing browser, in order to produce an image with good visual quality while minimizing the file size. Cloudinary automates the file size versus quality trade-off decision, on the fly using perceptual metrics and heuristics that tune the quality settings based on the specific image content and format. Analyzing every image individually to find the optimal compression level and image encoding settings allows for precise adjustment of the compression level complemented by fine tuning of the encoding settings, and can significantly reduce the file size without any degradation noticeable to the human eye.

To perform automatic quality selection and image encoding adjustments, set the quality transformation parameter to tự động (q_auto in URLs) or apply one of the Automatic options as the default image quality setting for your tài khoản.

You can further fine-tune the automatic quality selection as follows:

  • q_auto: The optimal balance between file size and visual quality. By default, this is the same as q_auto:good, while it can automatically switch to the more aggressive q_auto:eco mode (see the note on Save-data support below).
  • q_auto:best: Less aggressive algorithm. Generates bigger files with potentially better visual quality. Example of a target audience: photography sites that display images with a high visual quality.
  • q_auto:good: Ensuring a relatively small file size with good visual quality.
  • q_auto:eco: More aggressive algorithm, which results in smaller files of slightly lower visual quality. Example of a target audience: popular sites and mxh networks with a huge amount of lượt truy cập.
  • q_auto:low: Most aggressive algorithm, which results in the smallest files of low visual quality. Example of a target audience: sites using thumbnail images that backlinks to higher quality images.

Examples of the resulting file size when encoding a photograph, using various regular and automatic quality parameter values:

Original
Original (569KB)

(569KB)

q_80
q_80 (80.3KB)

(80.3KB)

q_auto:best
q_auto:best (65.9KB)

(65.9KB)

q_auto:good
q_auto:good (56.9KB)

(56.9KB)

q_auto:eco
q_auto:eco (45.0KB)

(45.0KB)

q_auto:low
q_auto:low (35.0KB)

(35.0KB)

URL:

Sao chép to clipboard

https://res.cloudinary.com/demo/

image/upload/

q_auto/

woman.jpg

Ruby:

Sao chép to clipboard

cl_image_tag(

"

woman.jpg

"

,

:quality

=>

"

tự động

"

)

PHP (cloudinary_php v1.x (legacy)):

Sao chép to clipboard

cl_image_tag(

"

woman.jpg

"

,

array

(

"

quality

"

=>

"

tự động

"

))

Library:

PHP (cloudinary_php v2.x):

Sao chép to clipboard

(

new

ImageTag

(

'

woman.jpg

'

)) ->delivery(

Delivery

::quality(

Quality

::tự động()));

Library:

Python:

Sao chép to clipboard

CloudinaryImage(

"

woman.jpg

"

).image(quality=

"

tự động

"

)

Node.js:

Sao chép to clipboard

cloudinary.image(

"

woman.jpg

"

, {

quality

:

"

tự động

"

})

Java:

Sao chép to clipboard

cloudinary.url().transformation(

new

Transformation().quality(

"

tự động

"

)).imageTag(

"

woman.jpg

"

);

JS:

Sao chép to clipboard

cloudinary.imageTag(

'

woman.jpg

'

, {

quality

:

"

tự động

"

}).toHtml();

jQuery:

Sao chép to clipboard

$

.cloudinary.image(

"

woman.jpg

"

, {

quality

:

"

tự động

"

})

React:

Sao chép to clipboard

<Image

publicId

=

"

woman.jpg

"

>

<Transformation

quality

=

"

tự động

"

/>

</Imagevàgt;

Vue.js:

Sao chép to clipboard

<cld-image 

public

-id=

"

woman.jpg

"

>

<cld-transformation

quality

=

"

tự động

"

/>

<

/

cld-imagevàgt;

Angular:

Sao chép to clipboard

<cl-image 

public

-id=

"

woman.jpg

"

> <cl-transformation quality=

"

tự động

"

> <

/

cl-transformationvàgt;

<

/

cl-imagevàgt;

.NET:

Sao chép to clipboard

cloudinary.Api.UrlImgUp.Transform(

new

Transformation().Quality(

"

tự động

"

)).BuildImageTag(

"

woman.jpg

"

)

iOS:

Sao chép to clipboard

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(

"

tự động

"

)).generate(

"

woman.jpg

"

)!, cloudinary: cloudinary)

Android:

Sao chép to clipboard

MediaManager.get().url().transformation(

new

Transformation().quality(

"

tự động

"

)).generate(

"

woman.jpg

"

);

Kotlin:

Sao chép to clipboard

cloudinary.image {
publicId(

"

woman.jpg

"

) delivery(Delivery.quality(Quality.tự động())) }.generate()

Examples of the resulting file size when encoding a drawing, using regular and automatic quality values:

Original
Original (296KB)

(296KB)

q_80
q_80 (223KB)

(223KB)

q_auto:best
q_auto:best (226KB)

(226KB)

q_auto:good
q_auto:good (156KB)

(156KB)

q_auto:eco
q_auto:eco (97.5KB)

(97.5KB)

q_auto:low
q_auto:low (87.5KB)

(87.5KB)

URL:

Sao chép to clipboard

https://res.cloudinary.com/demo/

image/upload/

q_auto/

robot.jpg

Ruby:

Sao chép to clipboard

cl_image_tag(

"

robot.jpg

"

,

:quality

=>

"

tự động

"

)

PHP (cloudinary_php v1.x (legacy)):

Sao chép to clipboard

cl_image_tag(

"

robot.jpg

"

,

array

(

"

quality

"

=>

"

tự động

"

))

Library:

PHP (cloudinary_php v2.x):

Sao chép to clipboard

(

new

ImageTag

(

'

robot.jpg

'

)) ->delivery(

Delivery

::quality(

Quality

::tự động()));

Library:

Python:

Sao chép to clipboard

CloudinaryImage(

"

robot.jpg

"

).image(quality=

"

tự động

"

)

Node.js:

Sao chép to clipboard

cloudinary.image(

"

robot.jpg

"

, {

quality

:

"

tự động

"

})

Java:

Sao chép to clipboard

cloudinary.url().transformation(

new

Transformation().quality(

"

tự động

"

)).imageTag(

"

robot.jpg

"

);

JS:

Sao chép to clipboard

cloudinary.imageTag(

'

robot.jpg

'

, {

quality

:

"

tự động

"

}).toHtml();

jQuery:

Sao chép to clipboard

$

.cloudinary.image(

"

robot.jpg

"

, {

quality

:

"

tự động

"

})

React:

Sao chép to clipboard

<Image

publicId

=

"

robot.jpg

"

>

<Transformation

quality

=

"

tự động

"

/>

</Imagevàgt;

Vue.js:

Sao chép to clipboard

<cld-image 

public

-id=

"

robot.jpg

"

>

<cld-transformation

quality

=

"

tự động

"

/>

<

/

cld-imagevàgt;

Angular:

Sao chép to clipboard

<cl-image 

public

-id=

"

robot.jpg

"

> <cl-transformation quality=

"

tự động

"

> <

/

cl-transformationvàgt;

<

/

cl-imagevàgt;

.NET:

Sao chép to clipboard

cloudinary.Api.UrlImgUp.Transform(

new

Transformation().Quality(

"

tự động

"

)).BuildImageTag(

"

robot.jpg

"

)

iOS:

Sao chép to clipboard

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(

"

tự động

"

)).generate(

"

robot.jpg

"

)!, cloudinary: cloudinary)

Android:

Sao chép to clipboard

MediaManager.get().url().transformation(

new

Transformation().quality(

"

tự động

"

)).generate(

"

robot.jpg

"

);

Kotlin:

XEM THÊM  20% Discount in October 2021

Sao chép to clipboard

cloudinary.image {
publicId(

"

robot.jpg

"

) delivery(Delivery.quality(Quality.tự động())) }.generate()

The interactive image example below shows the effect that the various tự động quality settings have on the visual quality of the beach image. The image is initially displayed with a quality setting of 100, and clicking on one of the buttons below the image will display the image using that particular quality setting.

beach hut

https://res.cloudinary.com/demo/image/upload/w_600/q_100/beach_huts.jpg

Quality:

100

Size:

228KB

tự động:low

tự động:eco

XEM THÊM  Mua bán xe ô tô giá rẻ tại Hà Nội 10

tự động:good

tự động:best

80

100

Notes

Notes

  • q_auto cannot be used within named transformations, however q_auto:[Mode] (e.g., q_auto:good) is supported within named transformations.
  • Save-Data support is a feature included in the Client-Hints standard, which is already supported by Chrome and Opera browsers. The browsers send a special request header named ‘Save-Data’ if the user has enabled data saving mode. When q_auto is specified and the ‘Save-Data: on’ header reaches the CDN layer of Cloudinary, image compression and encoding will automatically switch to the eco mode (q_auto:eco) instead of the default good quality mode (q_auto:good).
  • You can set an override quality for a specific image in the Media Library Edit Asset page of that asset. When set, that quality will always override any q_auto setting specified in a URL for that asset. This can be useful to control the quality of an important image if you apply a q_auto default setting for your tài khoản, or if all images delivered through a particular process are delivered with a transformation that includes q_auto. Cloudinary also uses your overrides as input that can help it improve the q_auto algorithm.

See also: q_auto for video

Image formats can be lossy or lossless, each with its own compression algorithm. And as mentioned, each type gives better results on some types of image content, and poorer results on other types. Furthermore, some of the newer formats are only supported on some browsers. Optimizing image format can also help improve your Core Website Vitals score.

Choosing the right format to deliver each image can result in significant file size savings without sacrificing quality.

There are several Cloudinary options you can use to address these issues.

  • Even if your users upload images in a format that isn’t ideal for the content, you can easily deliver in them a different type, just by changing the file type extension in the delivery URL.
  • Use the automatic format selection (f_auto) transformation parameter to allow Cloudinary to analyze the image content and select the best format to deliver. For example, it can automatically deliver images as WebP, AVIF or JPEG-2000 to browsers that support those formats, while delivering in the original format to all other browsers. This option can also deliver animated GIFs as WebP on browsers that support this format.
  • For browsers that do not support WebP, you can also deliver animated GIFs as lossy GIFs, for significant file size savings while maintaining acceptable quality.

This lossy animated GIF is only 2.5 MB, compared to the 6.3 MB original:

URL:

Sao chép to clipboard

https://res.cloudinary.com/demo/

image/upload/

fl_lossy/

kitten_fighting.gif

Ruby:

Sao chép to clipboard

cl_image_tag(

"

kitten_fighting

"

,

:flags

=>

"

lossy

"

)

PHP (cloudinary_php v1.x (legacy)):

Sao chép to clipboard

cl_image_tag(

"

kitten_fighting

"

,

array

(

"

flags

"

=>

"

lossy

"

))

Library:

PHP (cloudinary_php v2.x):

Sao chép to clipboard

(

new

ImageTag

(

'

kitten_fighting

'

)) ->delivery(

Delivery

::format(

Format

::gif()) ->lossy());

Library:

Python:

Sao chép to clipboard

CloudinaryImage(

"

kitten_fighting

"

).image(flags=

"

lossy

"

)

Node.js:

Sao chép to clipboard

cloudinary.image(

"

kitten_fighting

"

, {

flags

:

"

lossy

"

})

Java:

Sao chép to clipboard

cloudinary.url().transformation(

new

Transformation().flags(

"

lossy

"

)).imageTag(

"

kitten_fighting

"

);

JS:

Sao chép to clipboard

cloudinary.imageTag(

'

kitten_fighting

'

, {

flags

:

"

lossy

"

}).toHtml();

jQuery:

Sao chép to clipboard

$

.cloudinary.image(

"

kitten_fighting

"

, {

flags

:

"

lossy

"

})

React:

Sao chép to clipboard

<Image

publicId

=

"

kitten_fighting

"

>

<Transformation

flags

=

"

lossy

"

/>

</Imagevàgt;

Vue.js:

Sao chép to clipboard

<cld-image 

public

-id=

"

kitten_fighting

"

>

<cld-transformation

flags

=

"

lossy

"

/>

<

/

cld-imagevàgt;

Angular:

Sao chép to clipboard

<cl-image 

public

-id=

"

kitten_fighting

"

> <cl-transformation flags=

"

lossy

"

> <

/

cl-transformationvàgt;

<

/

cl-imagevàgt;

.NET:

Sao chép to clipboard

cloudinary.Api.UrlImgUp.Transform(

new

Transformation().Flags(

"

lossy

"

)).BuildImageTag(

"

kitten_fighting

"

)

iOS:

Sao chép to clipboard

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags(

"

lossy

"

)).generate(

"

kitten_fighting

"

)!, cloudinary: cloudinary)

Android:

Sao chép to clipboard

MediaManager.get().url().transformation(

new

Transformation().flags(

"

lossy

"

)).generate(

"

kitten_fighting

"

);

Kotlin:

Sao chép to clipboard

cloudinary.image {
publicId(

"

kitten_fighting

"

) delivery(Delivery.format(

Format

.gif()) { lossy() }) }.generate()

Another way to lower the cost of animated graphics is to deliver animated GIFs as videos. You can do this by simply changing the file type extension to .mp4 (or webm for Chrome, Android, and Opera) in the delivery URL.

For example, this mp4 is 95% smaller than the original animated GIF (319 KB instead of 6.3 MB):

URL:

Sao chép to clipboard

https://res.cloudinary.com/demo/

image/upload/

kitten_fighting.mp4

Ruby:

Sao chép to clipboard

cl_video_tag(

"

kitten_fighting

"

,

:resource_type

=>

"

image

"

)

PHP (cloudinary_php v1.x (legacy)):

Sao chép to clipboard

cl_video_tag(

"

kitten_fighting

"

,

array

(

"

resource_type

"

=>

"

image

"

))

Library:

PHP (cloudinary_php v2.x):

Sao chép to clipboard

(

new

VideoTag

(

'

kitten_fighting.mp4

'

)) ->assetType(

AssetType

::

IMAGE

);

Library:

Python:

Sao chép to clipboard

CloudinaryImage(

"

kitten_fighting

"

).video()

Node.js:

Sao chép to clipboard

cloudinary.video(

"

kitten_fighting

"

, {

resource_type

:

"

image

"

})

Java:

Sao chép to clipboard

cloudinary.url().transformation(

new

Transformation().resourceType(

"

image

"

).videoTag(

"

kitten_fighting

"

);

JS:

Sao chép to clipboard

cloudinary.imageTag(

'

kitten_fighting

'

).toHtml();

jQuery:

Sao chép to clipboard

$

.cloudinary.video(

"

kitten_fighting

"

, {

resource_type

:

"

image

"

})

React:

Sao chép to clipboard

<Image

publicId

=

"

kitten_fighting

"

resourceType

=

"

image

"

>

</Imagevàgt;

Vue.js:

Sao chép to clipboard

<cld-image 

public

-id=

"

kitten_fighting

"

resource-type=

"

image

"

> <

/

cld-imagevàgt;

Angular:

Sao chép to clipboard

<cl-image 

public

-id=

"

kitten_fighting

"

resource-type=

"

image

"

> <

/

cl-imagevàgt;

.NET:

Sao chép to clipboard

cloudinary.Api.UrlImgUp.BuildVideoTag(

"

kitten_fighting

"

)

iOS:

Sao chép to clipboard

imageView.cldSetImage(cloudinary.createUrl().generate(

"

kitten_fighting.mp4

"

)!, cloudinary: cloudinary)

Android:

Sao chép to clipboard

MediaManager.get().url().transformation(

new

Transformation().generate(

"

kitten_fighting.mp4

"

);

Kotlin:

Sao chép to clipboard

cloudinary.image {
publicId(

"

kitten_fighting.mp4

"

) assetType(

"

image

"

) }.generate()

For more information on working with animated GIFs, see Manipulating animated GIFs.

There are many formats for encoding images, with some formats better than others at compression and reducing the file size without impairing visual quality. Since different browsers support different image formats, the best solution to optimize delivery time and save bandwidth is to deliver the best format according to the browser used by each of your visitors.

The fetch_format parameter can be set to tự động (f_auto in URLs) in order to perform automatic format selection based on the requesting browser. Depending on the browser and which formats are enabled for f_auto on your tài khoản, the image could be delivered as, for example, AVIF, WebP or JPEG-2000 (or animated WebP, if it is an animated image). If a browser does not support any of the optimized formats that f_auto is enabled to return, then the image is delivered in the format specified by the file extension.

For example, rather than the source format of JPEG (33.5 KB) being delivered for this scaled down image, depending on the browser, an AVIF (14.6 KB), WebP (16.1 KB) or JPEG-2000 (21.0 KB) could be delivered. The table shows other formats for comparison:

URL:

Sao chép to clipboard

https://res.cloudinary.com/demo/

image/upload/

c_scale,w_500/f_auto/

docs/shoes.jpg

Ruby:

Sao chép to clipboard

cl_image_tag(

"

docs/shoes.jpg

"

,

:transformation

=>[ {

:width

=>

500

,

:crop

=>

"

scale

"

}, {

:fetch_format

=>

:auto

} ])

PHP (cloudinary_php v1.x (legacy)):

Sao chép to clipboard

cl_image_tag(

"

docs/shoes.jpg

"

,

array

(

"

transformation

"

=>

array

(

array

(

"

width

"

=>

500

,

"

crop

"

=>

"

scale

"

),

array

(

"

fetch_format

"

=>

"

tự động

"

) )))

Library:

PHP (cloudinary_php v2.x):

Sao chép to clipboard

(

new

ImageTag

(

'

docs/shoes

'

)) ->resize(

Resize

::scale()->width(

500

)) ->delivery(

Delivery

::format(

Format

::tự động()));

Library:

Python:

Sao chép to clipboard

CloudinaryImage(

"

docs/shoes.jpg

"

).image(transformation=[ {

'

width

'

:

500

,

'

crop

'

:

"

scale

"

}, {

'

fetch_format

'

:

"

auto

"

} ])

Node.js:

Sao chép to clipboard

cloudinary.image(

"

docs/shoes.jpg

"

, {

transformation

: [ {

width

:

500

,

crop

:

"

scale

"

}, {

fetch_format

:

"

auto

"

} ]})

Java:

Sao chép to clipboard

cloudinary.url().transformation(

new

Transformation() .width(

500

).crop(

"

scale

"

).chain() .fetchFormat(

"

tự động

"

)).imageTag(

"

docs/shoes.jpg

"

);

JS:

Sao chép to clipboard

cloudinary.imageTag(

'

docs/shoes.jpg

'

, {

transformation

: [ {

width

:

500

,

crop

:

"

scale

"

}, {

fetchFormat

:

"

auto

"

} ]}).toHtml();

jQuery:

Sao chép to clipboard

$

.cloudinary.image(

"

docs/shoes.jpg

"

, {

transformation

: [ {

width

:

500

,

crop

:

"

scale

"

}, {

fetch_format

:

"

auto

"

} ]})

React:

Sao chép to clipboard

<Image

publicId

=

"

docs/shoes.jpg

"

>

<Transformation

width

=

"

500

"

crop

=

"

scale

"

/>

<Transformation

fetchFormat

=

"

tự động

"

/>

</Imagevàgt;

Vue.js:

Sao chép to clipboard

<cld-image 

public

-id=

"

docs/shoes.jpg

"

>

<cld-transformation

width

=

"

500

"

crop

=

"

scale

"

/>

<cld-transformation

fetch-format

=

"

tự động

"

/>

<

/

cld-imagevàgt;

Angular:

Sao chép to clipboard

<cl-image 

public

-id=

"

docs/shoes.jpg

"

> <cl-transformation width=

"

500

"

crop=

"

scale

"

> <

/

cl-transformationvàgt;

<cl-transformation fetch-format="auto">

<

/

cl-transformationvàgt; <

/

cl-imagevàgt;

.NET:

Sao chép to clipboard

cloudinary.Api.UrlImgUp.Transform(

new

Transformation() .Width(

500

).Crop(

"

scale

"

).Chain() .FetchFormat(

"

tự động

"

)).BuildImageTag(

"

docs/shoes.jpg

"

)

iOS:

Sao chép to clipboard

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(

500

).setCrop(

"

scale

"

).chain() .setFetchFormat(

"

tự động

"

)).generate(

"

docs/shoes.jpg

"

)!, cloudinary: cloudinary)

Android:

Sao chép to clipboard

MediaManager.get().url().transformation(

new

Transformation() .width(

500

).crop(

"

scale

"

).chain() .fetchFormat(

"

tự động

"

)).generate(

"

docs/shoes.jpg

"

);

Kotlin:

XEM THÊM  Không ai tin đây là ảnh chụp bằng Galaxy S20 Ultra

Sao chép to clipboard

cloudinary.image {
publicId(

"

docs/shoes

"

) resize(Resize.scale() { width(

500

) }) delivery(Delivery.format(

Format

.tự động())) }.generate()

Format
Size

AVIF
14.6 KB

GIF
98.0 KB

JPEG
33.5 KB

JPEG-2000
21.0 KB

JPEG-XR
17.3 KB

PNG
190.0 KB

WebP
16.1 KB

  • Transformation counts: Using f_auto may increase your transformation counts and storage usage, due to the different formats being derived for a single transformation URL. You can limit the number of potential delivery formats by contacting support.
  • Bandwidth usage: Generally, total bandwidth usage should decrease with use of f_auto due to the delivery of more optimized (smaller file size) media files. However, in some cases, you may experience increased bandwidth usage, particularly with tin nhắn hộp thư online campaigns, due to the use of the “private” cache-control directive, which prevents intermediate caches from delivering potentially unsupported formats to requesting browsers.
  • AVIF format: To enable AVIF to be supported as a possible returned format for f_auto on your Cloudinary tài khoản, contact support.

    lưu ý

    lưu ý

    Small images (under 5000 pixels) are not automatically delivered as AVIF because the overhead of the file format outweighs the byte-savings of the optimized image.

  • Using f_auto with q_auto: When automatic format (f_auto) is used in the same URL as automatic quality (q_auto):
    • The PNG format may be selected when the automatic quality algorithm decides that it better fits the specific image. This allows delivering better looking and economical image files.
    • For JPEG images, if the automatic quality algorithm decides that no chroma subsampling should be performed, the WebP format is not selected because this lossy format always performs chroma subsampling, which might result in a lower visual quality for some images. The AVIF format could still be selected if this is supported by the requesting browser and enabled on your tài khoản.
  • Using developer tools for f_auto testing: Be aware that if using developer tools to emulate different browsers, Cloudinary may return a format that is unsupported by the main browser, so images may not display as expected. For example, if using Chrome dev tools to emulate an iPhone Safari browser, a JPEG-2000 may be returned, which Chrome does not support.
  • Using f_auto for transparent images: If f_auto is used to deliver an image that contains transparency, and the requesting browser does not support WebP or AVIF, then the image is delivered in PNG format instead of the JPEG format.
  • Using f_auto with fl_any_format: Setting the any_format flag together with automatic quality (q_auto,fl_any_format) but without setting f_auto, will also allow switching to PNG8 encoding if the quality algorithm decides that it’s more efficient.
  • JPEG-2000: JPEG-2000 is automatically supported as a possible returned format for f_auto on Cloudinary accounts created after October 2019. To enable this option for older accounts, contact support.
  • JPEG-XR: JPEG-XR is supported as a possible returned format for f_auto only for Cloudinary accounts created before April 2021 and is no longer supported by default. To add or remove this option, contact support.

See also: f_auto for video

Website site art-design generally requires displaying images at a variety of sizes, often much smaller than the original.

If you deliver full size images and rely on browser-side resizing (using CSS or HTML width and height attributes), users are forced to unnecessarily download large images. Therefore, images should always be delivered from the server at their final size.

When you use any of the Cloudinary resizing transformations, the sizing (scaling/cropping) is performed on the server side, and the image is always delivered to the browser at the requested size.

For details on resizing transformations, see Resizing and cropping images.

In general, the time for resizing an image on-the-fly (the first time it is delivered via the CDN) is negligible, but if you are resizing a very large image or video, and every millisecond counts even for those first users, consider doing an eager or explicit transformation to pre-generate the transformed image.

The importance of server-side resizing becomes that much more important if your Website site is responsive and needs to select an image size based on the current size of your browser or the resolution of your device.

By taking advantage of Cloudinary’s dpr_auto, w_auto, and other responsive image functionalities, you can ensure that you are delivering large or high-resolution images only to those users whose device resolution or browser size requires it, and you can create the many different sized images required, using simple transformations.

For example, to deliver the sample image cropped to an aspect ratio of 4:3 using the fill crop method, and then automatically scaled to the width available for the image in the responsive layout, and with a DPR value suitable for the user’s device, use a statement like this:

URL:

Sao chép to clipboard

https://res.cloudinary.com/demo/

image/upload/

ar_4:3,c_fill/c_scale,w_auto/dpr_auto/

sample.jpg

Ruby:

Sao chép to clipboard

cl_image_tag(

"

sample.jpg

"

,

:transformation

=>[ {

:aspect_ratio

=>

"

4:3

"

,

:crop

=>

"

fill

"

}, {

:width

=>

"

auto

"

,

:crop

=>

"

scale

"

}, {

:dpr

=>

"

auto

"

} ])

PHP (cloudinary_php v1.x (legacy)):

Sao chép to clipboard

cl_image_tag(

"

sample.jpg

"

,

array

(

"

transformation

"

=>

array

(

array

(

"

aspect_ratio

"

=>

"

4:3

"

,

"

crop

"

=>

"

fill

"

),

array

(

"

width

"

=>

"

tự động

"

,

"

crop

"

=>

"

scale

"

),

array

(

"

dpr

"

=>

"

tự động

"

) )))

Library:

PHP (cloudinary_php v2.x):

Sao chép to clipboard

(

new

ImageTag

(

'

sample.jpg

'

)) ->resize(

Resize

::fill()->aspectRatio(

AspectRatio

::ar4X3())) ->resize(

Resize

::scale()->width(

'

tự động

'

)) ->delivery(

Delivery

::dpr(

Dpr

::tự động()));

Library:

Python:

Sao chép to clipboard

CloudinaryImage(

"

sample.jpg

"

).image(transformation=[ {

'

aspect_ratio

'

:

"

4:3

"

,

'

crop

'

:

"

fill

"

}, {

'

width

'

:

"

auto

"

,

'

crop

'

:

"

scale

"

}, {

'

dpr

'

:

"

auto

"

} ])

Node.js:

Sao chép to clipboard

cloudinary.image(

"

sample.jpg

"

, {

transformation

: [ {

aspect_ratio

:

"

4:3

"

,

crop

:

"

fill

"

}, {

width

:

"

auto

"

,

crop

:

"

scale

"

}, {

dpr

:

"

auto

"

} ]})

Java:

Sao chép to clipboard

cloudinary.url().transformation(

new

Transformation() .aspectRatio(

"

4:3

"

).crop(

"

fill

"

).chain() .width(

"

tự động

"

).crop(

"

scale

"

).chain() .dpr(

"

tự động

"

)).imageTag(

"

sample.jpg

"

);

JS:

Sao chép to clipboard

cloudinary.imageTag(

'

sample.jpg

'

, {

transformation

: [ {

aspectRatio

:

"

4:3

"

,

crop

:

"

fill

"

}, {

width

:

"

auto

"

,

crop

:

"

scale

"

}, {

dpr

:

"

auto

"

} ]}).toHtml();

jQuery:

Sao chép to clipboard

$

.cloudinary.image(

"

sample.jpg

"

, {

transformation

: [ {

aspect_ratio

:

"

4:3

"

,

crop

:

"

fill

"

}, {

width

:

"

auto

"

,

crop

:

"

scale

"

}, {

dpr

:

"

auto

"

} ]})

React:

Sao chép to clipboard

<Image

publicId

=

"

sample.jpg

"

>

<Transformation

aspectRatio

=

"

4:3

"

crop

=

"

fill

"

/>

<Transformation

width

=

"

tự động

"

crop

=

"

scale

"

/>

<Transformation

dpr

=

"

tự động

"

/>

</Imagevàgt;

Vue.js:

Sao chép to clipboard

<cld-image 

public

-id=

"

sample.jpg

"

>

<cld-transformation

aspect-ratio

=

"

4:3

"

crop

=

"

fill

"

/>

<cld-transformation

width

=

"

tự động

"

crop

=

"

scale

"

/>

<cld-transformation

dpr

=

"

tự động

"

/>

<

/

cld-imagevàgt;

Angular:

Sao chép to clipboard

<cl-image 

public

-id=

"

sample.jpg

"

> <cl-transformation aspect-ratio=

"

4:3

"

crop=

"

fill

"

> <

/

cl-transformationvàgt;

<cl-transformation width="auto" crop="scale">

<

/

cl-transformationvàgt; <cl-transformation dpr=

"

tự động

"

> <

/

cl-transformationvàgt;

<

/

cl-imagevàgt;

.NET:

Sao chép to clipboard

cloudinary.Api.UrlImgUp.Transform(

new

Transformation() .AspectRatio(

"

4:3

"

).Crop(

"

fill

"

).Chain() .Width(

"

tự động

"

).Crop(

"

scale

"

).Chain() .Dpr(

"

tự động

"

)).BuildImageTag(

"

sample.jpg

"

)

iOS:

Sao chép to clipboard

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setAspectRatio(

"

4:3

"

).setCrop(

"

fill

"

).chain() .setWidth(

"

tự động

"

).setCrop(

"

scale

"

).chain() .setDpr(

"

tự động

"

)).generate(

"

sample.jpg

"

)!, cloudinary: cloudinary)

Android:

Sao chép to clipboard

MediaManager.get().url().transformation(

new

Transformation() .aspectRatio(

"

4:3

"

).crop(

"

fill

"

).chain() .width(

"

tự động

"

).crop(

"

scale

"

).chain() .dpr(

"

tự động

"

)).generate(

"

sample.jpg

"

);

Kotlin:

Sao chép to clipboard

cloudinary.image {
publicId(

"

sample.jpg

"

) resize(Resize.fill() { aspectRatio(AspectRatio.ar4X3()) }) resize(Resize.scale() { width(

"

tự động

"

) }) delivery(Delivery.dpr(Dpr.tự động())) }.generate()

Image using dpr_auto and w_auto

The above example will yield a 318 KB file on a DPR 2.0 device and 115 KB on a DPR 1.0 device.

For more details, on Cloudinary’s responsive thiết kế functionality, see Responsive images.

A sprite is a single image that is comprised of many smaller images. The website page is modified to download only a single image from the server and the page’s HTML uses alternative CSS class names to point to the small images within the larger image.

This minimizes the number of images to download and thus the number of server communications required, resulting in faster image delivery.

You can quickly create a single sprite image and the corresponding CSS file comprising all images with a particular tag.

After ensuring all relevant images are sized and tagged as needed, reference the URLs:

https://res.cloudinary.com/demo/image/sprite/mytag.css


https://res.cloudinary.com/demo/image/sprite/mytag.png

For more details, see Sprite Generation.

Even after employing as many automated optimization solutions as possible, you may find that specific original or derived images are still especially big bandwidth eaters.

Take a look at the Reports section of the Cloudinary console. There’s always a personalized tip at the top of the page based on your tài khoản’s usage. Then test out the Top bandwidth images or resources and the corresponding Top derived images and resources. Consider employing file-specific optimizations on these resources.

Top derived images listing

Scroll down to the Top Browsers to get an idea of how important each browser is to your users. This can give you insights on the relative value of using newer formats that are only supported on some browsers.

Top browsers graph

Xem thêm bài viết thuộc chuyên mục: Tools
RELATED ARTICLES
- Advertisment -spot_img

Most Popular

Recent Comments