چگونه همه تصویرهای یک وب‌سایت را بدون کدنویسی دانلود کنیم؟

دارید وب‌سایت قدیمی‌تان را به پلتفرم تازه‌ای منتقل می‌کنید. آژانسی که آن را ساخته دیگر در دسترس نیست، به سرور دسترسی ندارید و صفحه‌های محصول چند صد عکس دارند. ذخیره تک‌تک آن‌ها با دست روزها طول می‌کشد و چند تصویر اولی که امتحان کردید کوچک‌تر و تارتر از آنچه در صفحه دیده می‌شوند ذخیره شدند.

این راهنما برای تصویرهایی است که اجازه کپی کردنشان را دارید: سایت خودتان، کیت رسانه‌ای (press kit) که سازمانی در اختیار روزنامه‌نگاران می‌گذارد، یا تصویرهایی با مجوز آزاد که شرایطشان را رعایت می‌کنید. برداشتن عکس‌های محصول یک رقیب برای فروشگاه خودتان خارج از موضوع این نوشته است و اینکه بتوانید تصویری را دانلود کنید، حق استفاده از آن را به شما نمی‌دهد (آیا اسکرپینگ وب قانونی است؟). در ادامه چهار راه برای ذخیره همه تصویرهای یک صفحه بدون کدنویسی، دلیل‌های کوچک رسیدن یا جا ماندن تصویرها، کار با فایل‌های WebP و یک اسکریپت اختیاری پایتون را می‌آوریم.

تصویرهای یک صفحه از کجا می‌آیند؟#

هر تصویر در صفحه یک فایل جداست. خود صفحه یک فایل متنی (HTML) است که می‌گوید هر تصویر کجاست و مرورگر شما هر تصویر را با درخواستی جداگانه دریافت می‌کند.

تصویر به یکی از سه شکل وارد صفحه می‌شود: تگ img که می‌توانید روی آن راست‌کلیک کنید و ذخیره‌اش کنید؛ پس‌زمینه CSS، که دلیل نبودن گزینه ذخیره برای برخی بنرهاست؛ یا عنصر picture که یک تصویر را در چند قالب و اندازه فهرست می‌کند و انتخاب را به مرورگر می‌سپارد.

بسیاری از سایت‌ها تصویرها را از CDN (شبکه توزیع محتوا) می‌فرستند؛ مجموعه‌ای از سرورها که فایل‌ها را از مکانی نزدیک به بازدیدکننده تحویل می‌دهند. به همین دلیل نام فایل‌ها اغلب تصادفی به نظر می‌رسد.

چگونه همه تصویرهای یک صفحه وب را دانلود کنیم؟#

همه روش‌های زیر چهار گام یکسان دارند:

1. صفحه را باز کنید و تا انتها اسکرول کنید. تصویرهای پایین صفحه اغلب فقط وقتی به آن‌ها می‌رسید بارگذاری می‌شوند.
2. از جدول زیر یک روش انتخاب کنید.
3. پوشه را مرتب کنید. لوگوها، آیکون‌ها و تصویرهای ردیابی یک‌پیکسلی را پاک کنید.
4. اندازه را بررسی کنید. اگر تصویری کوچک‌تر از آن است که روی صفحه به نظر می‌رسید، آدرس نسخه با اندازه کامل را پیدا کنید.

ذخیره همه تصویرها با گزینه «صفحه وب، کامل» در Chrome#

این روش به نصب هیچ چیزی نیاز ندارد. صفحه را باز کنید، تا انتها اسکرول کنید، سپس منوی سه‌نقطه را در گوشه بالای پنجره باز کنید و Cast, save, and share > Save page as (ارسال، ذخیره و هم‌رسانی > ذخیره صفحه به‌عنوان) را انتخاب کنید (میان‌بر Ctrl+S و در Mac میان‌بر Cmd+S)، همان‌طور که راهنمای Chrome توضیح می‌دهد.

