Meta tags:
description=Learn how to deliver optimized images with the smallest possible file size while maintaining visual quality, for improved page load times and user experience.;

Headings (most frequently used words):

image, quality, to, and, optimize, optimization, format, automatic, how, q_auto, f_auto, the, find, assets, cloudinary, tutorial, default, sizing, media, delivery, resize, responsive, selection, set, when, delivering, an, example, tips, considerations, interactive, demo, images, documentation, index, get, started, with, install, agent, skills, video, best, practices, techniques, optimizations, analyze, improve, contents, add, every, url, dimensions, you, actually, need, deliver, sizes, metadata, stripping, console, reports, chrome, inspector, extension, error, digitalsourcetype, preservation, save, data, support, levels, toggle, chroma, subsampling, for, using, unoptimized, oversized, incorrectly, sized, mismatched, width, height, scaling,

Text of the page (most frequently used words):
the (414), and (355), image (331), video (271), transformations (168), #images (143), upload (143), sdk (142), for (121), quality (113), cloudinary (111), api (93), with (86), your (79), you (78), assets (73), media (72), transformation (69), reference (69), react (68), optimization (63), can (56), that (54), delivery (52), introduction (51), f_auto (50), q_auto (49), format (49), javascript (47), player (46), size (45), next (45), node (43), file (42), asset (42), optimize (40), visual (40), sample (39), vue (39), use (38), add (38), start (38), overview (37), automatic (37), angular (37), using (36), management (36), content (35), product (35), quick (35), this (33), formats (33), when (33), deliver (33), delivered (32), default (32), php (32), are (31), browser (30), python (29), from (28), videos (28), how (27), animated (26), resize (26), apis (26), flutter (26), configure (26), widget (25), more (24), than (24), account (24), webp (24), advanced (24), 2026 (23), best (23), crop (23), get (22), may (22), original (22), auto (22), projects (22), url (21), example (21), metadata (21), effects (21), 2023 (21), troubleshooting (21), support (20), text (20), tutorials (20), jpeg (19), user (19), android (19), tips (19), 2024 (19), started (18), see (18), data (18), settings (18), native (18), ios (18), named (18), google (18), dart (18), analysis (18), all (17), sdks (17), also (17), different (17), resizing (17), layer (17), streaming (17), detection (17), avif (16), delivering (16), files (16), options (16), set (16), remove (16), background (16), step (16), audio (16), gallery (16), accessibility (16), page (15), good (15), inspector (15), which (15), resolution (15), based (15), setting (15), not (15), but (15), svelte (15), net (15), ruby (15), rails (15), java (15), project (15), roles (15), lossy (14), scale (14), cropping (14), results (14), first (14), analyze (14), other (14), browsers (14), responsive (14), app (14), social (14), legacy (14), moderation (14), tagging (14), programmatic (14), ons (13), library (13), these (13), compression (13), extension (13), ratio (13), display (13), find (13), urls (13), search (13), type (13), each (13), supported (13), some (13), live (13), side (13), color (13), tag (13), guide (13), 2025 (13), builder (13), custom (13), smaller (12), selection (12), types (12), permissions (12), amazon (12), rekognition (12), modes (12), width (11), any (11), environment (11), notes (11), level (11), migration (11), jquery (11), cli (11), manage (11), onboarding (11), gifs (10), them (10), bandwidth (10), specific (10), lower (10), mobile (10), specifying (10), below (10), skills (10), guides (10), beta (10), delete (10), signatures (10), conditional (10), information (9), time (9), without (9), dimensions (9), only (9), console (9), possible (9), parameter (9), apps (9), its (9), requesting (9), incoming (9), encoding (9), tools (9), subsampling (9), usage (9), 100 (9), interactive (9), special (9), hints (9), generative (9), resources (9), features (9), agent (9), october (9), release (9), laravel (9), uploads (9), solutions (8), additional (8), low (8), top (8), because (8), important (8), optimizations (8), value (8), note (8), instead (8), png (8), before (8), algorithm (8), aware (8), chroma (8), removal (8), practices (8), update (8), postman (8), collections (8), references (8), imagga (8), create (8), layers (8), gravity (8), code (8), faq (7), products (7), try (7), there (7), better (7), optimizing (7), load (7), height (7), consider (7), served (7), they (7), applied (7), aren (7), such (7), web (7), plan (7), server (7), sizes (7), gif (7), cdn (7), every (7), transformed (7), result (7), save (7), has (7), jpg (7), client (7), generation (7), list (7), replace (7), picture (7), july (7), august (7), astro (7), kotlin (7), canvas (7), admin (7), workflows (7), presets (7), training (6), documentation (6), demos (6), pdfs (6), error (6), request (6), should (6), make (6), even (6), automatically (6), pages (6), website (6), being (6), issues (6), enhancement (6), less (6), users (6), here (6), still (6), while (6), improve (6), applies (6), sizing (6), full (6), download (6), generate (6), flag (6), april (6), will (6), enabled (6), control (6), core (6), various (6), eco (6), mode (6), high (6), apply (6), generated (6), extraction (6), tutorial (6), controls (6), integration (6), provisioning (6), creation (6), editor (6), transcription (6), customize (6), public (6), uploading (6), crops (6), pdf (6), basics (6), dev (6), agents (6), blog (5), pricing (5), details (5), what (5), was (5), help (5), reduce (5), over (5), right (5), identify (5), install (5), site (5), down (5), need (5), select (5), via (5), parameters (5), always (5), requested (5), html (5), large (5), often (5), graphics (5), eager (5), lossless (5), devices (5), access (5), used (5), option (5), does (5), then (5), developer (5), disabled (5), enterprise (5), own (5), following (5), noticeable (5), feature (5), already (5), sensitive (5), most (5), aggressive (5), audience (5), optimal (5), fill (5), drop (5), digitalsourcetype (5), keep (5), plans (5), fonts (5), shape (5), servers (5), rollout (5), around (5), component (5), 2022 (5), january (5), february (5), frontend (5), studio (5), config (5), profiles (5), duplicate (5), profile (5), transform (5), moderate (5), analytics (5), adaptive (5), bitrate (5), credentials (5), policy (4), contact (4), about (4), getting (4), developers (4), non (4), retail (4), commerce (4), cloud (4), email (4), want (4), review (4), convert (4), mp4 (4), displayed (4), method (4), shows (4), where (4), means (4), larger (4), uses (4), stored (4), whether (4), their (4), screen (4), click (4), could (4), like (4), check (4), after (4), many (4), learn (4), requirements (4), attributes (4), design (4), significant (4), savings (4), isn (4), just (4), system (4), platforms (4), unsupported (4), small (4), optimized (4), due (4), cases (4), rather (4), order (4), specified (4), vitals (4), added (4), human (4), override (4), behavior (4), post (4), res (4), demo (4), effect (4), impact (4), between (4), loss (4), higher (4), one (4), standard (4), cached (4), latest (4), don (4), preserved (4), element (4), srcset (4), point (4), case (4), components (4), action (4), run (4), mcp (4), june (4), september (4), november (4), starter (4), kit (4), why (4), sign (4), policies (4), assign (4), folder (4), authentication (4), failed (4), unsigned (4), changelog (4), errors (4), recipes (4), defined (4), variables (4), arithmetic (4), condition (4), conditions (4), reshaping (4), artistic (4), enhancements (4), underlays (4), watermarking (4), transforming (4), placement (4), syntax (4), placing (4), trimming (4), flags (4), face (4), padding (4), restore (4), zoompan (4), cards (4), backgrounds (4), nuxt (4), events (3), customers (3), resource (3), dam (3), rate (3), feedback (3), ways (3), functionality (3), lqip (3), rules (3), ratios (3), aspect (3), source (3), available (3), required (3), sized (3), maximum (3), filter (3), field (3), oversized (3), unoptimized (3), performance (3), experience (3), chrome (3), alternatively (3), newer (3), variety (3), reports (3), actually (3), gives (3), two (3), several (3), depends (3), much (3), device (3), performed (3), rely (3), css (3), final (3), generally (3), requires (3), changing (3), counts (3), those (3), frameworks (3), powered (3), fallbacks (3), appropriate (3), return (3), header (3), resolved (3), per (3), decides (3), same (3), selected (3), pixels (3), byte (3), storage (3), considerations (3), including (3), specify (3), depending (3), perform (3), reducing (3), since (3), definition (3), include (3), overlay (3), force (3), prevent (3), q_80 (3), follows (3), https (3), com (3), buttons (3), levels (3), barely (3), smallest (3), trade (3), off (3), eye (3), dpr (3), above (3), values (3), target (3), sites (3), traffic (3), balance (3), significantly (3), provides (3), choose (3), invalidate (3), upscaling (3), recolor (3), originals (3), except (3), attribute (3), focus (3), multiple (3), copy (3), line (3), sure (3), percentage (3), coding (3), playback (3), embed (3), key (3), setup (3), previous (3), releases (3), drupal (3), netlify (3), gatsby (3), nuxtjs (3), community (3), developed (3), libraries (3), backend (3), claimable (3), webpurify (3), viesus (3), url2png (3), screenshots (3), pixelz (3), ocr (3), microsoft (3), azure (3), indexer (3), perception (3), malware (3), translation (3), vision (3), aspose (3), document (3), conversion (3), celebrity (3), facial (3), clarity (3), adaptability (3), accessible (3), buy (3), marketplace (3), differentiators (3), counted (3), billing (3), version (3), webhook (3), notifications (3), crud (3), processing (3), customizing (3), menu (3), glossary (3), service (3), café (3), sessions (3), español (3), youtube (3), fetch (3), congrats (3), ready (3), faster (3), register (3), kickstart (3), starts (3), power (3), checks (3), privacy (2), our (2), send (2), name (2), were (2), looking (2), rating (2), webm (2), hand (2), related (2), elements (2), showing (2), appear (2), losing (2), smart (2), scaling (2), downscaled (2), upscaled (2), either (2), helps (2), incorrectly (2), total (2), bytes (2), addition (2), clicking (2), enter (2), 500 (2), button (2), extensions (2), toolbar (2), adding (2), speed (2), give (2), take (2), look (2), view (2), analyzes (2), includes (2), resized (2), limit (2), solution (2), application (2), current (2), according (2), unnecessarily (2), therefore (2), working (2), another (2), way (2), opera (2), fly (2), very (2), compared (2), acceptable (2), decoding (2), provide (2), into (2), expected (2), created (2), longer (2), together (2), efficient (2), fl_any_format (2), contains (2), transparency (2), main (2), performs (2), fits (2), allows (2), contacting (2), metric (2), however (2), cache (2), potentially (2), derived (2), single (2), potential (2), scaled (2), table (2), others (2), visitors (2), never (2), combined (2), during (2), happen (2), part (2), instruction (2), inside (2), caution (2), choosing (2), score (2), unless (2), 420 (2), 444 (2), implementing (2), luminance (2), advantage (2), separate (2), toggle (2), 228kb (2), w_600 (2), q_100 (2), beach_huts (2), have (2), initially (2), compressed (2), lost (2), process (2), factors (2), monitor (2), switch (2), networks (2), avoid (2), unnecessary (2), extra (2), 0kb (2), 9kb (2), resulting (2), link (2), huge (2), amount (2), ensuring (2), further (2), fine (2), tune (2), patented (2), produce (2), metrics (2), versions (2), currently (2), keeps (2), preservation (2), dpi (2), stripped (2), strips (2), too (2), stripping (2), strip (2), certain (2), pngs (2), breakpoints (2), both (2), practice (2), animations (2), enables (2), minimal (2), slow (2), pixel (2), well (2), purpose (2), issue (2), techniques (2), viewport (2), requirement (2), exceptions (2), guidelines (2), improving (2), assistant (2), prompt (2), dec (2), feb (2), apr (2), december (2), cloudinary_url_gen (2), package (2), active (2), attachinary (2), carrierwave (2), object (2), mixing (2), contrast (2), temporary (2), ugc (2), multi (2), channel (2), china (2), bot (2), successfully (2), rotate (2), keys (2), did (2), spike (2), migrate (2), optimizer (2), downgrade (2), recover (2), credit (2), card (2), payments (2), existing (2), cancel (2), define (2), migrating (2), saml (2), sso (2), adult (2), nsfw (2), permitted (2), naming (2), conventions (2), avoiding (2), fetched (2), underscores (2), ids (2), names (2), store (2), cookies (2), modify (2), changed (2), backups (2), provenance (2), authenticity (2), response (2), notification (2), semantic (2), structured (2), contextual (2), tags (2), expressions (2), cacheable (2), relate (2), rename (2), filemaker (2), cloud_name (2), uploaded (2), truncated (2), square (2), requests (2), rejected (2), script (2), codec (2), duration (2), missing (2), play (2), simulated (2), poster (2), frame (2), logo (2), watermark (2), white (2), looping (2), converting (2), previews (2), posters (2), rotating (2), transition (2), concatenation (2), concatenating (2), transcoding (2), shoppable (2), ads (2), monetization (2), hls (2), mpeg (2), dash (2), playlists (2), recommendations (2), customization (2), installation (2), blurry (2), sharing (2), links (2), facebook (2), detect (2), corrupted (2), placeholder (2), long (2), ttfb (2), webpagetest (2), org (2), gzip (2), title (2), archives (2), methods (2), photoshop (2), pictures (2), remote (2), dynamic (2), offset (2), position (2), solid (2), instagram (2), story (2), photo (2), horizontal (2), person (2), body (2), functions (2), models (2), refiners (2), areas (2), cutouts (2), distortion (2), displacement (2), rotation (2), rounding (2), distorting (2), vertical (2), collage (2), layouts (2), downscaling (2), shadows (2), splice (2), trim (2), complex (2), watermarks (2), overlays (2), enhance (2), abr (2), diagnosing (2), codes (2), solidjs (2), widgets (2), scripting (2), django (2), captioning (2), sanity (2), lazy (2), signature (2), interaction (2), webhooks (2), hono (2), remix (2), sveltekit (2), actions (2), drag (2), captions (2), programmatically (2), edits (2), secret (2), free (2), brand (2), capabilities (2), tech (2), stack (2), integrations (2), easyflows (2), powerflows (2), mediaflows (2), index (2), theme (2), docs (2), 698, rights, reserved, dmca, notice, terms, education, sales, technical, trust, newsroom, careers, partners, company, profits, travel, hospitality, entertainment, programmable, again, unfortunately, been, sending, assistance, open, committed, protecting, security, back, improved, thanks, submitting, got, love, hear, tell, liked, helpful, doc, sent, reading, posts, placeholders, explained, websites, beautiful, quickly, mistakes, handling, solve, quantity, holy, grail, balancing, rich, adopt, gen, codecs, dethrone, topics, stretching, squashed, stretched, differs, fit, space, hovering, separately, mismatched, greater, cause, applying, exactly, correct, column, indicates, modified, appropriately, bottom, updates, filtered, stats, minimum, average, saved, sort, heading, largest, threshold, 500000, necessary, show, benefit, optionally, filters, narrow, opportunities, impacting, sections, determine, employ, scroll, idea, insights, relative, detailed, points, understand, improvements, employing, automated, especially, big, eaters, worth, checking, catch, attention, complementary, surface, wide, biggest, consumers, pinpoint, otherwise, offers, becomes, needs, forced, least, something, close, art, displaying, 319, cost, simply, general, negligible, millisecond, doing, pre, explicit, maintaining, fl_lossy, desired, ideal, easily, consuming, outside, decode, natively, alpha, bundle, decoder, libwebp, imaging, supports, older, software, slower, measure, entering, directly, advertise, accept, effective, must, returned, environments, 2021, allow, switching, png8, any_format, transparent, emulate, testing, might, enable, defensive, economical, discuss, customer, success, manager, under, 5000, overhead, outweighs, impressions, decrease, increased, particularly, campaigns, private, directive, prevents, intermediate, caches, increase, number, provided, beneficial, 190, comparison, fetch_format, impairing, couple, address, sacrificing, poorer, furthermore, specifically, q_95, colors, luma, taking, acuity, differences, ignore, article, 600, comparable, fidelity, typically, yields, similar, q_90, vary, validate, 195, reduction, slider, beach, particular, included, saving, reaches, implications, network, optional, detects, constrained, refreshed, locally, reloads, granularity, append, raises, 6kb, 569kb, photograph, encoded, thumbnail, slightly, popular, relatively, generates, bigger, photography, adjustments, reflects, leadership, technology, protected, patent, 602, 838, intelligently, innovation, intelligent, viewing, minimizing, automates, versus, decision, perceptual, heuristics, analyzing, individually, precise, adjustment, complemented, tuning, degradation, few, adjusting, output, powerful, half, little, visually, difference, entails, ultimate, defines, introduced, regenerated, altered, e_upscale, c2pa, e_gen_replace, e_gen_remove, e_gen_recolor, c_pad, b_gen_fill, e_gen_background_replace, e_dropshadow, shadow, e_extract, e_background_removal, describes, reads, tiff, heic, heif, read, psd, raw, wdp, limitations, preserve, kept, iptc, digital, vocabulary, fl_force_strip, xmp, records, captured, camera, preserving, meet, act, meta, effectively, fields, exist, shouldn, intact, copyright, gets, fl_keep_attribution, fl_keep_iptc, colorspace, yresolution, xresolution, resolutionunit, jfifversion, associated, recommend, weight, affect, remains, unchanged, ability, let, through, determined, mind, contain, lot, cameras, applications, completely, along, sometimes, independent, fraction, corresponding, css3, markup, vectors, geometric, sharp, zoom, vector, svg, property, priority, services, logic, making, logos, designers, realize, cumulative, misses, out, valuable, form, meaning, discard, work, quite, lowest, resolutions, photographs, fear, retina, expect, speeds, problem, summarizes, addressing, labor, intensive, implement, involves, yield, overall, expectations, generating, match, density, dpr_auto, w_auto, serve, desktop, across, widths, 1280, 853, 333, happens, aside, purposes, changes, c_scale, relying, whenever, downloads, needed, chain, workflow, warm, matching, t_square, exact, modifications, photographer, displays, watermarked, purchasing, predefined, etc, f_jpg, f_png, intentionally, would, tuned, rare, manual, brings, nearly, identical, despite, causes, receive, doesn, matter, separating, slash, comma, tip, delivers, noted, equivalent, section, highlights, follow, covered, rest, linked, contents, transcript, brought, navigate, interest, preferred, language, subtitles, chapters, watch, instantly, covers, quickest, last, updated, oct, repo, github, class, context, paste, sets, installs, configures, validates, markdown, llm, discover, exploring, complete, llms, txt, dark, light, ask, navigation, now, new, plus,

