שלחתי לוגו שהומר ללקוח's אתר פעם אחת והוא חזר עם מלבן שחור במקום שבו היה הרקע השקוף. המרתי PNG ל-JPEG בלי לחשוב על זה. החלק המוזר היה שאני צפוי לבן - כל מאמר שקראתי אמר שקיפות " הופך לבן." זה הפך שחור, ואני ביליתי עשרים דקות בהנחה הקוד שלי נשבר לפני שקראתי את מפרט HTML וגיליתי הדפדפן עושה בדיוק מה שנאמר לו.
זה הנושא הישר של המדריך הזה. ה ממיר פורמט תמונה על Toolz.dev הוא עטיפה דקה מעל הדפדפן 's מקודד קנבס משלו. זה נותן לו יתרונות אמיתיים - שום דבר לא מעלה, זה 's מיידי, זה עובד במצב לא מקוון לאחר הטעינה - ומגבלות אמיתיות שרוב " להמיר כל תמונה לכל פורמט" דפים לא יודו. בניתי את זה, אז I' אגיד לך את שני החצאים.
TL;DR: ה ממיר פורמט תמונה לוקח כל תמונה שהדפדפן שלך יכול לפתוח ומקודד אותה מחדש כ PNG, JPEG, או WebP- שלושת אלה, ורק שלושת אלה אין פלט AVIF, GIF, או SVG, כי הכלי משתמש בדפדפן's מקודד קנבס וזה מה הקנבס תומך בחר יעד, גרור את המחוון האיכות (JPEG ו WebP בלבד - PNG מתעלם), הורד שני דברים לדעת לפני שאתה להמיר: חומרי שקיפות מרוכבים על שחור כאשר אתה מכוון ל-JPEG, לפי מפרט, ו מטא נתונים של EXIF מופשטים על כל המרה, כי קנבס re-encode רק נושאת פיקסלים.כדי לכווץ קבצים, להתאים אותו עם ה מדחס תמונה וה שינוי גודל תמונה כלי.
במה הממיר הזה באמת תומך?
Let's מקבלים את ההיקף הנכון קודם, כי זה המקום שבו רוב מדריכי הפורמטים מוכרים יתר על המידה.
קלט: בוחר הקבצים מקבל image/*, והקובץ נטען למישור <img> אלמנט אז אם הדפדפן שלך יכול להציג אותו, הכלי יכול לקרוא אותו - PNG, JPEG, WebP, GIF, BMP, AVIF, וברוב הדפדפנים המודרניים, SVG.
פלט: PNG, JPEG, WebP. שלושה כפתורים. That's הרשימה.
הסיבה היא לא עצלות, it's הפלטפורמה הכלי מצייר את התמונה שלך ל-a <canvas> ושיחות canvas.toBlob(callback, type, quality). HTML Living Standard דורש מכל דפדפן לתמוך image/png עבור אותה שיחה ומשאיר פורמטים אחרים אופציונליים; בפועל, image/jpeg ו image/webp נתמכים בכל מקום ו image/avif קידוד לא. אין API של דפדפן לכתיבת AVIF או GIF מקנבס. אתר שמציע לך פלט AVIF הוא משלוח מקודד WebAssembly (מאות קילובייט של הורדה) או - הרבה יותר לעתים קרובות - העלאת התמונה שלך לשרת. זה גם לא מה שהכלי הזה עושה.
אז הנה טבלת ההשוואה הכנה, כלי ראשון:
| אתה רוצה | הכלי הזה | למה |
|---|---|---|
| PNG → JPEG | כן | קנבס מקודד image/jpeg |
| PNG → WebP | כן | קנבס מקודד image/webp |
| JPEG → WebP | כן | ההמרה הכי שימושית כאן |
| WebP → PNG/JPEG | כן | לכלים שעדיין יכולים't לקרוא WebP |
| AVIF → WebP | כן (AVIF ב רק) | דפדפן מפענח AVIF; can't מקודד אותו |
| כל דבר → AVIF | לא | לא קיים מקודד AVIF קנבס |
| אנימציה GIF → אנימציה WebP | לא | An <img> נותן לקנבס מסגרת אחת |
| כל דבר → SVG | לא | SVG הוא וקטור; זהו צינור רסטר |
| אצווה של 200 קבצים | לא | קובץ אחד בכל פעם |
אם אתה צריך AVIF או WebP מונפש, השתמש squoosh מקומית, cwebp/avifenc משורת הפקודה, או שלב התמונה שלך Build pipeline's. אני מעדיף לשלוח אותך למקום שימושי מאשר להעמיד פנים.
מדוע JPEG הופך את הרקע השקוף שלי לשחור?
כי המפרט אומר כך, ולמדתי את זה רק אחרי המייל של הלקוח.
ל-JPEG אין ערוץ אלפא. כאשר אתה מבקש מקנבס לבצע סדרה לפורמט ש-'t תומך באלפא, ה-HTML Living Standard מפורש: יש להרכיב את מפת הסיביות על גבי א רקע שחור מוצק לפני הקידוד.לא לבן. שחור. Chrome, Firefox, ו - Safari כולם עוקבים אחר זה, וזו הסיבה שההתנהגות עקבית ומדוע היא מפתיעה את כולם בדיוק פעם אחת.
כך: המרת לוגו PNG שקוף ל-JPEG תיתן לך קופסה שחורה מאחוריו. בכל פעם. That's לא באג בכלי, it's הפלטפורמה להיות עקבי, ושום כמות של גרירת מחוון האיכות מתקן את זה.
מה לעשות במקום:
- לשמור על שקיפות? מטרה PNG או WebP. שניהם נושאים אלפא. WebP בדרך כלל יהיה הקטן מבין השניים.
- צריך JPEG ספציפית? שטחו את התמונה על צבע הרקע שאתם בעצם רוצים בעורך תחילה, ואז להמיר.
- רק ממיר תמונה? לתמונות אין שקיפות, אז זה אף פעם לא עולה. המר משם.
זוהי הדרך הנפוצה ביותר שאנשים פוגעים בתמונה עם ממיר, והיא 's שווה הפנמה: אלפא הוא מאפיין של הפורמט, לא של הקובץ שלך. בחירה ב-JPEG היא בחירה לזרוק את ערוץ האלפא.
מה עוד הולך לאיבוד בקוד מחדש של קנבס?
קנבס מחזיק פיקסלים. רק פיקסלים. כל השאר בקובץ המקורי שלך נמחק כאשר הדפדפן מקודד מחדש, וזה תופס אנשים:
EXIF נעלם. יצרן ודגם מצלמה, עדשה, חשיפה, תאריך לכידה, שדות זכויות יוצרים ו קואורדינטות GPS הכל נעלם. זהו ניצחון בפרטיות במקרה - המרת תמונת טלפון לפני שאתה מפרסם אותה מפשיטה את המיקום שבו צולמה - אבל אם אתה ' אתה ארכיונאי או שאתה צריך את שדה זכויות היוצרים כדי לשרוד, אל תריץ מסמכים מקוריים דרך כל קנבס ממיר מבוסס המרת עותק.
פרופילי צבע משתטחים. תמונה מתויגת עם פרופיל רחב כמו Display P3 או Adobe RGB נמשכת אל קנבס שבפועל מתייחס אליו כאל sRGB. עבור תמונות אינטרנט זה מה שאתה רוצה בכל מקרה. לעבודת הדפסה, זה 't.
אנימציה קורסת לפריים אחד. An <img> אלמנט מוסר את הבד כל מסגרת שמציגה. זרוק GIF מונפש של שתים עשרה שניות ואתה ' תקבל סטילס בודד. הכלי לא מזהיר אותך על זה, שלדעתי הוא קצה מחוספס אמיתי ולא תכונה.
כל השאר מקודד מחדש מפיקסלים מפוענחים. מה שמביא אותנו לכלל האחד שהכי חשוב.
מהו אובדן דור, וכיצד אוכל להימנע ממנו?
בכל פעם שאתה שומר פורמט אובדן, המקודד זורק נתונים. לזרוק נתונים, לפענח אותם ולזרוק עוד, ואת תרכובות הנזק. זהו אובדן דור, וזה ' הסיבה שתבניות הממים שלך נראות כאילו נשלחו בפקס.
הכלל קצר: המר תמיד מהמקור הטוב ביותר שיש לך, לעולם לא מעותק שהומר.
באופן קונקרטי, JPEG → WebP → JPEG גרוע יותר מה-JPEG המקורי, פעמיים. הקוד הראשון ' חפצי s מקבלים התייחסות כפרטי תמונה אמיתיים על ידי הקוד השני, אשר מבלה בנאמנות ביטים בשימורם. אם יש לך קובץ RAW או ייצוא PNG, התחל שם.
There' היא תוצאה שמכשילה אנשים: המרת JPEG ל-PNG אינה משחזרת את האיכות. PNG הוא חסר אובדן, ולכן הוא ישמור על התמונה שלך בצורה מושלמת - כולל כל חפץ דחיסה שכבר אפוי בפיקסלים אתה מקבל את אותה תמונה פגומה בקובץ גדול פי שלושה או ארבעה. PNG-from-JPEG שווה את זה רק כשלב ביניים כאשר אתה' עומדים לעשות סבבי עריכה רבים ורוצים להימנע מדחיסה מחדש בכל שמירה.
איזה פורמט אני באמת צריך לבחור?
דלג על טקסונומיית הפורמט; כאן' ההחלטה לפי הסדר שאני מקבל אותה בפועל.
זה תצלום? WebP ב-80–85. אם משהו בצינור שלך יכול ' קרא את WebP, JPEG ב-80–85.
האם יש בה שקיפות? WebP. PNG אם אתה צריך תאימות מקסימלית.
האם זה צילום מסך, מדומה ממשק משתמש, תרשים או כל דבר עם טקסט וצבע שטוח? PNG, או WebP. JPEG's קוסינוס דיסקרטי להפוך מריחות קצוות חדים לתוך רעש יתושים גלוי סביב כיתוב - זה תוכנן בסוף 1980s עבור צילומים בטון רציף (הפורמט הוא סטנדרטי כמו ITU-T T.81 / ISO/IEC 10918-1) וטקסט הוא בדיוק התוכן הוא מטפל הגרוע ביותר.
האם זה לוגו או סמל שאתה שולט במקור שלו? גם לא - השתמש ב-SVG, וב-don' לא להעביר את זה דרך ממיר רסטר בכלל.
עבור המפרט מאחורי אלה: PNG הוא ISO/IEC 15948, ו-WebP פורסם לבסוף בשם RFC 9649 בשנת 2024, ארבע עשרה שנים לאחר שגוגל שלחה אותו. בגודל, Google' מחקר השוואה משלו מעמיד את WebP lossy קטן בכ-25–34% מ-JPEG ב-SSIM שווה ערך, ו-WebP ללא הפסדים בכ-26% קטן מ-PNG. אלו הם מספרי הספק 's בקורפוס הספק 's - התייחסו אליהם כאל רמז חזק, לא הבטחה לגבי התמונה הספציפית שלך. הסיבה לכך ש-I' נוח לצטט אותם היא שהם ' התאימו את התוצאות שלי מספיק בצילומי מסך ותמונות אמיתיים לאורך השנים. שלך עשוי להיות שונה, וזו הסיבה שהכלי מראה לך את גודל המקור לפני שאתה ממיר.
כיצד אוכל להמיר תמונה ב-Toolz.dev?
שלב 1: פתח את הממיר
עבור אל ה ממיר פורמט תמונה. אין מה להתקין, אין חשבון.
שלב 2: העלה את התמונה שלך
לחץ על אזור ההעלאה ובחר קובץ. זה נטען לדפדפן שלך באמצעות כתובת URL של אובייקט - הקובץ לעולם לא נשלח לשום מקום. You'תראה את שם הקובץ וגודלו.
שלב 3: בדוק את קריאת הפורמט
הכלי מראה נוכחי → יעד. "Current" נקרא מהקובץ's סוג MIME, אז א .jpg דוחות קבצים כ JPEG. בדיקת שפיות שימושית כאשר מישהו שינה את שמו של קובץ & #39;s סיומת מבלי להמיר אותו בפועל, מה שקורה יותר ממה שאתה & #39; חושב.
שלב 4: בחר את היעד שלך
PNG, JPEG או WebP.
שלב 5: הגדר איכות - אם היא חלה
מחוון האיכות (1–100, ברירת המחדל היא 90) מופיע רק עבור JPEG ו-WebP. That's מכוון: PNG הוא ללא הפסדים ו canvas.toBlob מתעלם מטיעון האיכות לחלוטין עבור image/png, אז הצגת סליידר שלא עושה כלום יהיה שקר.
לאן להגדיר את זה: 90 הוא ברירת המחדל וכמעט לא ניתן להבחין בו מהמקור עבור רוב התוכן. 80–85 הוא המקום שבו אני עובד בפועל - קטן יותר באופן משמעותי, עדיין נקי. מתחת ל-60 you'יראה את זה בתמונות, ובכל דבר עם טקסט you' יראה את זה הרבה יותר מוקדם.
שלב 6: המר והורד
מכה המר & הורד. קידוד מתרחש במחשב שלך, והקובץ נשמר כ converted_<original-name>.<ext>. המידות נשמרות בדיוק - הממיר מעביר את התמונה שלך #39; רוחב וגובה משלו, כך ששלב זה משנה את הקידוד ותו לא.
המר או דחיסה - איזה מהם אני צריך?
אנשים מגיעים לממיר כשהם רוצים קובץ קטן יותר, ולעתים קרובות זה ' הוא הכלי הלא נכון. שלוש עבודות שונות, שלושה כלים שונים:
| מטרה | כלי | מה משתנה |
|---|---|---|
| שנה את הקידוד | ממיר פורמט | פורמט, איכות |
| אותו פורמט, קובץ קטן יותר | מדחס תמונה | איכות בלבד |
| פחות פיקסלים | שינוי גודל תמונה | מידות |
והזכייה הגדולה ביותר היא כמעט תמיד זו שאנשים מדלגים עליה.If you're serving a 4000×3000 photo into a 1200px-wide layout, שינוי גודל מנצח כל בחירת פורמט בשילוב- you're לזרוק 90% מהפיקסלים שהדפדפן עמד להקטין ולזרוק בכל מקרה. שנה את הגודל תחילה, ואז המר. ביצוע זה בסדר הזה לוקח באופן שגרתי 4 MB PNG מתחת ל-200 KB, ושום כמות של בחירת פורמט חכמה במקור בגודל מלא לא מתקרבת.
הרגל אחד יותר שווה לבנות: לשמור על המקוריים שלך. Archive lossless masters, לייצר נגזרות lossy להפצה.When AVIF-everywhere סוף סוף מגיע, או הפורמט הבא אחריו, you'll לייצא מחדש ממקורות נקיים במקום להגדיל את קנה המידה חרטה.
שאלות נפוצות
איזה פורמט תמונה הכי מתאים לאתרים?
WebP, עבור רוב התוכן.It's קטן יותר מ-JPEG לתמונות וקטן מ-PNG לגרפיקה, הוא תומך בשקיפות, וכל דפדפן נוכחי קורא אותו - Safari היה ההחזקה האחרונה והוסיפה תמיכה בגרסה 14. AVIF דוחס טוב יותר, אבל אתה יכול 't לייצר אותו בדפדפן; אתה צריך שלב בנייה או מקודד לשולחן העבודה.
האם הכלי הזה יכול להמיר את התמונה שלי ל-AVIF?
מס 'הממיר מוציא PNG, JPEG, ו - WebP בלבד, כי הוא משתמש בדפדפן's מקודד קנבס ואף דפדפן לא יכול לקודד AVIF מקנבס הדפדפן שלך יכול לפענח AVIF, כך שתוכל להמיר קובץ AVIF ל WebP או PNG כאן - רק לא הכיוון השני עבור פלט AVIF, השתמש במקודד שורת פקודה כמו avifenc או צינור התמונה של framework's שלך.
מדוע ה-PNG השקוף שלי קיבל רקע שחור לאחר המרה ל-JPEG?
מכיוון של-JPEG אין ערוץ אלפא, ומפרט ה-HTML אומר שקנבס המסודר לפורמט ללא תמיכה באלפא חייב להרכיב את התמונה על רקע שחור מוצק. התנהגות עם מפרט It's, לא באג, ו-it' זהה בכל דפדפן. המר ל-PNG או WebP במקום זאת אם אתה צריך לשמור על שקיפות.
האם המרת תמונה מסירה את נתוני ה-EXIF שלה?
כן - כל זה, כולל קואורדינטות GPS, הגדרות מצלמה ותאריך לכידה הכלי מצייר את התמונה שלך לקנבס ומקודד מחדש את הפיקסלים, וקנבס אינו נושא מטא נתונים. That's שימושי אם אתה 're הפשטת נתוני מיקום לפני פרסום תמונה, ובעיה אם אתה צריך את המטא נתונים, אז שמור מקור לא מומר בכל מקרה.
האם אוכל להמיר GIF מונפש ל-WebP מונפש?
לא עם הכלי הזה. זה טוען את התמונה שלך לתוך <img> אלמנט ולוכד מסגרת בודדת לקנבס, כך GIF מונפש יוצא כתמונת סטילס אחת.WebP מונפש דורש מקודד אמיתי מרובה פריימים - שימוש gif2webp מתוך Google's WebP כלים, או להמיר את האנימציה ל MP4, אשר יהיה קטן באופן דרמטי מכל אחד מהם.
האם המרת JPEG ל-PNG תשפר את האיכות?
מס 'PNG הוא ללא אובדן, אז זה משמר בדיוק מה זה & #39;s נתון - כולל חפצי הדחיסה כבר אפוי לתוך JPEG #39;s פיקסלים. אתה בסופו של דבר עם תמונה זהה למראה בקובץ גדול בהרבה נתונים אבודים אבדו; שום שינוי בפורמט לא מחזיר אותו.
האם יש מגבלת גודל קובץ?
לא נאכפת מגבלה קשה התקרה המעשית היא המכשיר שלך's זיכרון, מאז התמונה כולה מפוענחת לתוך מפת סיביות בד ברוחב בערך × גובה × 4 בתים - תמונה 8000×6000 צריך כ 192 MB של זיכרון RAM כפיקסלים גולמיים לפני הקידוד אפילו מתחיל דפדפנים שולחניים לטפל פלט מצלמה טיפוסי ללא תלונה; טלפונים ישנים יותר עשויים להיאבק עם קבצים גדולים מאוד.
מה ההבדל בין PNG ל-JPEG?
JPEG הוא lossy ובנוי עבור צילומים: הוא משליך פרטים עדינים כדי להגיע לקבצים קטנים, ואין לו שקיפות.PNG הוא lossless ובנוי עבור גרפיקה, צילומי מסך, ולוגו: הוא שומר כל פיקסל בדיוק ותומך ברקע שקוף, במחיר של קבצים גדולים יותר עבור תמונות אתה יכול להמיר ביניהם כאן, אבל זכור PNG שקוף נשמר כמו JPEG מקבל רקע מוצק, מאז JPEG אין ערוץ אלפא.
כיצד אוכל להמיר תמונה ל-WebP בחינם?
טען את ה-PNG או ה-JPEG שלך, בחר ב-WebP כפורמט הפלט, הגדר את האיכות אם אתה רוצה קובץ קטן יותר, והורד - הוא חינמי ופועל כולו בדפדפן שלך. WebP הוא בדרך כלל ההמרה ששווה לבצע עבור האינטרנט, מכיוון שהוא קטן יותר מ-JPEG וגם מ-PNG תוך תמיכה בשקיפות ונקרא על ידי כל דפדפן נוכחי.
האם התמונה שלי עולה לשרת?
מס 'הקובץ נקרא באופן מקומי עם כתובת URL של אובייקט, מפוענח על ידי הדפדפן שלך, מקודד מחדש על ידי הדפדפן שלך & #39;s קנבס, ונשמר על ידי הדפדפן שלך. אתה יכול לאמת זאת בעצמך: פתח את DevTools, עבור ללשונית רשת והמיר תמונה - אתה & #39;לא תראה שום העלאה לאחר טעינת הדף, ההמרה עובדת כשה-Wi-Fi שלך כבוי.
הגרסה הקצרה
קנבס דפדפן הוא ממיר תמונה טוב וכנה לשלושה פורמטים ורע לכל השאר. בתוך PNG, JPEG ו-WebP it's מיידי, פרטי וחינמי, והוא מכסה את ההמרה שבעצם חשובה לאינטרנט: קבלת התמונות שלך ל-WebP. מחוץ לשלושה האלה, זה יכול ' לא לעזור, ו-I' מעדיף לומר זאת מאשר לתת לך לגלות עם מלבן שחור בדף הבית של client's.
לפני שאתה ממיר משהו, שאל אם אתה צריך שקיפות (ואז לא JPEG), האם אתה צריך את המטא נתונים (ואז שמור את המקור), והאם התמונה היא פשוט יותר מדי פיקסלים (אז לשנות גודל ראשית). קבל את שלושת אלה נכון ובחירת הפורמט היא החלק הקל.
ה ממיר פורמט תמונה נמצא כאן.לשאר זרימת העבודה של התמונה, שם's the מדחס תמונה, ה שינוי גודל תמונה כלי, ו - עבור גזרות רקע שטוחות - ה מסיר רקע. התמונה הרחבה יותר נמצאת ב מדריך כלי תמונה וה מדריך דחיסת תמונה.