قالب را روی صفحه وب، کامل (Webpage, Complete) بگذارید و دکمه ذخیره (Save) را بزنید. Chrome یک فایل .html می‌نویسد و کنار آن پوشه‌ای با همان نام که به _files ختم می‌شود. تصویرها در این پوشه در میان فایل‌های استایل و اسکریپت‌ها قرار دارند؛ برای پیدا کردنشان پوشه را بر اساس نوع فایل مرتب کنید.

Chrome فایل‌هایی را ذخیره می‌کند که صفحه در همان لحظه به آن‌ها اشاره می‌کند؛ پس اگر اصلاً اسکرول نکرده باشید، تصویرهایی که اسکریپت هنگام اسکرول جایگزین می‌کند ذخیره نمی‌شوند. همچنین نسخه‌هایی را می‌گیرید که به صفحه نمایش شما رسیده‌اند و نه همیشه نسخه‌های اصلی را.

چگونه از افزونه دانلود گروهی تصویر استفاده کنیم؟#

در Chrome Web Store عبارت «image downloader» را جست‌وجو کنید تا افزونه‌هایی را پیدا کنید که همه تصویرهای زبانه باز را فهرست می‌کنند. نام هیچ‌کدام را نمی‌آوریم، چون مالکشان اغلب عوض می‌شود. بیشتر آن‌ها این‌طور کار می‌کنند:

1. افزونه را نصب کنید، صفحه را باز کنید و تا انتها اسکرول کنید.
2. روی آیکون افزونه کلیک کنید. شبکه‌ای از تصویرهای صفحه نمایش داده می‌شود.
3. فیلتر حداقل عرض را آن‌قدر بالا ببرید که آیکون‌ها و تصویرهای بندانگشتی (thumbnail) کنار بروند.
4. تصویرهای موردنظر را علامت بزنید و روی دانلود کلیک کنید.

برای اینکه برای هر تصویر یک پنجره ذخیره باز نشود، به Settings > Downloads (تنظیمات > دانلودها) بروید و گزینه Ask where to save each file before downloading (پیش از دانلود، محل ذخیره هر فایل پرسیده شود) را خاموش کنید.

پیش از نصب، مجوزها را بخوانید. بسیاری از این افزونه‌ها مجوز «Read and change all your data on all websites» (خواندن و تغییر همه داده‌های شما در همه وب‌سایت‌ها) را می‌خواهند که به آن‌ها اجازه می‌دهد هر صفحه‌ای را که باز می‌کنید ببینند. نظرهای کاربران، تاریخ آخرین به‌روزرسانی و توسعه‌دهنده را بررسی کنید و وقتی کار تمام شد، افزونه را حذف کنید.

ذخیره همه تصویرها با پنجره اطلاعات صفحه در Firefox#

Firefox یک راه داخلی دارد. کلیدهای Ctrl+I (در Mac کلیدهای Cmd+I) را بزنید تا پنجره اطلاعات صفحه (Page Info) باز شود، سپس زبانه رسانه (Media) را باز کنید.

این فهرست همه تصویرهایی را که صفحه به کار می‌برد، همراه با پس‌زمینه‌ها و آیکون‌ها، با آدرس و نوعشان نشان می‌دهد. روی انتخاب همه (Select All) و سپس ذخیره به‌عنوان… (Save As…) کلیک کنید و پوشه‌ای انتخاب کنید. انتظار داشته باشید که بعد از آن چند آیکون را پاک کنید.

چگونه آدرس واقعی یک تصویر را با DevTools پیدا کنیم؟#

DevTools (ابزارهای توسعه‌دهنده) پنلی درون Chrome است که هر چیزی را که یک صفحه بارگذاری می‌کند نشان می‌دهد و فایل با اندازه کامل را از همین راه پیدا می‌کنید.

1. کلید ⁦F12⁩ را بزنید و زبانه Network را باز کنید.
2. روی فیلتر Img کلیک کنید؛ یکی از فیلترهای نوع که در مرجع پنل Network در Chrome فهرست شده‌اند.
3. صفحه را دوباره بارگذاری کنید و تا انتها اسکرول کنید. DevTools درخواست‌ها را فقط وقتی باز است ثبت می‌کند.
4. هر ردیف نام فایل، نوع آن (webp، avif، jpeg) و اندازه‌اش را نشان می‌دهد. برای پیش‌نمایش روی ردیف کلیک کنید.
5. روی ردیف راست‌کلیک کنید، Copy > Copy URL را انتخاب کنید، آدرس را در زبانه تازه‌ای باز کنید و تصویر را همان‌جا ذخیره کنید.