Text of the page (random words):
nary 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 picture 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 check which browser is making the request and deliver different formats for different browsers using the picture 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 web fonts can sometimes be used to produce resolution independent resources at a fraction of the size of the corresponding image 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 copy 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 design 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 design use the picture 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 default optimizations cloudinary performs various default optimizations when delivering media assets you can control these for your product environment in the optimization settings and override them through transformation parameters certain plans include the ability to optimize format and size by default see optimize by default all plans let you optimize image quality by default and strip metadata note each of the default optimizations affect only the delivered image the original image file remains unchanged default image quality the default image quality setting is applied to all images except pngs and pdfs delivered from your product environment but only if other transformations are also applied this applies a certain amount of compression to your images in order to reduce the weight of the image we recommend choosing an automatic quality setting to apply to all your transformed images rather than a specific quality level you can also choose to apply chroma subsampling by default to all your transformed images to override the default settings set the quality parameter in your transformation q_ in urls metadata stripping when you deliver an image from cloudinary with any transformation applied cloudinary strips all associated metadata from the transformed image file except the following jfifversion resolutionunit xresolution yresolution colorspace dpi digitalsourcetype see digitalsourcetype preservation 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 cloudinary strips metadata from delivered videos too for details see metadata stripping in the video optimization guide note when automatic quality q_auto in urls is applied to the delivered image either due to the default image quality setting or as a url transformation parameter the dpi and resolution metadata are also effectively stripped the fields exist but you shouldn t rely on the values to prevent this behavior provide a quality value in the delivery url such as q_80 digitalsourcetype preservation the digitalsourcetype xmp tag records how an image was created for example whether it was captured by a camera or generated by ai preserving it can help meet transparency requirements such as those in the eu ai act and platforms such as google and meta use it to identify ai generated content if your original image contains a digitalsourcetype tag cloudinary keeps it in transformed images by default you don t need to add a flag to preserve it and it s kept even when you use fl_force_strip only values from the iptc digital source type vocabulary are preserved the following limitations apply supported original formats cloudinary reads the tag from jpg png tiff avif and heic heif originals it isn t currently read from gif webp jpeg xl psd raw or wdp originals supported delivery formats the tag is preserved when you deliver the image as jpg or png other delivery formats such as avif webp and jpeg xl aren t currently supported images only the tag isn t preserved for videos transformations that generate ai content these transformations remove the tag from the delivered image because the original s value no longer describes the result the following transformations remove the tag background removal e_background_removal content extraction e_extract drop shadow e_dropshadow generative background replace e_gen_background_replace generative fill b_gen_fill with c_pad generative recolor e_gen_recolor generative remove e_gen_remove generative replace e_gen_replace this list follows the c2pa definition of ai altered content some ai based transformations aren t on it for example upscaling e_upscale so the tag is preserved when you apply them note derived images that were generated before this behavior was introduced don t include the tag to add it invalidate the cached versions so that they re regenerated when next requested how to optimize image quality the image quality setting defines the compression level to apply to an image 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 web vitals score there are a few ways to control the quality of images delivered from cloudinary set the default quality for your product environment use automatic quality selection q_auto set the quality when delivering an image automatic quality selection q_auto 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 patented innovation q_auto reflects cloudinary s leadership in media optimization its latest generation uses cloudinary s patented image optimization technology protected by u s patent no 12 602 838 to intelligently balance visual quality and file size for each image to perform automatic quality selection and image encoding adjustments set the quality transformation parameter to auto q_auto in urls or apply one of the automatic options as the default image quality setting for your product environment 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 social networks with a huge amount of traffic 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 link to higher quality images here is an example of a photograph encoded using various automatic quality parameter values and the resulting file sizes original 569kb q_auto best 65 9kb q_auto good 56 9kb q_auto eco 45 0kb q_auto low sensitive 39 6kb q_auto low 35 0kb q_auto tips and considerations for extra granularity you can append sensitive to the quality selection which raises the quality above that level but below the level above for example q_auto good sensitive gives a quality level above good but not as good as the best level q_auto sensitive is the same as q_auto good sensitive network aware delivery optional if your app detects constrained networks you can request lower dimensions set dpr to 1 0 or reduce q_ for refreshed images avoid changing urls for assets already cached locally to prevent unnecessary reloads save data support 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 this feature has implications for using q_auto in named transformations interactive demo automatic image quality the interactive image example below shows the effect that the various auto 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 https res cloudinary com demo image upload w_600 q_100 beach_huts jpg quality 100 size 228kb auto low auto eco auto good auto best 100 see also q_auto for video set the quality when delivering an image if you want more control over the quality of an image then you can set a specific level for the quality parameter q in urls specify 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 for example reducing the quality of the following image to 70 results in a file size of 69 kb compared to the original file size of 195 kb with a barely noticeable reduction in visual quality the lower quality image is on the right of the slider note for comparable visual fidelity webp q_80 typically yields results similar to jpeg q_90 often at a smaller file size since results vary by content validate using your own assets when appropriate consider using q_auto interactive demo image quality levels 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 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 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 post 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 toggle chroma subsam...