Парсинг изображений из атрибута srcset: практическое руководство

При сборе данных с сайтов часто возникает задача извлечения ссылок на изображения, особенно когда они спрятаны в теге <picture> с атрибутом srcset. В этой статье мы разберём, как правильно спарсить такие ссылки с помощью Python, библиотек Requests и BeautifulSoup, на примере сайта new-science.ru. Вы узнаете, как обрабатывать адаптивные изображения и избегать типичных ошибок.

Что такое srcset и зачем его парсить?

Атрибут srcset в теге <source> или <img> используется для указания нескольких версий одного изображения под разные разрешения экрана. Парсинг таких ссылок позволяет получить все доступные варианты картинок, что полезно для анализа контента, создания собственных галерей или мониторинга изменений на сайте.

Подготовка окружения

Для работы вам понадобятся:

• Python 3.6+
• Библиотека requests - для отправки HTTP-запросов
• Библиотека beautifulsoup4 - для разбора HTML

Установите их командой: pip install requests beautifulsoup4

Пошаговый код парсинга

1. Формируем запрос к сайту

Используем User-Agent, чтобы имитировать браузер и избежать блокировки. Задаём URL с поисковым запросом, например, «глобальное потепление».

import requests
from bs4 import BeautifulSoup

url = 'https://new-science.ru/?s=глобальное+потепление'
headers = {'User-Agent': 'Mozilla/5.0'}
response = requests.get(url, headers=headers)
soup = BeautifulSoup(response.text, 'lxml')

2. Находим блоки с постами

На сайте new-science.ru каждая статья находится внутри контейнера с классом post-details. Извлекаем заголовки, ссылки, даты и просмотры стандартными методами.

posts = soup.find_all('div', class_='post-details')
for post in posts:
    title_tag = post.find('h2', class_='post-title')
    title = title_tag.text.strip() if title_tag else 'No Title'
    link = title_tag.find('a')['href'] if title_tag and title_tag.find('a') else 'No Link'

3. Извлекаем изображение из тега picture

Главная сложность - получить ссылку на картинку из атрибута srcset. Внутри <picture> находится <source>, у которого и берём первую ссылку.

image_url = None
picture_tag = post.find('picture')
if picture_tag:
    source_tag = picture_tag.find('source')
    if source_tag and 'srcset' in source_tag.attrs:
        # Берем первую ссылку до запятой
        image_url = source_tag['srcset'].split(',')[0].strip()

4. Собираем результат

Добавляем все данные в словарь и возвращаем список статей.

articles.append({
    'title': title,
    'link': link,
    'views': views,
    'date': date,
    'image': image_url
})

Интеграция с Flask

Чтобы вывести результаты на веб-страницу, используем Flask. Функция fetch_articles_with_images() вызывается в роуте /articles, а данные передаются в шаблон.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/articles')
def articles():
    articles = fetch_articles_with_images()
    return render_template('articles.html', articles=articles)

Типичные ошибки и их решение

• Пустой список статей: Проверьте классы в HTML - сайт мог обновиться. Замените post-details на актуальный селектор.
• Нет изображения: Не у всех постов есть тег <picture>. Добавьте fallback на <img src="...">.
• Блокировка запроса: Добавьте в заголовки Referer или используйте прокси.

Заключение

Парсинг изображений из атрибута srcset - несложная задача, если знать структуру HTML. Представленный код успешно извлекает ссылки на картинки с сайта new-science.ru и может быть легко адаптирован под другие ресурсы. Экспериментируйте с селекторами и не забывайте про обработку ошибок.