How to Generate an Image URL for a Website
Learn how to host an image, find its URL, add it to HTML, and fix common path, permission, HTTPS, and responsive-image problems.
Direct answer: an image URL is the address of an image file that is already hosted somewhere your visitors can reach. Upload or deploy the image first, copy its delivery address, then put that address in an HTML <img src="..."> element with useful alt text. A URL by itself does not create or store an image.
Use a relative URL when the image is deployed with your website, such as images/logo.png. Use an absolute URL when the image is served from a separate host, such as https://www.example.com/images/logo.png. The browser resolves the URL, requests the file, and displays it if the response is reachable and is an image.
1. Choose where the image will live
You have two practical routes:
- Your website or object storage: keep the file in your deployed assets or upload it to storage such as an S3 bucket. You control the path, permissions, and replacement process.
- A managed image service: upload the asset to a service such as Cloudinary, which provides delivery URLs and optional transformations. Its documented URL structure includes the cloud name, asset type, delivery type, public ID, and extension.
| Question | Self-hosted or object storage | Managed image service |
|---|---|---|
| Who controls the URL? | You control the domain, path, and deployment. | The service controls the delivery hostname and URL format. |
| How is the file uploaded? | Deploy it with your site or upload it through the storage provider. | Upload it through the provider’s dashboard or API. |
| Can the URL use HTTPS? | That depends on the endpoint. AWS S3 website endpoints are HTTP-only; AWS documents CloudFront or Amplify Hosting for HTTPS delivery. | Use the HTTPS delivery URL supplied by the service. |
| Can you resize or convert images? | Usually during your build or with your own processing pipeline. | Some services can generate transformed delivery URLs on demand. |
| What happens when a file moves? | Existing links break unless you preserve a redirect or old path. | Keep the asset identifier stable and follow the provider’s replacement/versioning rules. |
Only embed images you own or have permission to use. MDN specifically warns against pointing at another site’s image without permission because the owner can change or remove it.
2. Generate a URL from files deployed with your site
Create an asset directory beside your HTML file:
project/
├── index.html
└── images/
└── dinosaur.jpgReference the file with a relative URL:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image URL example</title>
</head>
<body>
<img
src="images/dinosaur.jpg"
alt="A dinosaur standing beside a lake"
width="1200"
height="800"
>
</body>
</html>After deploying the site, the browser turns that relative path into an address based on the page location. If the page is https://www.example.com/gallery/index.html, images/dinosaur.jpg resolves under that directory. A root-relative path such as /images/dinosaur.jpg starts at the site’s domain root.
For a fully qualified address, use:
<img
src="https://www.example.com/images/dinosaur.jpg"
alt="A dinosaur standing beside a lake"
width="1200"
height="800"
>The HTML img element requires an image source through src or srcset. Supplying intrinsic width and height lets the browser reserve space while the file loads. See the MDN img reference and MDN image guide.
3. Upload an image to object storage
Object storage follows the same pattern: upload a file, configure access for the intended audience, then use the provider’s object URL in src. Confirm the bucket, object key, region, and permissions before copying the address.
For Amazon S3 static website hosting, AWS documents URLs formed from the website endpoint and object path. Website endpoints serve publicly readable content and do not support HTTPS; use CloudFront or Amplify Hosting when HTTPS is required. File and index names are case-sensitive, so Dinosaur.jpg and dinosaur.jpg are different keys on a case-sensitive deployment.
<img
src="http://your-bucket.s3-website-us-east-1.amazonaws.com/images/dinosaur.jpg"
alt="A dinosaur standing beside a lake"
>Use your provider’s documented HTTPS delivery endpoint when available. Do not make a private object public just to make a broken page work; instead, configure a public-read policy, signed delivery URL, or application-controlled proxy that matches your access requirements. See AWS guidance for S3 website endpoints and website access permissions.
4. Generate a managed delivery URL
Cloudinary documents a basic delivery format like this:
https://res.cloudinary.com/<cloud_name>/image/upload/<public_id>.<extension>For example:
<img
src="https://res.cloudinary.com/demo/image/upload/sample.jpg"
alt="Sample image"
>Its JavaScript URL-generation flow selects an asset by public ID and calls toURL():
import { Cloudinary } from "@cloudinary/url-gen";
const cld = new Cloudinary({
cloud: { cloudName: "demo" }
});
const image = cld.image("sample");
console.log(image.toURL());Cloudinary also supports transformation parameters in delivery URLs. Keep API secrets on a trusted server; Cloudinary’s upload documentation warns not to expose the API secret in browser code. Use the provider’s supported unsigned or signed client-upload flow where appropriate. Read the Cloudinary upload documentation and transformation documentation for the current API details.
5. Use responsive image URLs
One fixed URL is enough for a basic page. For different screen sizes, provide multiple hosted files with srcset and a sizes hint:
<img
src="/images/hero-1200.jpg"
srcset="
/images/hero-480.jpg 480w,
/images/hero-800.jpg 800w,
/images/hero-1200.jpg 1200w
"
sizes="(max-width: 700px) 100vw, 1200px"
width="1200"
height="675"
alt="A mountain ridge at sunrise"
>The browser chooses among the URLs based on the rendered size and device characteristics. Every candidate URL must resolve from the deployed page, and each file should preserve the same subject and useful crop.
6. Verify that the URL works
- Open the exact URL in a private browser window.
- Check that it returns the intended image rather than an HTML error page or login screen.
- Inspect the deployed page, not only a local development path.
- Check capitalization, URL encoding, and directory depth.
- Confirm that the response is available to the users who need it and uses the required HTTPS scheme.
- Open browser developer tools and inspect the image request if it still fails.
A URL can look correct while still pointing to the wrong deployment directory. Relative paths are resolved from the current document URL, so moving a page from / to /blog/ can change what images/photo.jpg means.
7. Troubleshoot broken image URLs
| Symptom | Likely cause | Fix |
|---|---|---|
| 404 Not Found | The file is not deployed at that path, or the relative path is based on a different page directory. | Open the URL directly, compare it with the deployed file path, and use the correct ../, root-relative, or absolute URL. |
| Works locally but not after deployment | The build excludes the asset, rewrites the path, or uses case-sensitive filenames. | Inspect the production artifact and match filename case exactly. |
| 403 Forbidden | The bucket or object is private, or a signed URL has expired. | Adjust the intended read policy, issue a valid signed URL, or serve the image through an authorized backend. |
| Mixed-content warning | An HTTPS page references an HTTP image. | Use an HTTPS image endpoint, such as a CDN or HTTPS-capable hosting route. |
| Broken-image icon with status 200 | The server returned HTML, JSON, or an error document with a successful status. | Inspect the response body and Content-Type; return the actual image bytes with an image media type. |
| Wrong image after replacement | A cache still holds the old URL. | Use a versioned filename or provider-supported version identifier when replacing content. |
| Cloudinary URL fails | The cloud name, public ID, resource type, delivery type, or extension is wrong. | Copy the provider-generated delivery URL and verify the uploaded asset identifier. |
| Image is clipped or stretched | The displayed dimensions do not match the source ratio, or CSS forces a shape. | Set the correct intrinsic dimensions and use CSS such as object-fit deliberately. |
8. Performance, reliability, and cost considerations
- Keep URLs stable: changing a filename or directory breaks existing references. Preserve old paths or provide redirects when you reorganize assets.
- Reserve layout space: include accurate
widthandheightattributes so the browser can allocate the image box before download. - Choose an endpoint that matches your security needs: public pages need publicly readable delivery, while private images need signed URLs or an authenticated server path.
- Use HTTPS consistently: this avoids mixed-content failures and protects requests in transit.
- Use transformations when they solve a real need: managed services can resize or convert images through delivery URLs, but those transformations and their pricing are provider-specific.
- Check storage and delivery terms: the research sources do not establish a universal cost or speed comparison between self-hosting and managed delivery. Review the current provider pricing and limits before choosing.
- Plan for cache changes: stable, versioned URLs make browser and CDN caching predictable when an image is replaced.
9. Or skip the browser setup
If what you need is a hosted screenshot image of a webpage, ScreenshotNeo can capture the page through one API request. Save the returned image as an asset, then serve that saved file from your own site or storage so it has a normal image URL.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);See the ScreenshotNeo API documentation for request options. Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. An MCP server lets AI agents use screenshot, page-info, and PDF tools. The free plan includes 1,000 screenshots each month with no card, and paid plans start at $5 for 3,000 shots.
Create a free ScreenshotNeo account and start with 1,000 screenshots per month at no charge.
10. FAQ
Does generating an image URL upload the image?
No. The URL only identifies a file that is already hosted. Upload or deploy the file first.
Should I use a relative or absolute URL?
Use a relative URL for assets deployed with the same site. Use an absolute URL when the image is served from another host or when you need an address that is independent of the current page path.
Why does the image URL work in my browser but not in an HTML page?
Check the page’s base path, referrer or access rules, mixed-content restrictions, and whether the response is actually image data.
Can I use an image URL from another website?
Only when you have permission and the host allows it. Otherwise, host an authorized copy yourself or use a permitted image service.
Can ScreenshotNeo give me a permanent public image URL?
The API response is an image file. Save it to a host or storage service you control, then use that host’s URL in your HTML.
