تصویر کوچک در HTML و CSS
Data URL می تواند فایل کوچک را مستقیم در کد صفحه قرار دهد.
Data URL می تواند فایل کوچک را مستقیم در کد صفحه قرار دهد.
متن از فایل اصلی بزرگ تر می شود و کش مستقل تصویر از بین می رود. برای تصویر بزرگ، فایل WebP یا AVIF جدا معمولا مناسب تر است.
data:image/png;base64,...background-image: url("data:...")خیر. Base64 روش نمایش داده دودویی با نویسه های متنی است و معمولاً اندازه داده را حدود یک سوم بیشتر می کند؛ برای فشرده سازی تصویر مناسب نیست.
Base64 خام فقط رشته رمزگذاری شده است. Data URL پیشوندی مانند data:image/png;base64, دارد و می تواند مستقیماً در src تصویر یا CSS استفاده شود.
خیر. فایل با FileReader در همان مرورگر خوانده می شود و هیچ درخواست شبکه ای برای تبدیل ارسال نمی شود.
برای تصاویر بزرگ، فایل جداگانه با کش مرورگر و فرمت بهینه بهتر است. Base64 بیشتر برای آیکون ها و فایل های کوچک یا انتقال در قالب متنی کاربرد دارد.
خیر. رمزگذاری و بازگردانی Base64 داده اصلی را بدون تغییر نگه می دارد؛ کیفیت فقط وقتی تغییر می کند که تصویر جداگانه فشرده یا تبدیل فرمت شود.
مرورگر فایل انتخابشده را با FileReader به Data URL میخواند. رشته Base64 خام از بخش داده همان نشانی جدا میشود و خود تصویر تغییری نمیکند.
مهم: تمام تبدیل در مرورگر انجام میشود و فایل به سرور ارسال نمیشود. برای تصاویر بزرگ، فایل تصویری جداگانه معمولاً از Base64 بهینهتر است.
نظرات شما