تبدیل SVG به WebP
فایل وکتور را دقیقاً با عرض پیکسلی موردنیاز صفحه‌آرایی خود به WebP تبدیل کنید. این کار زمانی مفید است که سیستم مدیریت محتوا بارگذاری SVG را نمی‌پذیرد، پیشنمایش شبکههای اجتماعی به تصویر بیت‌مپ نیاز دارد، یا یک تصویرسازی آن‌قدر مسیر دارد که مرورگر آن را کُند رسم میکند.
مبدل عکس
یا فایلهای JPG, JPEG, JPE … را اینجا رها کنید ·
حداکثر 95 MB برای هر فایل· تا 20 فایل· حذف پس از 30 دقیقه
فایل‌ها روی سرورهای ما پردازش میشوند و پس از 30 دقیقه حذف میشوند.
85 عکس‌ها را از نظر بصری مشابه اصل نگه می‌دارد. فقط وقتی فایل کوچک‌تر می‌خواهید آن را کمتر کنید.
JPG، BMP و EPS شفافیت ندارند. پیکسلهای شفاف با این رنگ پر میشوند.
رنگ هگز پشت پیکسلهای شفاف، مثلاً #FFFFFF.
این قالب فقط یک تصویر را نگه می‌دارد. اگر می‌خواهید انیمیشن حفظ شود خروجی GIF یا WebP را انتخاب کنید.
آیکون چنداندازهای چند وضوح را در یک فایل دارد؛ مرورگرها و سیستمعاملها همان را که لازم دارند برمیدارند.
ابعاد اصلی را نگه دارید یا یک ضلع را وارد کنید تا نسبت تصویر حفظ شود.
پیکسل برای ضلعی که در بالا انتخاب کردید.
درصدی از ابعاد اصلی.
sRGB برای صفحه نمایش و وب مناسب است. برای چاپ حالت اصلی را نگه دارید؛ سیاه‌وسفید رنگ را حذف میکند.
فقط فراداده است؛ 0 مقدار اصلی را نگه می‌دارد. چاپگرها و برخی درگاه‌ها این عدد را می‌خوانند؛ ابعاد پیکسلی را تغییر نمی‌دهد.
نحوه استفاده از این ابزار
- 1
فایل SVG را بارگذاری کنید
تا ۲۰ فایل .svg که از Figma، Illustrator، Inkscape یا یک کتابخانهٔ نمودار خروجی گرفته‌اید اضافه کنید؛ هر فایل حداکثر 95 MB.
- 2
عرض خروجی را تعیین کنید
تغییر اندازهٔ تصویر خروجی از عرض 1200 px شروع میشود؛ آن را روی دو برابر عرضی که تصویر در صفحه اشغال میکند بگذارید. کیفیت روی 90 است، یا برای لوگوها و آیکون‌های تخت در تنظیمات پیشرفته گزینهٔ بدون اتلاف را تیک بزنید.
- 3
به WebP تبدیل کنید
روی تبدیل به WebP بزنید و فایل‌ها را جداگانه یا در قالب یک ZIP دانلود کنید. بخش‌های شفاف شفاف میمانند.
چطور SVG را با اندازهٔ مشخص به WebP تبدیل کنم؟
SVG را بارگذاری کنید، تغییر اندازهٔ تصویر خروجی را روی عرض موردنظر به پیکسل بگذارید (پیش‌فرض 1200 px) و روی تبدیل به WebP بزنید. وکتور از نو در همان عرض رسم میشود، پس چیزی بزرگ‌نمایی یا محو نمی‌شود.
چه زمانی SVG باید به WebP تبدیل شود
SVG در سال 2001 به توصیهٔ W3C تبدیل شد و برای بیشتر لوگوها و آیکونها فرمت درستی است: چند کیلوبایت متن که در هر بزرگ‌نمایی واضح میماند. مشکل وقتی شروع میشود که فایل از کد خودتان بیرون میرود. وردپرس و بسیاری از فروشگاه‌ساز‌های میزبانی‌شده بارگذاری SVG را رد می‌کنند، پیشنمایش لینک در Facebook، LinkedIn و X به‌صورت bitmap گرفته میشود، و ابزارهای طراحی تصویرسازی‌ها را با جلوه‌های رستری تعبیه‌شده خروجی می‌دهند که یک فایل وکتور را به چند مگابایت کد تبدیل میکند.
WebP که Google در 2010 منتشر کرد و Safari سرانجام در نسخهٔ 14 در 2020 از آن پشتیبانی کرد، همان bitmap ساخته‌شده برای این کار است: با همان ظاهر از PNG کم‌حجم‌تر است و کانال آلفای واقعی دارد. رندر مستقیم SVG به WebP در اندازهٔ نهایی، مسیر معمول عبور از یک خروجی PNG بزرگ را حذف میکند. اگر جهت عکس را هم می‌خواهید، صفحهٔ تبدیل WebP به SVG توضیح می‌دهد چرا آن جهت به ردیابی نیاز دارد، نه تبدیل.
ابعاد تبدیل SVG به WebP برای جایگاه‌های رایج وب
1200 × 630 px
پیشنمایش لینک Open Graph
تصویری که هنگام اشتراک‌گذاری صفحه نمایش داده میشود
1920 × 1080 px
تصویرسازی هیرو تمام‌عرض
بیشتر صفحهنمایشهای دسکتاپ را در 1× پوشش می‌دهد
1600 × 900 px
تصویر ستون وبلاگ در 2×
برای ستون محتوای 800 px
400 × 100 px
لوگوی هدر در 2×
برای جای لوگوی 200 × 50 px
SVG
گرافیک برداری مقیاس‌پذیر
SVG یک فرمت برداری مبتنی بر XML است که W3C در سال 2001 استانداردسازی کرد. به‌جای پیکسل، شکلها، مسیرها و متن را توصیف میکند؛ بنابراین در هر اندازهای شفاف میماند و برای لوگو و آیکن معمولاً بسیار کمحجم است. از شفافیت، استایل CSS، اسکریپت و انیمیشن پشتیبانی میکند و همه مرورگرها آن را به‌صورت بومی نمایش می‌دهند. SVG برای عکس مناسب نیست و تصاویر پیچیده ممکن است کند رندر شوند. Illustrator، Inkscape، Figma و مرورگرها میتوانند آن را باز و ویرایش کنند.
- فشردهسازی
- –
- شفافیت
- بله
- انیمیشن
- بله
- سال معرفی
- 2001 · W3C
WEBP
تصویر WebP
WebP فرمت تصویری است که Google در 2010 برای سریع‌تر شدن بارگذاری صفحات وب منتشر کرد. هم فشردهسازی با اتلاف و بدون اتلاف، هم شفافیت آلفا و هم انیمیشن را در یک فرمت پشتیبانی میکند. فایلهای WebP با اتلاف معمولاً 25–35% کوچک‌تر از JPEG با کیفیت بصری مشابه‌اند و WebP بدون اتلاف معمولاً از PNG کوچک‌تر است. همه مرورگرهای فعلی از آن پشتیبانی می‌کنند، اما برخی نرم‌افزارهای دسکتاپ قدیمی، خدمات چاپ و فرم‌های بارگذاری هنوز آن را نمی‌پذیرند. Windows، macOS و بیشتر ویرایشگرهای تصویر امروزی فایلهای WebP را باز می‌کنند.
- فشردهسازی
- با اتلاف یا بدون اتلاف
- شفافیت
- بله
- انیمیشن
- بله
- سال معرفی
- 2010 · Google
کاربران SVG را به WebP تبدیل می‌کنند تا یک bitmap سبک و با اندازهٔ ثابت برای جاهایی داشته باشند که فایل وکتور نمی‌پذیرند یا کند نمایش می‌دهند، مثل CMS، پیشنمایش شبکههای اجتماعی یا یک صفحهٔ فرود شلوغ؛ تبدیل WebP به SVG کار ردیابی (trace) است، نه تغییر ساده‌ٔ فرمت.
نحوهٔ رستری شدن SVG و نکاتی که باید بررسی کنید
مبدل عرض، ارتفاع و viewBox خود SVG را می‌خواند، سپس هر مسیر را در عرضی که تعیین کرده‌اید رسم میکند؛ ارتفاع از نسبت تصویر به دست می‌آید. چون رسم در اندازهٔ نهایی انجام میشود، خطوط نازک و متن‌های کوچک فقط یک بار و در مقیاس درست هموار میشوند. بزرگ‌کردن یک PNG کوچک بعداً هرگز به این تمیزی نمی‌شود.
فونت‌ها معمولاً مایهٔ غافلگیری‌اند. اگر SVG نام فونتی را بیاورد که تعبیه یا به منحنی تبدیل نشده، فونت جایگزین استفاده میشود و طول خط‌ها تغییر میکند. پیش از خروجی گرفتن، متن را در ابزار طراحی به منحنی تبدیل کنید. تصاویر خارجی که با URL درون SVG لینک شده‌اند دریافت نمی‌شوند، پس آنها را تعبیه کنید یا طرح را ابتدا یکپارچه (flatten) کنید.
تبدیل SVG به WebP: بایدها و نبایدها
| انجام دهید | انجام ندهید |
|---|---|
| در 2× عرض CSS نمایش‌داده‌شده رندر کنید | آیکون‌های ساده درون‌خطی را که به‌صورت SVG کم‌حجم‌ترند تبدیل نکنید |
| برای لوگوهای تخت با رنگ‌های کم از بدون اتلاف استفاده کنید | برای جایی به عرض 600 px با 4000 px رندر نگیرید |
| SVG اصلی را برای اندازه‌های بعدی نگه دارید | WebP را در خبرنامه‌های ایمیلی نفرستید |
| WebP را با ویژگی‌های width و height ارائه کنید تا جابه‌جایی چیدمان رخ ندهد | انتظار متن زنده نداشته باشید: WebP پیکسل است، نه متن قابل انتخاب |
پرسش‌های رایج دربارهٔ تبدیل SVG به WebP
برای تبدیل SVG به WebP از چه عرض پیکسلی استفاده کنم؟
عرضی را که تصویر با پیکسل CSS نمایش داده میشود در نظر بگیرید و دو برابر کنید تا روی صفحهنمایشهای پرتراکم گوشی و لپتاپ واضح بماند. تصویری که در ستونی به عرض 800 px نمایش داده میشود باید با عرض 1600 px رندر شود. رفتن به 3× در وب معمولاً نمیارزد، چون حجم فایل بالا میرود ولی بهبود دیدنی اندک است.
آیا WebP برای وبسایت بهتر از SVG است؟
برای لوگوها، آیکونها و نمودارهای ساده نه: یک SVG تمیز بسیار کمحجم است و در هر اندازهای واضح میماند، پس آن را نگه دارید. WebP برای تصویرسازیهای پیچیده با گرادیان، فیلتر یا هزاران مسیر، و برای هر جایی که فقط تصویر bitmap میپذیرد، مثل پیشنمایش شبکههای اجتماعی یا CMS بدون پشتیبانی از SVG، بهتر است.
آیا WebP پسزمینهٔ شفاف SVG من را حفظ میکند؟
بله. WebP در هر دو حالت فشردهسازی با اتلاف و بدون اتلاف کانال آلفای کامل دارد، پس بخشهایی از SVG که رنگی ندارند شفاف میمانند. لبهٔ شکلها نسبت به شفافیت هموار (anti-alias) میشود و روی هر رنگ پسزمینهای درست دیده میشود.
برای آثار وکتور، WebP با اتلاف بهتر است یا بدون اتلاف؟
حالت بدون اتلاف برای لوگوها، آیکونها و نمودارهای تخت با چند رنگ ساده مناسب است؛ اینها خیلی خوب فشرده میشوند و لبههایشان کاملاً تمیز میماند. حالت با اتلاف با کیفیت 85 تا 90 برای تصویرسازیهای دارای گرادیان، سایه یا بافت مناسب است، چون فایلهای بدون اتلاف آنها سنگین میشوند. هر دو را روی یک فایل امتحان کنید و نتیجهٔ کمحجمتری را که تمیز به نظر میرسد نگه دارید.
چرا نمیتوانم SVG را در وردپرس بارگذاری کنم؟
وردپرس SVG را از نوعهای مجاز بارگذاری کنار گذاشته، چون SVG میتواند اسکریپت داشته باشد. اما از نسخهٔ 5.8 که در سال 2021 منتشر شد WebP را میپذیرد، پس با تبدیل، فایلی میگیرید که کتابخانهٔ رسانه بدون افزونهٔ امنیتی قبول میکند. سایتهایی که به وکتور واقعی نیاز دارند هنوز میتوانند با یک افزونهٔ پاکسازیکننده پشتیبانی SVG اضافه کنند.
آیا می‌توانم از WebP در خبرنامهٔ ایمیلی استفاده کنم؟
از آن پرهیز کنید. چند برنامهٔ ایمیل، از جمله Outlook دسکتاپ برای Windows، WebP را نمایش نمی‌دهند و Gmail هم SVG را رندر نمی‌کند. برای ایمیل، طرح را با تبدیل SVG به PNG رندر کنید.
