How to Create a Direct Image URL for a Website or Blog

A direct image URL is the web address that points straight to an image file, such as a .jpg, .png, .webp, .gif, .svg, or .avif. It can be placed in an HTML src attribute, Markdown image syntax, social-media metadata, email templates, or website builders.

If you want to know how to create image URL links, the process is simple: upload the image to a service that allows public file access, copy the file's URL—not the surrounding webpage URL—and test it in a private browser window.

This guide explains the safest and most practical methods for bloggers, students, small businesses, and website owners in India.

Key Takeaways

• A direct image URL opens the image file itself, not a gallery, preview page, or login screen.
• WordPress users can copy the file URL directly from the Media Library.
• GitHub's "Raw" link can serve public repository images, but it is better suited to projects and documentation than high-traffic commercial websites.
• Cloudinary and your own web hosting provide more control over delivery, resizing, and long-term management.
• Test every URL with HTTPS, a private browser window, and an HTML or Markdown embed.
• Never use images without checking copyright, licence, and hotlinking restrictions.

What Is a Direct Image URL?

A direct image URL identifies the image resource on a server. For example:

`text

https://example.com/images/indian-breakfast.webp

`

When opened in a browser, it should display only the image or download it. A webpage URL looks different:

`text

https://example.com/gallery/indian-breakfast

`

The second address may contain menus, advertisements, scripts, and other images. It is not normally suitable for an HTML src attribute.

The HTML <img> element uses the src attribute to specify the image location. The URL can be absolute, including the full domain, or relative to your own website. The alt attribute provides a text alternative for accessibility. MDN's <img> reference explains that at least one src or srcset source is required.

`html

<img

src="https://example.com/images/indian-breakfast.webp"

alt="South Indian breakfast served on a banana leaf"

width="1200"

height="800">

`

Direct Image URL vs Image-Page URL

Before copying a link, identify what it opens.

A URL ending in an image extension is often a useful clue, but it is not a guarantee. Some content-delivery systems omit extensions or add query parameters. The reliable test is whether the address returns the image file without requiring an account.

Method 1: Create an Image URL in WordPress

WordPress is usually the easiest option for bloggers because the Media Library automatically creates a file address when you upload an image.

Steps in WordPress

1. Sign in to your WordPress dashboard.
2. Open Media and choose Library.
3. Upload a new image, or select an existing image.
4. Open the image details.
5. Find the File URL field.
6. Select Copy URL to clipboard.

WordPress.com documents that an uploaded file receives a unique URL, commonly containing the site address, wp-content/uploads, the upload year and month, and the filename. WordPress.com's file URL guide provides the current dashboard workflow.

A typical address may look like:

`text

https://yourblog.in/wp-content/uploads/2026/08/monsoon-travel-guide.jpg

`

Use the copied address in HTML:

`html

<img

src="https://yourblog.in/wp-content/uploads/2026/08/monsoon-travel-guide.jpg"

alt="Monsoon travel guide for Kerala">

`

WordPress considerations

• Renaming the file on your computer and uploading it again creates a different URL.
• If you delete the original media item, links using that address may stop working.
• Use descriptive filenames, such as diwali-home-decoration.webp, instead of IMG_4821.jpg.
• Keep the website and image URL on HTTPS.
• If your WordPress site uses an image-optimization plugin or CDN, check which URL is intended to remain publicly accessible.

Method 2: Create a Direct Image URL with GitHub

GitHub can host public images inside a repository. This is useful for developers, documentation, portfolios, static websites, and small personal projects.

Steps

1. Create or open a public GitHub repository.
2. Select Add file and choose Upload files.
3. Upload the image to a folder such as images or assets.
4. Commit the change.
5. Open the image file in the repository.
6. Select Raw.
7. Copy the URL from the browser.

GitHub's documentation confirms that files can be uploaded and committed to a repository. GitHub's file-upload documentation and its Markdown guidance describe using uploaded assets in documents. GitHub Markdown syntax

A raw URL generally follows this pattern:

`text

https://raw.githubusercontent.com/USERNAME/REPOSITORY/BRANCH/images/photo.png

`

Do not use the normal repository page URL containing /blob/ when an external website needs the file itself.

GitHub limitations

• The repository must be public for unauthenticated visitors to load the image.
• Moving or renaming the file changes the URL.
• Repository files are version-controlled, so they are not a replacement for a dedicated image CDN for a busy commercial blog.
• Do not upload private, confidential, or personal documents.
• Check the repository's licence before reusing images from someone else.

Method 3: Create an Image URL with Cloudinary

Cloudinary is designed for storing and delivering media through URLs. After uploading an image, it assigns a public ID that can be used to build a delivery address. Its documentation shows the general format:

`text

https://res.cloudinary.com/CLOUD_NAME/image/upload/PUBLIC_ID.EXTENSION

`

For example:

`text

https://res.cloudinary.com/demo/image/upload/blog/kerala-backwaters.jpg

`

Cloudinary's image-transformation documentation explains that delivery URLs can include optional transformations for resizing, cropping, and format conversion.