برای یک تصویر، روی آن راست‌کلیک کنید و Inspect (بازرسی) را انتخاب کنید. اگر تگ img آن ویژگی srcset داشته باشد، چند نسخه را فهرست می‌کند که پس از هر کدام عرضش آمده است، مانند photo-400.jpg 400w, photo-1600.jpg 1600w. بزرگ‌ترین عدد، بزرگ‌ترین نسخه است.

جست‌وجوی .jpg در سورس صفحه (Ctrl+U) خیلی چیزها را از قلم می‌اندازد: سورس همان HTML است که سرور نخستین بار فرستاده، پس تصویرهایی که بعداً جاوااسکریپت اضافه می‌کند در آن نیستند.

چرا تصویرها کوچک و تار دانلود می‌شوند یا اصلاً دانلود نمی‌شوند؟#

1. مرورگر شما نسخه کوچکی را انتخاب کرده است. سایت با srcset یک تصویر را در چند عرض فهرست می‌کند. مرجع عنصر img در MDN می‌گوید مرورگر به تشخیص خودش از میان این منبع‌ها انتخاب می‌کند. در پنجره باریک معمولاً نسخه کوچک‌تری برمی‌دارد و شما همان را ذخیره می‌کنید.

2. تصویر هنوز بارگذاری نشده بود. تگی با loading="lazy" صبر می‌کند تا تصویر به صفحه نمایش نزدیک شود. سایت‌های دیگر آدرس واقعی را در ویژگی data-src نگه می‌دارند و تا زمانی که اسکریپتی آن را جایگزین کند، یک جای‌نگهدار خالی یا محو نشان می‌دهند. این همان سازوکاری است که پس از بارگذاری نخست، صفحه‌ها را با جاوااسکریپت پر می‌کند (صفحه‌های ایستا و پویا).

3. تصویر بندانگشتی و تصویر کامل فایل‌های جدایی هستند. در books.toscrape.com، سایتی تمرینی که برای اسکرپینگ ساخته شده، جلد کتاب «A Light in the Attic» در صفحه اصلی 125 در 155 پیکسل است و در صفحه خود کتاب 318 در 395 پیکسل.

4. آدرس، نسخه کوچکی را درخواست می‌کند. بسیاری از CDNهای تصویر اندازه را در آدرس می‌گذارند، مثلاً ?w=400، و تصویر را متناسب با آن تغییر اندازه می‌دهند.

برای رفع مشکل، پنجره را پهن‌تر کنید، کل صفحه را اسکرول کنید، پیش از ذخیره تصویر بزرگ گالری را باز کنید یا در DevTools بزرگ‌ترین نسخه srcset را بردارید.

تصویرهایی را که با قالب WebP یا AVIF دانلود می‌شوند چگونه باز کنیم؟#

WebP و AVIF قالب‌های تازه‌تری هستند که فایل‌هایی کوچک‌تر از JPEG می‌سازند. راهنمای قالب‌های تصویر در MDN می‌گوید تصویرهای WebP با فشرده‌سازی اتلافی (lossy) به‌طور میانگین 25 تا 35 درصد کوچک‌تر از JPEG با سطح فشرده‌سازی مشابه هستند و WebP در مرورگرهای امروزی پشتیبانی گسترده‌ای دارد.

یک آدرس می‌تواند به برنامه‌های مختلف قالب‌های متفاوتی بفرستد. وقتی تصویری را از یک CDN تصویر درخواست کردیم، درخواست ساده یک JPEG گرفت و درخواستی با هدر Accept که Chrome می‌فرستد AVIF گرفت. به همین دلیل فایلی که انتظار دارید .jpg باشد با پسوند .webp یا .avif می‌رسد.

