{"id":32897,"date":"2024-03-01T07:00:00","date_gmt":"2024-03-01T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=32897"},"modified":"2025-02-16T10:04:21","modified_gmt":"2025-02-16T18:04:21","slug":"embedding-images-html","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/embedding-images-html","title":{"rendered":"Embedding Images in HTML Via Cloudinary"},"content":{"rendered":"\n<p>If your website has slow-loading images, visitors are more likely to click off, increasing bounce rates and negatively impacting search engine ranking. Read how you can optimize, transform, and deliver your images with Cloudinary to improve user engagement and site performance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Getting Started With Cloudinary<\/h2>\n\n\n\n<p>To get started, we\u2019ll need an account. You can <a href=\"https:\/\/cloudinary.com\/users\/register_free\">sign up for a free account<\/a> with Cloudinary to give you access to everything you need to follow along. After signing up, you&#8217;ll have access to your Cloudinary Console, which serves as your media asset control center. It\u2019ll look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/CTknDil4NTYAQYn4GOxooR2kLmyt2ugyjVOsjKRXYeKJ6oij8Sqgo4FImToEgR8Jvdv8lBuvZC5-ZMABlZKXHbgjmfLJ3LPKYBpE-4TW4iwFE-MYXLux1xuvGzo7sD7sqjhYgq0GaEv_fe4EF3mckYM\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Obtaining API Keys<\/h3>\n\n\n\n<p>To integrate Cloudinary into your web applications, you&#8217;ll need API and secret keys. You only need your Cloud Name for front-end applications. These credentials can be found in the &#8220;Product Environment Credentials&#8221; section of your Cloudinary Dashboard.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/y3ShiwZZLaKcCfBEwv5SZ48pqS84yACOFNOfYyiyz3vzsTvBZE8bspvYrGCT8bCVOg62cOZrwJdVe8lSCKBCr5v_93qIDFK2RY1DyfkGRpo31OhmtYBCdJvuJnTmKsAGHLpkoPMXRKQd9nWV88CasgM\" alt=\"\"\/><\/figure>\n\n\n\n<p>These keys serve as the bridge between your application and Cloudinary, facilitating secure and efficient communication.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cloudinary SDKs<\/h3>\n\n\n\n<p>Cloudinary provides <a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_sdks\">software development kits (SDKs)<\/a> to provide a seamless integration experience. These kits support a range of programming languages and frameworks, providing a solid basis for implementing Cloudinary&#8217;s Programmable Media into server and client-side applications.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/ZfuxuOB5VaKFrhTRidCw36bK1U69ucD2wCDsnrPhNJYH-loRPIlqIL2_CIjaZZ2MB9ne6rPy6tBqfQWlBcBLoMQhBqUCjoWQuGqsXZxq5mKvyhXyofgrzJzA4QFkl0te_zu8kUCDAe94Z6JnhyFex38\" alt=\"\"\/><\/figure>\n\n\n\n<p>After you&#8217;ve obtained your API credentials, the next step is to integrate Cloudinary into your project. Cloudinary provides comprehensive documentation and code samples for numerous programming languages, whether you&#8217;re using a web framework or starting from scratch.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Embedding Images in HTML<\/h2>\n\n\n\n<p>When embedding images in HTML, Cloudinary&#8217;s URL-based method provides a seamless way to manipulate and optimize images on the fly. These URLs contain the specified asset&#8217;s public ID and optional transformation parameters. The public ID is an identifier that Cloudinary assigns automatically or is defined during the asset upload process.&nbsp;<\/p>\n\n\n\n<p>The following is the default Cloudinary asset delivery URL structure:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">https:\/\/res.cloudinary.com\/<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cloud_name<\/span>&gt;<\/span>\/<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">asset_type<\/span>&gt;<\/span>\/<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">delivery_type<\/span>&gt;<\/span>\/<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">transformations<\/span>&gt;<\/span>\/<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">version<\/span>&gt;<\/span>\/<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">public_id<\/span>&gt;<\/span>.<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">extension<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>While we won\u2019t be going over everything here, you can check out their <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations\">documentation on image transformations<\/a> for more information.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Basic Image Embedding<\/h3>\n\n\n\n<p>To embed a basic image in HTML, you can use the <code>&lt;img&gt;<\/code> tag with the <code>src<\/code> attribute set to the Cloudinary URL of the image.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/codelife\/image\/upload\/v1621712847\/octocat.png\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Sample Image\"<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In this example, the Cloudinary URL structure can be divided into:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>https:\/\/res.cloudinary.com<\/code> is the base URL.<\/li>\n\n\n\n<li><code>codelife\/<\/code> is my product environment name, and it should be replaced with your actual cloud name.<\/li>\n\n\n\n<li><code>image\/<\/code> is the asset type.<\/li>\n\n\n\n<li><code>upload\/<\/code> indicates the delivery or storage method. In this case, I uploaded the image to Cloudinary.<\/li>\n\n\n\n<li><code>v1702248521\/<\/code> is a version parameter that ensures the correct version of the specific image you want to embed.<\/li>\n\n\n\n<li><code>sample.jpg<\/code> is the name of the image file.<\/li>\n<\/ul>\n\n\n\n<p>Here\u2019s what the image looks like in the browser:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/8ntW5rECTMRJWU6x6_HMEb94l9o0YVwL2ULOpZLDrlq5KAoAvq1eCZBfa4NTS1aHJB-jhY9N3tgZX4c4dlJ7zKckNZ9DnhHPQsjNDBzcYMRStQPPnzLcjc753llTbPk2NgNnxOAH6GswMnSSet5FBnA\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Image Transformations<\/h3>\n\n\n\n<p>Cloudinary allows dynamic image transformations by appending transformation parameters to the image URL. For example, you can resize an image using the <code>w<\/code> (width) and <code>h<\/code> (height) parameters:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/codelife\/image\/upload\/w_800,h_500\/v1621712847\/octocat.png\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Resized Image\"<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In this code snippet, we included a new URL parameter:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>w_800,h_500\/<\/code> sets the width and height of the image to 800 and 500 pixels, respectively. These are transformation parameters that dynamically resize the image.<\/li>\n<\/ul>\n\n\n\n<p>Here\u2019s what the image looks like in the browser:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/zdvMvlh0OTNcCmpSi1L_K6KYnLGoMk3eJAcbzwh_0_-W5J7vxRTjcySSXeCHxa-ZFf_oJ--Uo27ogNbZdsDVehfmjv595AqpaPPTepSTM0jFmhj4LxBaQTysA9Kf3-VPF0t24FcasK3DV0vcgZII8ys\" alt=\"\"\/><\/figure>\n\n\n\n<p>Adjusting the gravity parameter helps control the cropping focus. This is useful when resizing images to ensure the most essential elements are retained.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/codelife\/image\/upload\/w_800,h_500,c_fill,g_face\/v1621712847\/octocat.png\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Cropped Image with Face Gravity\"<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In this code snippet, we included a new URL parameter to crop the image:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>c_fill<\/code> indicates a crop operation, filling the specified dimensions while maintaining the image&#8217;s aspect ratio.<\/li>\n\n\n\n<li><code>g_face<\/code> sets the gravity to the face, ensuring that important facial features are preserved during cropping.<\/li>\n<\/ul>\n\n\n\n<p>Here\u2019s the output:<\/p>\n\n\n\n<p class=\"has-text-align-center\"><br><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"431\" src=\"https:\/\/lh7-us.googleusercontent.com\/jPiy_CQ6FIbNuZXxzOKS2MSry3AYVLaYiJShDeVPijPKV607YJbIIgNml7hGjIxDnq0AwKrYOEHu11IMPitcOPIe1VP9qQgIbswtx9S-R1-FmBSu3SJ9013m_lXcBvITbxAQqkfeZSOdN-sTSUfXpBM\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced Image Embedding Techniques<\/h2>\n\n\n\n<p>Aside from transformation and optimization, there are other ways to improve your user experience and your site&#8217;s overall performance with Cloudinary, such as lazy loading and compression.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Lazy Loading With Cloudinary<\/h3>\n\n\n\n<p>Lazy loading is a method that defers image loading until the image is about to be displayed on the user&#8217;s screen. Web developers may speed up the initial page load time by implementing lazy loading, which is especially useful for content-heavy websites.&nbsp;<\/p>\n\n\n\n<p>This method prioritizes image loading within the user&#8217;s viewport, resulting in a faster and more seamless browsing experience. Other images are loaded on-demand as users scroll through a page, optimizing performance and bandwidth usage.<\/p>\n\n\n\n<p>To implement lazy loading with Cloudinary, you can use the <code>loading<\/code> attribute in the <code>img<\/code> tag:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">loading<\/span>=<span class=\"hljs-string\">\"lazy\"<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/&lt;cloud_name&gt;\/image\/upload\/&lt;public_id&gt;.&lt;extension&gt;\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Description\"<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>loading=\"lazy<\/code> attribute tells the browser to load the image lazily, improving initial page load performance.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Compressing Images with Cloudinary<\/h3>\n\n\n\n<p>Another way to optimize your images is through compression methods, which Cloudinary can perform by default. Web developers can significantly reduce file sizes by converting photos to WebP or other optimal formats without sacrificing visual quality. End users benefit from faster loading times and decreased bandwidth usage.<\/p>\n\n\n\n<p>Cloudinary makes it simple to deliver images in several formats, including WebP. The <code>f_auto<\/code> argument can be used to choose the best possible format based on the user&#8217;s browser. To deliver images in WebP format, you can use:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/&lt;cloud_name&gt;\/image\/upload\/f_auto,fl_awebp\/&lt;public_id&gt;.webp\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Description\"<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In the example above, <code>f_auto<\/code> determines the best format automatically, and <code>fl_awebp<\/code> ensures that Cloudinary delivers the image in <a href=\"https:\/\/cloudinary.com\/tools\/compress-webp\">WebP<\/a> format if the browser supports it. Cloudinary does on-the-fly format conversion, optimizing the image for better compression and faster loading.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Security Considerations<\/h2>\n\n\n\n<p>To prevent unwanted access and secure sensitive content, embedding images in HTML requires careful consideration of security measures. When dealing with user data, adhering to best security practices is critical. Here are some best practices you can adopt when using Cloudinary to embed images in your web application:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Access control policies<\/strong>. Create strict access control policies based on user roles and permissions to limit image access. Cloudinary gives you complete control over who can see the images you upload.<\/li>\n\n\n\n<li><strong>Authentication tokens<\/strong>. Implement authentication tokens via the server application to validate user identity before serving images to prevent unauthorized users from accessing sensitive content.<\/li>\n\n\n\n<li><strong>Using signed URLs<\/strong>. Signed URLs are a powerful security feature provided by Cloudinary, enhancing the protection of embedded images. A signed URL includes a signature that verifies the request&#8217;s authenticity, ensuring that only authorized users can access the requested image.<\/li>\n<\/ul>\n\n\n\n<p><br>Here\u2019s an example of how to use Cloudinary to generate a signed image URL:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> cloudinary = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'cloudinary'<\/span>).v2;\n\n<span class=\"hljs-comment\">\/\/ Configure Cloudinary with your credentials<\/span>\ncloudinary.config({\n  <span class=\"hljs-attr\">cloud_name<\/span>: <span class=\"hljs-string\">'&lt;your_cloud_name&gt;'<\/span>,\n  <span class=\"hljs-attr\">api_key<\/span>: <span class=\"hljs-string\">'&lt;your_api_key&gt;'<\/span>,\n  <span class=\"hljs-attr\">api_secret<\/span>: <span class=\"hljs-string\">'&lt;your_api_secret&gt;'<\/span>\n});\n\n<span class=\"hljs-comment\">\/\/ Generate a signed URL for an image<\/span>\n<span class=\"hljs-keyword\">const<\/span> signedUrl = cloudinary.url(<span class=\"hljs-string\">'&lt;public_id&gt;'<\/span>, {\n  <span class=\"hljs-attr\">secure<\/span>: <span class=\"hljs-literal\">true<\/span>,\n  <span class=\"hljs-attr\">signature<\/span>: cloudinary.utils.api_sign_request({ <span class=\"hljs-attr\">public_id<\/span>: <span class=\"hljs-string\">'&lt;public_id&gt;'<\/span> }, <span class=\"hljs-string\">'&lt;your_api_secret&gt;'<\/span>)\n});\n\n<span class=\"hljs-comment\">\/\/ Use the signed URL in your HTML<\/span>\n<span class=\"hljs-built_in\">console<\/span>.log(signedUrl);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Private CDNs<\/strong>. Consider using a private CDN with Cloudinary for extra security. A private CDN allows you to customize the domain name used for delivery URLs, which improves security by concealing the source of the images.<br><br>You can use private CDN distribution instead of using the default, Cloudinary shared CDN <code>https:\/\/res.cloudinary.com\/\u2026<\/code>. For example: <a href=\"https:\/\/prod-res.cloudinary.com\/%E2%80%A6\"><code>https:\/\/prod-res.cloudinary.com\/\u2026<\/code><\/a>. Alternatively, Cloudinary allows you to use a custom CNAME. So you can use a format like this: <code>https:\/\/&lt;your custom domain name&gt;\/image\/upload...<\/code>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Developers can create faster, more efficient websites by leveraging Cloudinary&#8217;s advanced features like automatic image optimization, responsive design support, and intelligent format selection. This leads to improved user experiences, higher engagement rates, and better SEO rankings.<\/p>\n\n\n\n<p><a href=\"https:\/\/cloudinary.com\/users\/register_free\">Start optimizing and transforming<\/a> your website&#8217;s images with Cloudinary today for a notable improvement in your site&#8217;s performance.<\/p>\n\n\n\n<p>If you found this blog post helpful and want to discuss it in more detail, head over to <a href=\"https:\/\/community.cloudinary.com\/\">Cloudinary Community forum<\/a> and its associated <a href=\"https:\/\/discord.com\/invite\/cloudinary\">Discord<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If your website has slow-loading images, visitors are more likely to click off, increasing bounce rates and negatively impacting search engine ranking. Read how you can optimize, transform, and deliver your images with Cloudinary to improve user engagement and site performance. Getting Started With Cloudinary To get started, we\u2019ll need an account. You can sign [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":32904,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[165],"class_list":["post-32897","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image-transformation"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Embedding Images in HTML Via Cloudinary<\/title>\n<meta name=\"description\" content=\"Read how you can optimize, transform, and deliver your images with Cloudinary to improve user engagement and site performance.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/embedding-images-html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Embedding Images in HTML Via Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Read how you can optimize, transform, and deliver your images with Cloudinary to improve user engagement and site performance.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/embedding-images-html\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-01T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-16T18:04:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1708730547\/embedding_images_html-blog\/embedding_images_html-blog-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/embedding-images-html#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embedding-images-html\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Embedding Images in HTML Via Cloudinary\",\"datePublished\":\"2024-03-01T15:00:00+00:00\",\"dateModified\":\"2025-02-16T18:04:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embedding-images-html\"},\"wordCount\":1162,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embedding-images-html#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708730547\/embedding_images_html-blog\/embedding_images_html-blog.jpg?_i=AA\",\"keywords\":[\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/embedding-images-html\",\"url\":\"https:\/\/cloudinary.com\/blog\/embedding-images-html\",\"name\":\"Embedding Images in HTML Via Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embedding-images-html#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embedding-images-html#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708730547\/embedding_images_html-blog\/embedding_images_html-blog.jpg?_i=AA\",\"datePublished\":\"2024-03-01T15:00:00+00:00\",\"dateModified\":\"2025-02-16T18:04:21+00:00\",\"description\":\"Read how you can optimize, transform, and deliver your images with Cloudinary to improve user engagement and site performance.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embedding-images-html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/embedding-images-html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/embedding-images-html#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708730547\/embedding_images_html-blog\/embedding_images_html-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708730547\/embedding_images_html-blog\/embedding_images_html-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/embedding-images-html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Embedding Images in HTML Via Cloudinary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Embedding Images in HTML Via Cloudinary","description":"Read how you can optimize, transform, and deliver your images with Cloudinary to improve user engagement and site performance.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/embedding-images-html","og_locale":"en_US","og_type":"article","og_title":"Embedding Images in HTML Via Cloudinary","og_description":"Read how you can optimize, transform, and deliver your images with Cloudinary to improve user engagement and site performance.","og_url":"https:\/\/cloudinary.com\/blog\/embedding-images-html","og_site_name":"Cloudinary Blog","article_published_time":"2024-03-01T15:00:00+00:00","article_modified_time":"2025-02-16T18:04:21+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1708730547\/embedding_images_html-blog\/embedding_images_html-blog-jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/embedding-images-html#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/embedding-images-html"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Embedding Images in HTML Via Cloudinary","datePublished":"2024-03-01T15:00:00+00:00","dateModified":"2025-02-16T18:04:21+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/embedding-images-html"},"wordCount":1162,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/embedding-images-html#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708730547\/embedding_images_html-blog\/embedding_images_html-blog.jpg?_i=AA","keywords":["Image Transformation"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/embedding-images-html","url":"https:\/\/cloudinary.com\/blog\/embedding-images-html","name":"Embedding Images in HTML Via Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/embedding-images-html#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/embedding-images-html#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708730547\/embedding_images_html-blog\/embedding_images_html-blog.jpg?_i=AA","datePublished":"2024-03-01T15:00:00+00:00","dateModified":"2025-02-16T18:04:21+00:00","description":"Read how you can optimize, transform, and deliver your images with Cloudinary to improve user engagement and site performance.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/embedding-images-html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/embedding-images-html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/embedding-images-html#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708730547\/embedding_images_html-blog\/embedding_images_html-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708730547\/embedding_images_html-blog\/embedding_images_html-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/embedding-images-html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Embedding Images in HTML Via Cloudinary"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708730547\/embedding_images_html-blog\/embedding_images_html-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32897","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=32897"}],"version-history":[{"count":7,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32897\/revisions"}],"predecessor-version":[{"id":36849,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32897\/revisions\/36849"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/32904"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=32897"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=32897"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=32897"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}