Basic workflow

1. Create a Cloudinary account and product environment.
2. Upload the image through the Media Library or an upload workflow.
3. Assign a readable public ID, if appropriate.
4. Copy the generated delivery URL.
5. Test the address in a browser and in your website code.

Cloudinary URLs can also request a specific format or transformation. For example, a transformation may deliver a smaller version for mobile visitors. Keep the original URL or a stable versioned URL when you need long-term references.

Do not expose API secrets in client-side code. Server-side uploads and unsigned browser uploads use different security arrangements; follow Cloudinary's upload documentation for your chosen method.

Method 4: Use Your Own Web Hosting

If you have hosting from a provider, you can upload images through a control panel, SFTP, or your hosting account's file manager.

Steps

1. Create an organised folder, such as /images/.
2. Upload the image file.
3. Confirm that the folder is publicly accessible.
4. Combine your domain and file path:

`text

https://yourdomain.in/images/product-red-kurta.jpg

`

1. Open the URL directly to confirm it works.

Use lowercase filenames, hyphens instead of spaces, and predictable folders. Avoid changing filenames after publishing unless your server redirects the old address to the new one.

For a static website, a relative path may also work:

`html

<img src="/images/product-red-kurta.jpg" alt="Red kurta">

`

An absolute URL is more convenient when sharing the image with another site, email platform, or social-media tool.

How to Check Whether an Image URL Works

Use these tests before publishing:

1. Paste the URL into a new browser tab.
2. Open it in a private or incognito window while logged out.
3. Confirm that the image appears without a login prompt.
4. Check that the address begins with https://.
5. Embed it in a simple HTML file or Markdown preview.
6. Test on a mobile connection as well as Wi-Fi.
7. If possible, use browser developer tools to check that the request returns successfully.

A working URL may still fail on another website because of access controls, expired tokens, referrer restrictions, content-security policies, or hotlink protection.

Add the URL to HTML, Markdown, and Social Metadata

HTML

`html

<img

src="https://cdn.example.com/images/tea-gardens.webp"

alt="Tea gardens in Munnar"

width="1600"

height="1067"

loading="lazy">

`

Use loading="lazy" for non-critical images lower on the page. Keep the main, above-the-fold image available immediately when appropriate.

Markdown

`markdown

!Tea gardens in Munnar

`

Responsive images

For different screen sizes, provide multiple files with srcset:

`html

<img

src="https://cdn.example.com/images/tea-gardens-800.webp"

srcset="

https://cdn.example.com/images/tea-gardens-800.webp 800w,

https://cdn.example.com/images/tea-gardens-1600.webp 1600w"

sizes="(max-width: 600px) 100vw, 800px"

alt="Tea gardens in Munnar">

`

MDN documents how browsers select an appropriate source from srcset and sizes. MDN responsive image guidance

For social sharing, the page—not only the image—needs metadata such as:

`html

<meta property="og:image"

content="https://cdn.example.com/images/tea-gardens.webp">

`

SEO, Accessibility, and Performance Best Practices

Google Search supports images referenced in img elements in BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF formats. It recommends descriptive filenames, useful alt text, relevant surrounding content, and accessible image URLs. Google Search Central's image SEO guidance

Follow these practices:

• Describe the image accurately in alt; do not stuff keywords.
• Use a concise, descriptive filename.
• Resize images to the dimensions actually displayed.
• Compress large files and choose an appropriate format.
• Include width and height to reduce layout movement.
• Keep important images crawlable and free from login requirements.
• Use captions when additional context benefits readers.
• Confirm that the image licence permits commercial or editorial use in India.
• Preserve stable URLs for images already indexed or used in campaigns.

Common Problems and Fixes

The link opens a webpage

Copy the file's Raw, File URL, or Direct link option. Do not copy the address from a gallery or preview page.

The image works for you but not visitors

Check privacy settings, expiration dates, domain restrictions, and whether the host requires a login.

The image is broken after moving it

Moving, renaming, deleting, or replacing a file can change its address. Update references or create a redirect where your hosting platform supports one.

The URL contains spaces

Spaces and special characters can be encoded, but simple lowercase filenames with hyphens are more reliable:

`text

festival-guide-2026.jpg

`

You copied a blob: URL

A blob: address is generated inside a browser session. MDN states that object URLs are intended for in-memory resources and should be released with URL.revokeObjectURL() when no longer needed. MDN blob URL documentation Upload the image to permanent hosting instead.

Frequently Asked Questions

Conclusion

To create an image URL, upload the file to WordPress, your own hosting, GitHub, or a dedicated media CDN, then copy the address that points directly to the image file. Confirm it works while logged out, use HTTPS, and place it in the src attribute or Markdown image syntax.

For an India-focused blog, WordPress Media Library is usually the quickest choice, while Cloudinary or your own CDN offers more control as traffic grows. Use descriptive filenames, accurate alt text, appropriate compression, and only properly licensed images. These steps give you image links that are easier to reuse, maintain, and optimise for search.