در ⁦Windows 11⁩ برنامه Paint فایل‌های WebP را باز می‌کند: File > Save as را انتخاب کنید و JPEG را برگزینید. فایل‌های AVIF ممکن است به افزونه رایگان ⁦AV1 Video Extension⁩ از Microsoft Store نیاز داشته باشند. برای ده‌ها فایل، یک مبدل گروهی تصویر کار را یک‌جا انجام می‌دهد.

پیشرفته: دانلود تصویرهای یک صفحه با پایتون#

این بخش اختیاری برای کسانی است که کار را تکرار می‌کنند، مثلاً پشتیبان‌گیری ماهانه از سایت خودشان. به ⁦Python 3.10⁩ یا جدیدتر و دستور pip install requests beautifulsoup4 نیاز دارید. این اسکریپت:

• یک User-Agent می‌فرستد که نام اسکریپت و یک آدرس تماس را دارد (User-Agent چیست؟)؛
• همه تگ‌های img و picture source را می‌خواند و بزرگ‌ترین گزینه را از data-srcset یا srcset برمی‌دارد، وگرنه از data-src یا src؛
• جای‌نگهدارهای درون‌خطی data: را کنار می‌گذارد و آدرس‌های نسبی مانند ../img/photo.jpg را کامل می‌کند؛
• هر فایل را به‌صورت جریانی درون یک بلوک with دریافت می‌کند، همان‌طور که مستندات Requests توصیه می‌کند، و هر پاسخی را که 200 با نوع image/ نباشد کنار می‌گذارد؛
• هیچ فایلی را بازنویسی نمی‌کند (دومین photo.jpg به photo-1.jpg تبدیل می‌شود) و پس از هر آدرس، حتی آدرس‌های کنارگذاشته، یک ثانیه صبر می‌کند.

import mimetypes
import time
from pathlib import Path
from urllib.parse import urljoin, urlsplit

import requests
from bs4 import BeautifulSoup

PAGE_URL = "https://example.com/gallery/"  # a page you own or may copy
FOLDER = Path("images")
DELAY = 1.0  # seconds between downloads
HEADERS = {"User-Agent": "image-backup/1.0 (contact: you@example.com)"}


def largest_candidate(srcset):
    """Return the URL with the largest w or x value in a srcset."""
    best_url, best_size = None, -1.0
    for part in srcset.split(","):
        bits = part.split()
        if not bits:
            continue
        size = 1.0
        if len(bits) > 1 and bits[1][-1] in "wx":
            size = float(bits[1][:-1])
        if size > best_size:
            best_url, best_size = bits[0], size
    return best_url


def image_urls(html, base_url):
    soup = BeautifulSoup(html, "html.parser")
    urls = []
    for tag in soup.select("img, picture source"):
        srcset = tag.get("data-srcset") or tag.get("srcset")
        url = largest_candidate(srcset) if srcset else None
        url = url or tag.get("data-src") or tag.get("src")
        if url and not url.startswith("data:"):  # skip inline placeholders
            full = urljoin(base_url, url)
            if full not in urls:
                urls.append(full)
    return urls


def free_name(url, content_type):
    """Pick a file name that does not overwrite an earlier download."""
    name = Path(urlsplit(url).path).name or "image"
    stem, suffix = Path(name).stem, Path(name).suffix
    if not suffix:
        suffix = mimetypes.guess_extension(content_type.split(";")[0]) or ".img"
    target, n = FOLDER / f"{stem}{suffix}", 1
    while target.exists():
        target, n = FOLDER / f"{stem}-{n}{suffix}", n + 1
    return target


FOLDER.mkdir(exist_ok=True)
with requests.Session() as session:
    session.headers.update(HEADERS)
    page = session.get(PAGE_URL, timeout=15)
    page.raise_for_status()
    for url in image_urls(page.text, page.url):
        try:
            with session.get(url, stream=True, timeout=30) as r:
                ctype = r.headers.get("Content-Type", "")
                if r.status_code != 200 or not ctype.startswith("image/"):
                    print("skipped", r.status_code, ctype, url)
                    continue
                target = free_name(url, ctype)
                with open(target, "wb") as f:
                    for chunk in r.iter_content(chunk_size=64 * 1024):
                        f.write(chunk)
            print("saved", target.name)
        except requests.RequestException as exc:
            print("failed", url, type(exc).__name__)
        finally:
            time.sleep(DELAY)  # also runs after a skipped file

