איך עובד שינוי גודל תמונה בדפדפן?
תשובה קצרה: Utiliome מפענחת את תמונת המקור ל-RAM של הדפדפן, מקצה משטח HTML5 Canvas 2D ברוחב ובגובה המדויקים, ודוגמת מחדש את רשת הפיקסלים באינטרפולציה ביקובית מואצת חומרה — בלי העלאה לשרת.
כל תמונת רסטר דיגיטלית היא רשת דו-ממדית קבועה של פיקסלים (למשל תמונת סמארטפון של 12 מגה-פיקסל היא 4000 × 3000). כשמטמיעים תמונה ברוחב 4000 פיקסלים במיכל אתר של 800 פיקסלים בלבד, הדפדפן של המבקר עדיין מוריד את כל 12 מיליון הפיקסלים לפני שהוא מקטין אותה על המסך.
Utiliome דוגמת מחדש את מטריצת הפיקסלים מקומית בלשונית:
- אינטרפולציה באיכות גבוהה: עם
imageSmoothingQuality = 'high' בהקשר HTML5 Canvas 2D, ערכי פיקסלים שכנים ממוצעים כך שטיפוגרפיה, פורטרטים וקצוות מוצר נשארים חדים אחרי הקטנה.
- נעילת יחס גובה-רוחב: כשנעילת יחס פעילה, Utiliome שומרת את היחס המדויק (
Height = Width ÷ AspectRatio) ומונעת עיוות.
- קידוד מחדש מקומי מיידי: ייצאו בפורמט המקורי או המירו תוך כדי ל-
WebP, JPG או PNG.
מידות פיקסלים לאתר, לרשת ולמסחר
תשובה קצרה: 1920×1080 px לבאנר Full HD, 1200×630 px לתצוגת Open Graph, 1080×1080 px לפוסט מרובע, 1080×1350 px לפיד אנכי, ו-2000×2000 px למוצר עם זום בחנות.
התאמת מידות הפיקסלים למיכל התצוגה מונעת קפיצות פריסה ובזבוז רוחב פס. השתמשו בטבלה כשמשנים גודל נכסים לאתר ולרשתות:
| שימוש / פלטפורמה |
מידות יעד (px) |
יחס גובה-רוחב |
פורמט מומלץ |
משקל טיפוסי |
| באנר Full HD באתר / תמונה ממוזערת ל-YouTube |
1920 × 1080 px |
16:9 |
WebP או JPG |
150 KB – 320 KB |
| Open Graph (OG) / כרטיס מאמר |
1200 × 630 px |
1.91:1 |
WebP או JPG |
80 KB – 160 KB |
| פוסט מרובע ב-Instagram / LinkedIn |
1080 × 1080 px |
1:1 |
JPG או PNG |
120 KB – 250 KB |
| פיד אנכי ב-Instagram / Facebook |
1080 × 1350 px |
4:5 |
JPG |
140 KB – 280 KB |
| סטוריז, Reels וכריכת TikTok |
1080 × 1920 px |
9:16 |
JPG או WebP |
180 KB – 350 KB |
| זום מוצר ב-Amazon / Shopify |
2000 × 2000 px |
1:1 |
JPG (רקע לבן) |
250 KB – 450 KB |
צריך לשנות את צורת התמונה (למשל 16:9 לריבוע 1:1 בלי למתוח את הנושא)? מסגרו קודם בכלי חיתוך תמונה ואז שנו גודל.
הקטנה מול הגדלה: איך להימנע מפיקסול
תשובה קצרה: הקטנה (הפחתת רוחב וגובה בפיקסלים) מרכזת נתונים קיימים, שומרת על קצוות חדים וחותכת עד 80% מהנפח. הגדלת תמונת רסטר קטנה מותחת פיקסלים קיימים — להגדלה עם פרטים השתמשו במגדיל AI.
הבנת אינטרפולציית פיקסלים עוזרת לקבל פלט חד ככל האפשר:
- הקטנה (למשל
4000×3000 → 1200×900 או 50%): הפחתת המידות ב-50% חותכת את מספר הפיקסלים ב-75% (מ-12 מגה-פיקסל ל-3), ומקטינה משמעותית את הנפח בלי לאבד חדות.
- הגדלה (למשל
300×200 → 1200×800): דגימה רגילה ב-Canvas ממלאת בין פיקסלים קיימים, ועלולה לרכך קצוות מעבר ל-120%. לשחזור פרטים בתמונה קטנה או מטושטשת, השתמשו ב-מגדיל תמונות AI.
רוצים לשמור את מידות הפיקסלים הנוכחיות ורק להקטין את המשקל ב-KB או MB? השתמשו בכלי דחיסת תמונה.
אצווה: מידות לכל לשונית או סנכרון קטלוג
תשובה קצרה: Utiliome שומרת הגדרות שינוי גודל לכל לשונית, כך שאפשר לקבוע מידות שונות לכל גרפיקה — או ללחוץ «החל מידות על כל התמונות» כדי להקטין תיקיית מוצרים באופן יחסי בלחיצה.
בהכנת נכסים להשקת אתר או לקטלוג מוצרים יש לרוב באנרים לרוחב, פורטרטים אנכיים ותמונות ממוזערות מרובעות. מרחב הלשוניות תומך גם בעבודה בודדת וגם באצווה:
- הגדרות נפרדות לכל לשונית: כל תמונה זוכרת מצב (
By Pixels מול By Percentage), רוחב/גובה יעד, נעילת יחס ופורמט פלט.
- סנכרון יחסי גלובלי: לחצו החל מידות על כל התמונות במצב אחוזים (למשל
50%) או ברוחב נעול (למשל 1200 px), ו-Utiliome תחשב גובה יחסי לכל תמונה באצווה.
צריך לבדוק DPI, מגה-פיקסלים ויחס לפני או אחרי ההקטנה? בדקו ב-בודק גודל תמונה, או המירו מיכלים באצווה ב-המרת תמונה.