How a Modern Image Service Handles a User Click: From DNS to CDN

Architecture Flow Example

This is a typical architecture diagram; we use it to discuss basic concepts.

Assume a user searches for “森林里浓雾和阳光” and clicks a link to an image site, opening an image detail page. The page includes:

Main image

Image information such as title, author, description, tags, comments

Related similar images

User information

From the click to the final rendered page, the following steps occur:

The browser requests the DNS server to resolve the domain to an IP address.

The request reaches the load balancer.

The load balancer selects a web server and forwards the request.

The web server retrieves common image data from cache and other details from the database.

If the image needs processing (e.g., color adjustment), a task is placed in a queue; a worker server consumes and processes the task.

The web server queries the full‑text search service for related images.

If the user is logged in, the account service provides detailed user information.

All required data is now available; the web server assembles the HTML page.

A page‑view event is sent to the streaming data system, flowing into cloud storage and a data warehouse for analytics.

The web server returns the HTML (including JS and CSS) through the load balancer.

JS and CSS assets are stored in cloud storage, linked to a CDN, so the browser loads them directly from the CDN.

The browser renders the page for the user.

Core Components

1. DNS

Domain Name System provides domain‑to‑IP resolution, e.g., google.com → 85.129.83.120.

2. Load Balancer

Requests first hit the load balancer, which selects one of many identical web servers to handle the request and then returns the response.

3. Web Server

Handles incoming requests, executes business logic, and calls downstream services such as databases, cache, queues, search, other services, and logging.

4. Database

Can be SQL, NoSQL, or a hybrid.

5. Cache

Key/value store for fast access, e.g., caching frequent search results or articles.

6. Task Queue & Worker Servers

Used for asynchronous processing. Tasks are enqueued and workers (potentially multiple) consume them in FIFO order or based on priority.

Typical use cases include image/video transcoding, data aggregation, and sending registration emails or SMS.

7. Full‑Text Search

Relies on inverted indexes: each term points to documents containing that term. Popular services include Elasticsearch, Sphinx, and Apache Solr.

8. Internal Services

Not exposed externally; examples are user service, content service, payment service, and HTML‑to‑PDF service.

9. Data Pipeline

Applications emit events (e.g., user interactions) to streaming systems like Kafka, store raw data in cloud storage, and load it into a data warehouse for analysis.

10. Cloud Storage

Provides simple, scalable, high‑performance storage for files such as images, audio, video, JS, and CSS.

11. CDN

Content Delivery Network caches resources (images, audio, video, JS, CSS) close to users, reducing latency and offloading origin servers.

Recommended Reading

High‑Concurrency Common Strategies

Interface‑Level Fault Handling Strategies

Multi‑Active Disaster‑Recovery Architecture

Load Balancer Types and Algorithms

Architecture Design – Service Degradation