آن را با ⁦Python 3.13⁩، ⁦Requests 2.34.2⁩ و ⁦Beautiful Soup 4.15.0⁩ روی یک صفحه آزمایشی محلی اجرا کردیم: نسخه 1600w را به نسخه 400w ترجیح داد، آدرس پشت یک جای‌نگهدار data: را پیدا کرد، دو فایل photo.jpg را از هم جدا نگه داشت و یک 404 را کنار گذاشت. در books.toscrape.com هم 20 تصویر بندانگشتی صفحه اصلی را ذخیره کرد. هر اجرا را با یک پوشه خالی آغاز کنید.

اسکریپت تلاش دوباره (retry) ندارد: وقتی سروری با 429 پاسخ می‌دهد، نخست کدهای وضعیت HTTP در وب اسکرپینگ را بخوانید. دانلود موازی (همروندی و موازی‌سازی) و پروکسی‌ها هم کنار گذاشته شده‌اند، چون پشتیبان‌گیری از سایت خودتان به هیچ‌کدام نیاز ندارد. آدرس‌های نسبی در صفحه‌بندی و پیوندهای نسبی و خواندن ویژگی‌ها در راهنمای BeautifulSoup توضیح داده شده‌اند. کاربران ترمینال گزینه‌های دانلود بازگشتی و مؤدبانه را در استفاده از پروکسی در wget پیدا می‌کنند.

کاربردها#

• انتقال سایت خودتان. نخست ببینید CMS شما امکان خروجی گرفتن از رسانه‌ها (media export) را دارد یا نه (استخراج داده از وب‌سایت).
• کیت رسانه‌ای. سازمان‌ها عکس‌های رویداد و لوگوهای خود را برای روزنامه‌نگاران منتشر می‌کنند، معمولاً با شرایطی درباره ذکر منبع (آیا اسکرپینگ وب قانونی است؟).
• آرشیوهای با مجوز آزاد. انتساب لازم را حفظ کنید و پیش از دانلود با اسکریپت، فایل robots.txt سایت را بخوانید.
• بازبینی فروشگاه خودتان. اسکریپت هر تصویری را که خطا برمی‌گرداند چاپ می‌کند و فهرستی سریع از عکس‌های خراب محصول به دست می‌دهد (کدهای وضعیت HTTP در وب اسکرپینگ).
• صفحه‌های زیاد از سایت خودتان. از فهرست صفحه‌هایی شروع کنید که نقشه سایت (sitemap) در اختیارتان می‌گذارد (چگونه نقشه سایت یک وب‌سایت را پیدا کنیم).

اشتباهات رایج#

• ذخیره پیش از اسکرول. تصویرهایی که با اسکرول بارگذاری می‌شوند جا می‌مانند.
• اشتباه گرفتن تصویر بندانگشتی با نسخه اصلی.
• روشن گذاشتن پرسش محل دانلود. برای هر تصویر باید یک پنجره ذخیره را تأیید کنید.
• نصب افزونه بدون خواندن مجوزهایش.
• بازنویسی فایل‌ها روی یکدیگر. دو پوشه در یک سایت ممکن است هر دو یک photo.jpg داشته باشند.
• فرض اینکه دانلود، حق استفاده هم می‌دهد. شرایط مالک یا مجوز را بررسی کنید.
• اجرای اسکریپت بدون مکث. صدها درخواست در دقیقه از یک آدرس IP می‌تواند سرعت یک سایت کوچک را پایین بیاورد و سرور ممکن است با ⁦429 Too Many Requests⁩ پاسخ دهد.

راهنمای انتخاب#

ردیف‌های بالای جدول کمترین آماده‌سازی را لازم دارند.

پرسش‌های متداول#

