چه زمانی باید تصاویر درون خطی شوند
رمزگذاری یک تصویر در Base64 یک درخواست شبکه را با یک فایل بزرگتر مبادله می کند. این یک پیروزی برای داراییهای کوچک و پرکاربرد - نمادها، آرمهای کوچک، گرافیکهای فاصلهدار - است که هزینه تأخیر رفت و برگشت بیشتر از بایتهای اضافی است. برای عکس های بزرگ، آنها را به عنوان فایل های جداگانه نگه دارید.
استفاده از URI های داده در CSS و HTML
URI داده فقط یک رشته است که با data:image/png;base64 شروع می شود. آن را در یک تصویر پسزمینه CSS یا یک HTML img src بیندازید و مرورگر آن را به صورت درون خطی ارائه میکند. این ابزار هر دو قطعه را تولید می کند تا بتوانید مستقیماً قطعه درست را جایگذاری کنید.
مبادله اندازه
رمزگذاری Base64 تقریباً 33٪ به اندازه فایل اضافه می کند زیرا داده های باینری را در متن نشان می دهد. Inlining همچنین به این معنی است که دارایی را نمی توان به طور جداگانه در بین صفحات ذخیره کرد. از آن عمداً برای گرافیک های کوچک و حساس به صفحه استفاده کنید تا همه چیز.
- 01
- رمزگذاری تصویر را بکشید و رها کنید
- 02
- تولید قطعه تصویر پس زمینه CSS
- 03
- خروجی URI داده HTML img src
- 04
- رمزگشایی Instant Base64
