Как происходит передача картинки пользователю на сайте?

Передача картинки пользователю на сайте

Передача изображения в веб-приложении включает несколько этапов: от запроса браузера до доставки бинарных данных и отображения на странице. Рассмотрю полный цикл.

1. Клиентская сторона (браузер)

Пользователь открывает страницу, браузер парсит HTML и находит тег <img>:

<img src="/api/v1/images/photo.jpg" alt="Фото" />
<img src="https://example.com/uploads/user-avatar.png" />

Браузер отправляет HTTP GET запрос к серверу для каждого изображения.

2. Серверная обработка на Python (Flask/Django)

Способ 1: Прямая отправка файла

from flask import send_file, send_from_directory
from werkzeug.wsgi import wrap_file

@app.route('/images/<filename>')
def get_image(filename):
    # Проверяем безопасность имени файла
    if '..' in filename or filename.startswith('/'):
        return 'Invalid filename', 400
    
    try:
        return send_from_directory('uploads/', filename, mimetype='image/jpeg')
    except FileNotFoundError:
        return 'Image not found', 404

Способ 2: Отправка из памяти (для генерируемых изображений)

from io import BytesIO
from PIL import Image
from flask import send_file

@app.route('/api/v1/generate-image')
def generate_image():
    # Генерируем изображение в памяти
    img = Image.new('RGB', (200, 200), color='red')
    
    # Сохраняем в BytesIO вместо диска
    img_io = BytesIO()
    img.save(img_io, 'PNG')
    img_io.seek(0)
    
    return send_file(img_io, mimetype='image/png')

Способ 3: Потоковая передача для больших файлов

from flask import Response

@app.route('/video/stream')
def stream_video():
    def generate_file():
        with open('large_video.mp4', 'rb') as f:
            chunk_size = 8192  # 8 KB
            while True:
                chunk = f.read(chunk_size)
                if not chunk:
                    break
                yield chunk
    
    return Response(generate_file(), mimetype='video/mp4')

3. HTTP заголовки для картинок

Сервер отправляет ответ с правильными заголовками:

HTTP/1.1 200 OK
Content-Type: image/jpeg
Content-Length: 45632
Cache-Control: public, max-age=3600
ETag: "abc123def456"
Last-Modified: Wed, 22 Mar 2024 10:00:00 GMT

[binary data of image]

4. Оптимизация передачи

4.1 Кэширование на сервере

from flask_caching import Cache

cache = Cache(app, config={'CACHE_TYPE': 'simple'})

@app.route('/api/v1/images/<image_id>')
@cache.cached(timeout=3600)  # Кэш на 1 час
def get_cached_image(image_id):
    image = Image.query.get(image_id)
    return send_file(image.path, mimetype='image/jpeg')

4.2 Сжатие перед отправкой

from PIL import Image
import gzip
from io import BytesIO

@app.route('/api/v1/images/<image_id>/optimized')
def get_optimized_image(image_id):
    img = Image.open(f'uploads/{image_id}.jpg')
    
    # Уменьшаем размер
    img.thumbnail((800, 600))
    
    # Сохраняем с компрессией
    img_io = BytesIO()
    img.save(img_io, 'JPEG', quality=80, optimize=True)
    img_io.seek(0)
    
    return send_file(img_io, mimetype='image/jpeg')

4.3 Использование CDN

# В шаблоне вместо прямого пути к серверу
<img src="https://cdn.example.com/images/photo.jpg" />

# В Django/Flask генерируем URL на CDN
def get_image_url(image_id):
    cdn_url = settings.CDN_URL  # https://cdn.example.com
    return f"{cdn_url}/images/{image_id}.jpg"

5. Полный пример с обработкой ошибок

from flask import Flask, send_file, request, jsonify
from pathlib import Path
import mimetypes

app = Flask(__name__)
UPLOAD_DIR = Path('uploads')
ALLOWED_TYPES = {'image/jpeg', 'image/png', 'image/gif', 'image/webp'}

@app.route('/api/v1/images/<filename>')
def serve_image(filename):
    # Безопасность: проверяем путь
    filepath = (UPLOAD_DIR / filename).resolve()
    if not str(filepath).startswith(str(UPLOAD_DIR.resolve())):
        return {'error': 'Invalid path'}, 403
    
    if not filepath.exists():
        return {'error': 'Not found'}, 404
    
    # Определяем MIME-тип
    mimetype, _ = mimetypes.guess_type(filepath)
    if mimetype not in ALLOWED_TYPES:
        return {'error': 'Invalid file type'}, 400
    
    # Отправляем с заголовками кэша
    return send_file(
        filepath,
        mimetype=mimetype,
        cache_timeout=3600,  # 1 час
        as_attachment=False  # inline в браузере
    )

@app.after_request
def add_cache_headers(response):
    if response.mimetype and response.mimetype.startswith('image/'):
        response.cache_control.max_age = 3600
        response.cache_control.public = True
    return response

6. Процесс в браузере

1. Браузер получает HTTP ответ с картинкой
2. Парсит MIME-тип (image/jpeg)
3. Декодирует бинарные данные
4. Отображает в DOM в месте тега <img>
5. Кэширует локально согласно Cache-Control заголовкам

Итоговый процесс

Пользователь → Браузер → HTTP GET → Сервер → Обработка → Отправка бинарных данных → Браузер кэширует → Отображение

Ключевые моменты: безопасность (валидация пути), оптимизация (сжатие, кэширование), производительность (CDN, потоковая передача для больших файлов).