آیا افزونه‌های دانلود گروهی تصویر امن هستند؟#

می‌توانند امن باشند، اما بیشترشان مجوز خواندن و تغییر داده‌ها را در هر سایتی که بازدید می‌کنید، از جمله ایمیل و بانکتان، لازم دارند. افزونه‌ای را انتخاب کنید که نظرهای زیاد، به‌روزرسانی تازه و توسعه‌دهنده‌ای با نام مشخص دارد و بعد از کار حذفش کنید.

چرا تصویرها با قالب WebP دانلود می‌شوند؟#

سایت WebP یا AVIF می‌فرستد چون فایل‌ها کوچک‌ترند و مرورگر شما به سرور می‌گوید که می‌تواند آن‌ها را نمایش دهد. مرورگرهای امروزی و برنامه Paint در ⁦Windows 11⁩ فایل WebP را باز می‌کنند و Paint می‌تواند آن را با قالب JPEG ذخیره کند.

چرا تصویرها با اندازه کامل دانلود نمی‌شوند؟#

احتمالاً صفحه نسخه کوچک‌تری از srcset را به صفحه نمایش شما داده یا تصویر بندانگشتی گالری را ذخیره کرده‌اید. پنجره را پهن‌تر کنید، تصویر بزرگ را باز کنید یا در DevTools بزرگ‌ترین گزینه را بردارید. اگر سایت فقط نسخه‌های کوچک منتشر می‌کند، فایل بزرگ‌تری وجود ندارد.

آیا می‌توانم همه تصویرهای یک صفحه وب را با گوشی دانلود کنم؟#

با برنامه استاندارد Chrome در اندروید یک‌جا نه. می‌توانید تصویرها را یکی‌یکی ذخیره کنید: انگشت خود را روی تصویر نگه دارید، سپس بارگیری تصویر (Download image) را بزنید، همان‌طور که راهنمای Chrome برای اندروید توضیح می‌دهد. برای یک صفحه کامل، از رایانه استفاده کنید.

آیا می‌توانم تصویرهای همه صفحه‌های یک وب‌سایت را یک‌جا دانلود کنم؟#

این کار خزش (crawl) است، یعنی برنامه‌ای که پیوندها را صفحه به صفحه دنبال می‌کند، نه ذخیره یک صفحه (وب اسکرپینگ در برابر خزش وب). اجازه بگیرید، robots.txt را بخوانید و تنظیمات مؤدبانه‌ای مانند آنچه در بخش دانلود گروهی استفاده از پروکسی در wget آمده است به کار ببرید. کسب‌وکارهایی که به خزش در مقیاس بالا نیاز دارند می‌توانند راهکار خزنده وب ما را ببینند.

آیا می‌توانم تصویرهای دانلودشده را در وب‌سایت خودم به کار ببرم؟#

فقط اگر حقش را داشته باشید. دانلود یک نسخه از تصویر به شما می‌دهد، نه مجوز استفاده. عکس‌های خودتان مشکلی ندارند، تصویرهای کیت رسانه‌ای تابع شرایط همان کیت‌اند و تصویرهای با مجوز آزاد تابع مجوز خودشان، که اغلب ذکر منبع را الزامی می‌کند (آیا اسکرپینگ وب قانونی است؟).

خلاصه#

برای دانلود همه تصویرهای یک صفحه وب، تا انتها اسکرول کنید، سپس صفحه را در Chrome با گزینه «صفحه وب، کامل» ذخیره کنید، از یک افزونه دانلود گروهی تصویر کمک بگیرید یا پنجره اطلاعات صفحه در Firefox را به کار ببرید. تصویر کوچک معمولاً یعنی نسخه کوچک‌تری از srcset یا تصویری که هنوز بارگذاری نشده بود و DevTools آدرس نسخه با اندازه کامل را نشان می‌دهد. به تصویرهایی بسنده کنید که اجازه استفاده از آن‌ها را دارید و اگر کسب‌وکارتان به جمع‌آوری منظم تصویر در مقیاس بالا نیاز دارد، راهکارهای استخراج داده ما را ببینید.