> ## Documentation Index > Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt > Use this file to discover all available pages before exploring further. # Step 2: Load pages faster with optimization Your Kickstart Progress: Intro Step 1 Step 2 Step 3 Step 4 Step 5 Every byte in your web page or app matters. And that's especially true for heavy images and videos. In this step, you'll see how just adding a couple of parameters to a URL will automatically select the best file format for your browser/device and minimize file size of each delivered image and video while maintaining visual quality. This ensures a top-notch visual experience for your customers and top-notch **Core Web Vitals** scores for you! * [Task 1: Open the image delivery URL ](#task_1_open_the_image_delivery_url) * [Task 2: Optimize the image](#task_2_optimize_the_image) * [Task 3: Resize your image ](#task_3_resize_your_image) * [Task 4: Optimize a video ](#task_4_optimize_a_video) ***~5 minutes*** --- ### Task 1: Open the image delivery URL 1. Load the following **Delivery URL** to a new browser tab, replacing `` below with your actual **cloud name**: https://res.cloudinary.com//image/upload/cld-sample-4.jpg 2. You'll see an 800kb, high-quality, and large resolution (1870x1250px) JPG image that was included as a sample asset when you created your account. ![Sample 4 image](https://res.cloudinary.com/demo/image/upload/cld-sample-4.jpg "thumb:w_400, with_url:false, with_code:false") More about delivery URLs You can deliver an exact copy of any original asset in your product environment using **delivery URLs** in the format: `https://res.cloudinary.com////.` Where: * Your **cloud name** indicates the product environment in your account where your asset is stored. * **Asset type** is either **image**, **video**, or **raw**. * **Delivery type** is `upload` by default, but in some cases, it can have values like `authenticated` or `private`, or a remote type such as `fetch`, `facebook`, or `twitter`. For details, see [Delivery types](image_transformations#delivery_types). * **Public ID** is a delivery **identifier** for your asset. It's not immutable, but must be unique for the asset type and delivery type within your product environment. * Public IDs can be random values, descriptive names, or a combination. The value is assigned when the asset is uploaded, either based on pre-defined **upload presets** or on parameters you pass with the upload call. * Public IDs can contain slashes to denote a path that can be useful for SEO purposes. * You can change the public ID of an asset, but changing it breaks all existing delivery URLs for that asset. * The URL file **extension** is optional. If not specified, the asset is automatically delivered in it's original format. * If you specify an extension that's a different format than the original, Cloudinary automatically converts the *delivered* asset to that format the first time the URL is accessed (but that has no impact on the original stored in your account). --- ### Task 2: Optimize the image Continue with the same delivery URL and browser tab from the above task. 1. In the address bar, just after `/upload` (and before the next slash), paste: `/q_auto/f_auto`, and reload the image. https://res.cloudinary.com//image/upload/q_auto/f_auto/cld-sample-4.jpg 2. Even though you're still delivering an 1870x1250px image, if you download or inspect the image, you'll see that the image size is now only about ⅓ or less of its original file size. 3. Click **Forward** and **Back** on your browser to compare between the original and this optimized version. Unless you've got superman-quality vision, you probably won't be able to discern any visual quality difference. What's happening behind the scenes of this optimization URL? * When you load the image in your browser, Cloudinary generates and delivers a new *variation* (aka **derived asset**) of the original image on the fly, based on your requested parameters: in this case you requested 'auto quality' & 'auto format' (`q_auto/f_auto`). * These two params together use advanced image processing and AI algorithms to select the best file format and to apply the most ideal quality compression **for the specific contents of the asset** and for the requesting browser and device. * **This newly generated asset isn't stored as a new file in your account**. * When Cloudinary generates this **derived** asset based on the parameters passed in the URL, the new variant is cached in your account on Cloudinary servers as well as on CDN endpoints around the world and can be delivered at any time via that URL. * If the CDN doesn't yet have (or no longer has) that variation cached, the CDN just (re)requests it from your account cache or when needed, Cloudinary regenerates it on the fly from the latest version of the original asset in your account and re-caches it. > **TIP**: Try the [Cloudinary Media Inspector](media_inspector_browser_extension) browser extension to see the size of the delivered image. --- ### Task 3: Resize your image There's no need to deliver high-res images to users and then have them resized client-side in your app. That hurts your page load performance and your end user's experience. Let's add a couple more parameters to generate a resized image on the Cloudinary servers and then the auto-quality and auto-format parameters you used before will be applied to deliver the best quality and format of the resized variant: 1. In the address bar, just before `/q_auto/f_auto`, enter: `/c_scale,w_500` and reload the image. > **TIP**: When adding new components to an existing URL, make sure that the resulting URL has a slash between each component. If you accidentally paste something in the wrong place such that there's a missing slash somewhere, you'll get an error when you reload the URL. If that happens, just skim the URL and check for a missing slash. 2. Now check the file size and format of the delivered image again. Check your results * Your resized and optimized image URL should be: https://res.cloudinary.com//image/upload/c_scale,w_500/q_auto/f_auto/cld-sample-4.jpg * The exact image format and file size depends on the browser you're using, but for example in Chrome, you'll probably get a WEBP with a file size of 30.7 KB. (Remember that the original was 800KB!) --- ### Task 4: Optimize a video 1. Open the sample video below in a new browser tab using your **cloud name**: https://res.cloudinary.com//video/upload/samples/cld-sample-video.mp4 2. Download or inspect to check the resolution, format, and file size of this original video. 3. Now add the identical scale, auto-quality, and auto-gravity parameters as you previously added to the image and reload the video. 4. Wait until the video has loaded and played to end to enable the progressive optimization to complete and then check the video format and file size again. Check your results * The original video is 1703*958px, in mp4 format, and 27.54 MB. * Your optimized and resized video URL should be: https://res.cloudinary.com//video/upload/c_scale,w_500/q_auto/f_auto/samples/cld-sample-video.mp4 * The exact video format and file size of the optimized video depends on your browser, but for example in Chrome, you'll probably get a WEBM with a file size of around 597 KB. * Notice that in this case, the video's public ID includes a path. The full public ID value is: `samples/cld-sample-video`. * The first time you deliver a new optimized video transformation URL, the optimization takes place progressively while the video plays. After that first instance, the video URL always loads the cached optimized version for all users. In a production scenario, you can optionally warm up the cache by generating the optimized video transformation [eagerly](eager_and_incoming_transformations#eager_transformations), so that even the first user who accesses the URL receives the fully optimized version. {/collapsed} --- ### Check out how you'd generate these using an SDK Cloudinary has tons of backend, frontend, and mobile SDK libraries, all of which enable you to generate optimization (and other) delivery URLs using your favorite programming language. You'll learn how to set up and use your chosen SDK in [step 5](dev_kickstart_sdks), but for now, here's a sneak preview of what the code for generating the above URLs would look like using an SDK. Take a quick look at the code for your favorite language(s): ![Image optimization with SDKs](https://res.cloudinary.com/demo/image/upload/w_500/q_auto/f_auto/cld-sample-4.jpg "with_url:false, with_image:false") ```nodejs cloudinary.image("cld-sample-4.jpg", {transformation: [ {width: 500, crop: "scale"}, {quality: "auto"}, {fetch_format: "auto"} ]}) ``` ```react new CloudinaryImage("cld-sample-4.jpg") .resize(scale().width(500)) .delivery(quality(auto())) .delivery(format(auto())); ``` ```vue new CloudinaryImage("cld-sample-4.jpg") .resize(scale().width(500)) .delivery(quality(auto())) .delivery(format(auto())); ``` ```angular new CloudinaryImage("cld-sample-4.jpg") .resize(scale().width(500)) .delivery(quality(auto())) .delivery(format(auto())); ``` ```js new CloudinaryImage("cld-sample-4.jpg") .resize(scale().width(500)) .delivery(quality(auto())) .delivery(format(auto())); ``` ```python CloudinaryImage("cld-sample-4.jpg").image(transformation=[ {'width': 500, 'crop': "scale"}, {'quality': "auto"}, {'fetch_format': "auto"} ]) ``` ```php (new ImageTag('cld-sample-4.jpg')) ->resize(Resize::scale()->width(500)) ->delivery(Delivery::quality( Quality::auto())) ->delivery(Delivery::format( Format::auto())); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .quality("auto").chain() .fetchFormat("auto")).imageTag("cld-sample-4.jpg"); ``` ```ruby cl_image_tag("cld-sample-4.jpg", transformation: [ {width: 500, crop: "scale"}, {quality: "auto"}, {fetch_format: "auto"} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .Quality("auto").Chain() .FetchFormat("auto")).BuildImageTag("cld-sample-4.jpg") ``` ```dart cloudinary.image('cld-sample-4.jpg').transformation(Transformation() .resize(Resize.scale().width(500)) .delivery(Delivery.quality( Quality.auto())) .delivery(Delivery.format( Format.auto()))); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setQuality("auto").chain() .setFetchFormat("auto")).generate("cld-sample-4.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .quality("auto").chain() .fetchFormat("auto")).generate("cld-sample-4.jpg"); ``` ```flutter cloudinary.image('cld-sample-4.jpg').transformation(Transformation() .resize(Resize.scale().width(500)) .delivery(Delivery.quality( Quality.auto())) .delivery(Delivery.format( Format.auto()))); ``` ```kotlin cloudinary.image { publicId("cld-sample-4.jpg") resize(Resize.scale() { width(500) }) delivery(Delivery.quality( Quality.auto())) delivery(Delivery.format( Format.auto())) }.generate() ``` ```jquery $.cloudinary.image("cld-sample-4.jpg", {transformation: [ {width: 500, crop: "scale"}, {quality: "auto"}, {fetch_format: "auto"} ]}) ``` ```react_native new CloudinaryImage("cld-sample-4.jpg") .resize(scale().width(500)) .delivery(quality(auto())) .delivery(format(auto())); ``` ![Video optimization with SDKs](https://res.cloudinary.com/demo/video/upload/c_scale,w_500/q_auto/f_auto/samples/cld-sample-video "with_url:false, with_image:false") ```nodejs cloudinary.image("samples/cld-sample-video", {resource_type: "video", transformation: [ {width: 500, crop: "scale"}, {quality: "auto"}, {fetch_format: "auto"} ]}) ``` ```react new CloudinaryImage("samples/cld-sample-video") .resize(scale().width(500)) .delivery(quality(auto())) .delivery(format(auto())) .setAssetType("video"); ``` ```vue new CloudinaryImage("samples/cld-sample-video") .resize(scale().width(500)) .delivery(quality(auto())) .delivery(format(auto())) .setAssetType("video"); ``` ```angular new CloudinaryImage("samples/cld-sample-video") .resize(scale().width(500)) .delivery(quality(auto())) .delivery(format(auto())) .setAssetType("video"); ``` ```js new CloudinaryImage("samples/cld-sample-video") .resize(scale().width(500)) .delivery(quality(auto())) .delivery(format(auto())) .setAssetType("video"); ``` ```python CloudinaryVideo("samples/cld-sample-video").image(transformation=[ {'width': 500, 'crop': "scale"}, {'quality': "auto"}, {'fetch_format': "auto"} ]) ``` ```php (new ImageTag('samples/cld-sample-video')) ->resize(Resize::scale()->width(500)) ->delivery(Delivery::quality( Quality::auto())) ->delivery(Delivery::format( Format::auto())) ->assetType("video"); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .quality("auto").chain() .fetchFormat("auto")).resourceType("video").imageTag("samples/cld-sample-video"); ``` ```ruby cl_image_tag("samples/cld-sample-video", resource_type: "video", transformation: [ {width: 500, crop: "scale"}, {quality: "auto"}, {fetch_format: "auto"} ]) ``` ```csharp cloudinary.Api.UrlVideoUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .Quality("auto").Chain() .FetchFormat("auto")).BuildImageTag("samples/cld-sample-video") ``` ```dart cloudinary.image('samples/cld-sample-video').transformation(Transformation() .resize(Resize.scale().width(500)) .delivery(Delivery.quality( Quality.auto())) .delivery(Delivery.format( Format.auto())) .setAssetType("video")); ``` ```swift cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setQuality("auto").chain() .setFetchFormat("auto")).generate("samples/cld-sample-video") ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .quality("auto").chain() .fetchFormat("auto")).resourceType("video").generate("samples/cld-sample-video"); ``` ```flutter cloudinary.image('samples/cld-sample-video').transformation(Transformation() .resize(Resize.scale().width(500)) .delivery(Delivery.quality( Quality.auto())) .delivery(Delivery.format( Format.auto())) .setAssetType("video")); ``` ```kotlin cloudinary.image { publicId("samples/cld-sample-video") resize(Resize.scale() { width(500) }) delivery(Delivery.quality( Quality.auto())) delivery(Delivery.format( Format.auto())) assetType("video") }.generate() ``` ```jquery $.cloudinary.image("samples/cld-sample-video", {resource_type: "video", transformation: [ {width: 500, crop: "scale"}, {quality: "auto"}, {fetch_format: "auto"} ]}) ``` ```react_native new CloudinaryImage("samples/cld-sample-video") .resize(scale().width(500)) .delivery(quality(auto())) .delivery(format(auto())) .setAssetType("video"); ```   > **Mark your progress:**: > > I know how to load a delivery URL from my product environment in a browser > I saw how my image was optimized by adding 'q_auto/f_auto' to my delivery URL > I used a resize transformation to further optimize my image > I saw the impact of optimizing a video with 'q_auto/f_auto'   I'm ready for the next step    ⇒