סביר להניח שזה קרה לכם. דף מוצר נראה מלוטש ב-Shopify, התמונות חדות בעורך, ואז מבקרים בנייד מתחילים לקפוץ בזמן שדירוג PageSpeed שלכם נשאר בעקשנות על פני 160 מעלות. הבעיה בדרך כלל אינה "עיצוב גרוע". אלא שקובצי התמונות גדולים מדי עבור הפריסה, וכל בייט נוסף צריך לעבור לפני שקונה רואה את המוצר, את המחיר או את כפתור ההוספה לעגלה.

זו הסיבה שהחלטות לגבי תמונות בחנות אינן רק החלטות עיצוב. הן משפיעות על מהירות הדף , על איכות הוויזואליה ועל כמה מהדף גוגל יכולה לסרוק ולעבד מהר מספיק כדי שיהיה חשוב. אם אתם רוצים קיצור דרך מעשי לשינוי גודל בלי לנחש, מדריך שינוי גודל התמונות של יאסין מלטי הוא בן לוויה שימושי, כי הוא עוזר לכם להבין את המכניקה לפני שאתם מעלים את הקבוצה הבאה.

תוֹכֶן הָעִניָנִים

למה גודל קבצי תמונות חשוב בחנות Shopify

סוחר יכול להסתכל על דף מוצר מלוטש במנהל Shopify ועדיין לפספס את הבעיה הבסיסית. הדף עשוי להרגיש בסדר במחשב נייד דרך Wi-Fi, ואז להיתקע בנייד, תמונת הכותרת מופיעה באיחור, והקונה גולל מעבר לקפל לפני שהדף מרגיש מוכן. הפער בין דף שנראה טוב לדף שנטען מהר הוא המקום שבו גודל קבצי התמונות קובע האם ביקור הופך להכנסה או לחיכוך.

התחרות הנסתרת בכל עמוד

כל תמונה בחנות מתחרה בטקסט, בסקריפטים, בסכימה ובסבלנות הלקוח. אם תמונת הכותרת גדולה מדי, היא עושה יותר מאשר רק גוזלת רוחב פס, היא מאטה את הרגע שבו המבקר יכול לשפוט את ההצעה. משקל התמונה הוא שאלת המרה ושאלה של מדדי ליבה של רשת בו זמנית.

סוחרי Shopify בדרך כלל מרגישים זאת תחילה בדפי מוצר ודפי קולקציות. מספר תמונות גדולות יכולות לגרום לכל הפריסה להרגיש כבדה, במיוחד ברשתות סלולריות, ומשקל זה מופיע במקומות החשובים ביותר, התמונה הראשית, רשת הקולקציה, זום המוצר ותמונות ממוזערות. לתמונה הראשית יש תפקיד שונה מתמונה ממוזערת, ולכן היא לא צריכה לשאת את אותו עומס גודל קובץ. אותו הדבר נכון לגבי רשתות קולקציות, שבהן תמונות חוזרות מצטברות במהירות ומענישות על כל גלילה.

גודל קובץ התמונה משפיע גם על המהירות שבה הדף הופך לשימושי, ולכן הוא שייך לאותו דיון כמו תכנון הפריסה. מידות התמונה הגולמית חשובות, אך גודל הקובץ המתקבל הוא מה שהדפדפן צריך לאחזר ולפענח. כפי שמוסבר במדריך לשינוי גודל תמונה של יאסין מלטי , ייצוא קטן יותר יכול לשמר את התפקיד הוויזואלי של התמונה תוך הסרת משקל מיותר.

התמורה המעשית

הסיבה שזה חשוב היא פשוטה. ספירת הפיקסלים הבסיסית קובעת את קו הבסיס, ודחיסה ופורמט קובעים את גודל הקובץ הסופי. תמונה של 24 מגה פיקסל ברזולוציית RGB של 24 סיביות מכילה כ -72 מיליון בייטים של נתוני פיקסלים גולמיים, בעוד שאותה תמונה יכולה להגיע לכ -423.41 KB כקובץ JPEG באיכות 100% או לכ -211.7 KB באיכות JPEG של 90%, בהתאם לבחירות הייצוא ( Scantips ). פער זה הוא הסיבה לכך ששתי חנויות יכולות להשתמש בתמונות שנראות כמעט זהות ועדיין לקבל תוצאות מהירות שונות מאוד.

כלל מעשי: אם תמונה חשובה יותר למכירה מאשר לקישוט, קבעו לה גודל קובץ יעד לפני שאתם מעלים אותה.

זהו הסטנדרט שבו סוחרים צריכים להשתמש. קבעו תקציב לכל משבצת חנות, ולאחר מכן התאימו את הקובץ למשימה. באנר "גיבורי" יכול להצדיק משקל רב יותר מתמונה ממוזערת, אך אף אחד מהם לא אמור לאלץ את שאר הדף לשאת מטען נוסף. ברגע שההרגל הזה קיים, דפי מוצרים קלים יותר לניהול, ולכל העלאה חדשה יש מקום במקום להפוך לעוד גרירה נסתרת.

גודל תמונה לעומת גודל קובץ ומדוע שניהם חשובים

סוחרים משתמשים לעתים קרובות במונחים אלה כאילו הם מתכוונים לאותו הדבר, ואז תוהים מדוע תמונה נראית בסדר במנהל אך מאטה את חזית החנות. גודל התמונה הוא ממדי הפיקסלים, רוחב כפול גובה. גודל הקובץ הוא משקל הקובץ המיוצא בבתים בדיסק, בדרך כלל KB או MB, והוא משתנה בהתאם לדחיסה, לפורמט ולעומק הסיביות. שתי תמונות יכולות לחלוק את אותם ממדים ועדיין ליצור עלויות טעינה שונות מאוד.

דיאגרמה המשווה את גודל התמונה בפיקסלים לגודל הקובץ בבייטים עבור צילום דיגיטלי וגרפיקה.

פיקסלים קובעים את התקרה

פיקסלים מגדירים כמה פרטים חזותיים הקובץ יכול להכיל. תמונה של 24 מגה פיקסל ברזולוציית RGB של 24 סיביות מכילה כ -72 מיליון בייטים של נתוני פיקסלים גולמיים, מכיוון ש -24 מיליון פיקסלים × 3 בייטים לפיקסל = 72,000,000 בייטים . מספר גולמי זה הוא נקודת ההתחלה לייצוא, ולא המשקל הסופי שהדפדפן מקבל.

אפשרויות הייצוא משנות את התוצאה במהירות. אותה תמונת מקור יכולה לצאת בגודל של כ -423.41 KB כקובץ JPEG באיכות 100% וכ -211.7 KB באיכות JPEG של 90%. הפיקסלים נשארים זהים, בעוד שהייצוא משמר פחות או יותר את הפרטים המקוריים.

דחיסה ופורמט קובעים את התוצאה

ביקורות רבות של Shopify פוסעות כאן. סוחרים מניחים שתמונה גדולה חייבת להיות כבדה מדי עבור האינטרנט, אך מידות ומשקל הקובץ הן החלטות נפרדות. תמונה גדולה עדיין יכולה להיות קובץ סביר אם היא מיוצאת היטב. גרפיקה צנועה למראה עלולה להפוך לנפוחה אם היא נשמרת בפורמט שגוי או באיכות שגויה.

ההבדל הזה משנה את תפקיד החנות. באנר גיבור יכול לשאת משקל ויזואלי רב יותר מתמונה ממוזערת, אך תמונת רשת של קולקציה עדיין צריכה להישאר בהירה מספיק כדי שהדף ייטען בצורה חלקה. צילומי זום של מוצרים זקוקים לפרטים פיקסלים מספיקים כדי להחזיק מעמד מקרוב, בעוד שתמונות ממוזערות בדרך כלל מבזבזות רוחב פס אם הייצוא שומר על הרבה יותר פרטים ממה שהפריסה יכולה להציג.

כלל אצבע: פיקסלים קובעים כמה פרטים חזותיים התמונה יכולה להציג. גודל הקובץ קובע כמה הקונה שלך צריך להוריד.

שמרו על שני המספרים הללו בנפרד ותכנון התמונה יהפוך לקל יותר. משבצת תמונה ממוזערת צרה אינה נהנית ממידות גדולות מדי. תמונת זום של דף מוצר אכן זקוקה למספיק פיקסלים כדי להיראות חדה, אך הקובץ המיוצא עדיין צריך להישאר סביר עבור Core Web Vitals ועבור שאר הדף שצריך להיטען סביבה.

השוואה בין JPEG, PNG, WebP ו-AVIF

כל פורמט תמונה משרת מטרה שונה בחנות Shopify. תמונת מוצר, לוגו וצילום מסך - כולם דורשים טיפול שונה, גם כשהם באותה ערכת עיצוב. בחרו את הפורמט בהתבסס על התפקיד שהתמונה צריכה לעשות בדף, ולא על סמך הרגל.

אינפוגרפיקה המשווה את פורמטי התמונה JPEG, PNG, WebP ו-AVIF עם תיאורים של התכונות ומקרי השימוש שלהם.

JPEG ו-PNG עדיין מרוויחים את מקומם

JPEG נשאר הבחירה הסטנדרטית לתמונות. הוא דחוס היטב, עובד כמעט בכל מקום, ובדרך כלל שומר על תמונות מוצר בהירות מספיק עבור האינטרנט. PNG מתאים לתמונות שצריכות קצוות חדים, צבע אחיד, שקיפות או טקסט, ולכן לוגואים וגרפיקה של ממשק משתמש לרוב שייכים לשם למרות שהקבצים בדרך כלל כבדים יותר.

לחלוקה הזו יש משמעות ב-Shopify מכיוון שחנויות בדרך כלל מערבבות את שני סוגי הנכסים. תמונת לייף סטייל שנשמרה כ-PNG היא בדרך כלל משקל רב יותר ממה שחלון הראווה צריך לשאת. לוגו שנשמר כ-JPEG יכול להיראות מחוספס או לאבד שקיפות, מה שיוצר ניקוי שניתן להימנע ממנו בהמשך. הפורמט צריך להתאים לעבודה, לא להרגל.

כרטיס איסוף הוא דוגמה טובה. אם התמונה היא צילום מוצר נקי, JPEG בדרך כלל שומרת על המשקל נמוך מבלי לפגוע בתצוגה של הקונים. אם הנכס הוא תג, סמל או לוגו הממוקם על רקע צבעוני, PNG מגן טוב יותר על הקצוות ומונע הילות מכוערות.

גודל קבצי push של WebP ו-AVIF קטן יותר

הפורמטים המודרניים בדרך כלל מקצצים את גודל הקובץ עוד יותר. עבור תמונה לדוגמה באיכות דומה, JPEG ב-75% הוא כ- 1.25-1.53 מגה-בייט , WebP lossy הוא כ- 0.72-0.88 מגה-בייט , AVIF הוא כ- 0.57-0.69 מגה-בייט, ו- JPEG XL הוא כ- 0.55-0.67 מגה-בייט ( W3Techs ). זוהי ירידה משמעותית מהרגלי ייצוא ישנים יותר, והיא מסבירה מדוע חנויות רבות יכולות להפחית משקל מבלי לגרום לתמונות להיראות רכות.

הבעיה היא שבחירת הפורמט עדיין תלויה בתוכן עצמו. WebP ו-AVIF יכולים לעבוד מצוין לצילום מוצרים, אך גרפיקה עם שקיפות יכולה להתנהג בצורה שונה. אם קובץ הוא בעיקר תצלום, השתמשו בפורמט שדוחס את סוג התמונה ביעילות. אם מדובר בלוגו או בגרפיקה עם שקיפות, השתמשו בפורמט ששומר על קצוות נקיים.

בחנות Shopify, זה בדרך כלל אומר פורמט אחד עבור הבאנר הראשי, אחר עבור הלוגו, ואחר עבור תמונות תקריב של המוצר. הבחירה הנכונה היא פחות מה נראה מודרני ויותר מה שומר על מהירות הדף ועדיין מציג את התמונה בבירור במיקומה האמיתי.

כלל החלטה: צילום עם אנשים, מוצרים או מרקם, בחר JPEG או WebP. גרפיקה שטוחה, לוגואים או צילומי מסך, בחר PNG. אם זרימת העבודה שלך יכולה לתמוך בגיבוי, AVIF או WebP הן אפשרות אחסון חי נקייה יותר.

כיצד רזולוציה ודחיסה משנות את המספרים

קובץ יכול להיראות בסדר על המסך ועדיין להיות כבד בהרבה ממה שהוא צריך להיות. זה החלק שסוחרים מרגישים קודם כל ב-Shopify, כי אותה תמונה יכולה להתנהג בצורה שונה מאוד כבאנר ראשוני, רשת קולקציה, תמונת זום של מוצר או תמונה ממוזערת קטנה. הרזולוציה קובעת כמה פיקסלים אתם מבקשים מהדפדפן לשאת, ודחיסה קובעת כמה ממשקל זה ייחתך לפני טעינת הדף.

יותר פיקסלים פירושם יותר נתונים

תמונה גדולה יותר אינה רק בד ציור גדול יותר, אלא יותר נתונים גולמיים עבור הדפדפן לעבד. כפי שהוצג קודם לכן, תמונה של 24 מגה פיקסל מכילה כ-72 מיליון בייט של נתונים גולמיים לפני תחילת הדחיסה. אם מייצאים את אותה סצנה במספר פיקסלים גבוה יותר ממה שדרוש לחנות, הקובץ הופך כבד יותר גם אם התמונה נראית כמעט זהה לאחר הצגתה.

זו הסיבה שיצואים גדולים מדי גורמים ליותר מאשר עומס אחסון. הם מוסיפים משקל העברה, גורמים לדפדפן לעבוד קשה יותר ויכולים להאט את התמונה בדיוק במקום שבו הקונים מצפים שהדף ירגיש מהיר. משבצת רשת של קולקציה אינה זקוקה לאותו מטען כמו תמונת מוצר הניתנת להגדלה, ותמונה ממוזערת זקוקה להרבה פחות מכל אחד מהם.

דחיסה מצילה אותך, אבל היא לא מפנה פיקסלים נוספים

דחיסה יכולה לצמצם קובץ מקור גדול למשהו ש-Shopify יכולה לספק ביעילות, אך היא לא מוחקת את העלות של שימוש ביותר פיקסלים ממה שהמיקום דורש. אם תמונת מוצר נכנסת לגלריה עם אפשרות זום, אתם רוצים מספיק פרטים כדי להישאר חדים על מסך טוב. אם אותה תמונה נכנסת רק לכרטיס איסוף, משלוח הגרסה בגודל מלא הוא בזבוז מאמץ.

הדרך הנקייה לחשוב על זה היא פשוטה. פיקסלים קובעים את רף הבזבוז , מכיוון שממדים גדולים מדי יוצרים משקל שניתן להימנע ממנו. הגדרת האיכות קובעת את רף החיסכון , מכיוון שהיא קובעת כמה פרטים יישמרו ביצוא. הפורמט שולט בכמה הדחיסה הזו עוזרת , מכיוון שסוגי קבצים שונים אינם מתכווצים באותו אופן.

להנחיות לגבי גודל תמונות הקשורות למקרי שימוש ב-Shopify, מדריך קידום אתרים זה של תמונות ב-Shopify הוא עזר שימושי. הוא עוזר לחבר את החלטת הייצוא למיקום בפועל במקום להתייחס לכל תמונה בחנות כאילו היא משרתת את אותה מטרה.

תמונת גיבורה, משבצת קולקציה ותמונה ממוזערת - כולן דורשות רמות שונות של פירוט. זהו החלק שסוחרים בדרך כלל מפספסים, וזו הסיבה ששינוי קטן ברזולוציה יכול להרגיש לא מזיק בעורך ועדיין ליצור חנות כבדה יותר בדפדפן.

נקודות חיוניות ברשת ועלות ה-SEO של תמונות כבדות

תמונות כבדות פוגעות בקידום אתרים (SEO) בצורה ישירה מאוד, משום שגוגל מודד את החוויה, ולא את הכוונה מאחורי ההעלאה. בדפי Shopify רבים, התמונה הגדולה ביותר הנראית לעין היא הדבר שסביר להניח שישלוט בחוויית הטעינה. אם תמונה זו כבדה מדי, Largest Contentful Paint מאטה, והמבקר ממתין זמן רב יותר לפני שהדף מרגיש שמיש.

תרשים עמודות המציג כיצד הגדלת גודל קבצי תמונה משפיעה לרעה על זמני טעינת דף הצביעה התוכננת הגדולים ביותר.

LCP בדרך כלל מאשימים את הדבר הלא נכון

סוחרים נוטים להאשים קודם כל אפליקציות, סקריפטים או קוד תבנית, ולפעמים הם צודקים. אבל תמונת הגיבור היא לרוב הניצחון הקל ביותר. תמונת גיבור גדולה יכולה לעכב את הרגע שבו הדף הופך למשמעותי, במיוחד במובייל, שבו איכות החיבור משתנה ואזור התצוגה קטן מספיק כך שקל לזהות נכסים גדולים מדי.

המדד השני שמשקל התמונה משפיע עליו הוא Cumulative Layout Shift . אם התבנית שלכם לא שומרת מקום כראוי לתמונות, הפריסה קופצת כאשר הנכסים נטענים. זה מרגיש מרושל לקונים ומקשה על השימוש בדף. תבניות של Shopify לרוב עושות חלק מהעבודה הזו כבר, אבל לא תמיד מספיק כדי להציל סוחר מתהליך עבודה גרוע של תמונות.

יעדי הגודל אינם אקראיים

הנחיות טכניות להצגת תמונות באינטרנט בדרך כלל דורשות תמונות מוצר בגודל של כ -800 עד 1000 פיקסלים ו -80 עד 150 קילו-בייט , תמונות ראשיות בגודל של פחות מ -200 קילו-בייט , ותקציב כולל לתמונת עמוד של פחות מ -500 קילו-בייט . אותן הנחיות מציבות קבצי JPEG לרוב בגודל של כ -200 עד 600 קילו-בייט , WebP בגודל של 150 עד 450 קילו-בייט , AVIF בגודל של 80 עד 300 קילו-בייט , ו- PNG בגודל של 500 קילו-בייט עד 3 מגה-בייט ( Vizua ). טווחים אלה קיימים מכיוון שמשקל התמונה וביצועי העמוד קשורים זה לזה.

דף לא צריך להיות זעיר באופן מלאכותי כדי להיות מהיר. הוא כן צריך להיות ממושמע. אם טעינת התמונות שלך נפוחה, אתה גורם לדפדפן לעשות עבודה שלא משפרת את חוויית הקונה. זוהי עלות קידום אתרים ישירה, לא עלות תיאורטית.

עבור נקודת מבט ממוקדת ב-Shopify על תהליך הביקורת הרחב יותר, מדריך קידום אתרים זה לתמונות עבור Shopify הוא נקודת התייחסות שימושית.

גדלי קבצי תמונה יעד לפי מיקום ב-Shopify

הדרך הקלה ביותר להפסיק לנחש היא לקבוע תקציב גודל קובץ לכל תפקיד ויזואלי בחנות. באנר גיבור עושה עבודה שונה מתמונה ממוזערת, ואין לייצא רשת קולקציות באותו משקל כמו תמונת מוצר הניתנת להגדלה. ברגע שסוחרים מקצים גדלי קבצי תמונה למיקומים בפועל, קל יותר לתחזק את החנות במהירות וקל הרבה יותר לבקר אותה.

תן לעיצוב החנות להכתיב את בחירות הייצוא שלך

תמונות ברוחב מלא בדרך כלל דורשות יותר מקום מאשר בלוקי פריסה קטנים. הנחיות תמונה רספונסיביות מצביעות בדרך כלל על תמונות ברוחב מלא בסביבות 1600 פיקסלים ו -200 עד 300 KB , תמונות פריסה קטנות יותר ב-25% עד 50% הקרובות יותר ל -800 פיקסלים ו -70 עד 350 KB , ותמונות בגודל של פי 2 בערך משטח התצוגה כך שהן עדיין נראות חדות על מסכים בעלי צפיפות גבוהה. בפועל, משמעות הדבר היא שאותה תמונת מקור זקוקה לעתים קרובות לייצוא שונה, אחד עבור המשבצת שהיא ממלאת ואחד עבור הרינדור החד יותר שמסך צפוף מצפה לו.

יעדי גודל קובץ תמונה לפי מיקום ב-Shopify מיקום רוחב היעד גודל קובץ היעד פורמט מומלץ
באנר גיבור גיבור בראש הדף כ-1600 פיקסלים 200 עד 300 קילו-בייט JPEG או WebP
תמונה ממוזערת של רשת האוסף אריחי אוסף בערך 400 עד 600 פיקסלים 40 עד 80 קילו-בייט JPEG או WebP
תמונה של דף המוצר גלריית מוצרים ראשית בערך 800 עד 1200 פיקסלים 100 עד 200 קילו-בייט JPEG, WebP או AVIF
תמונה ממוזערת או דוגמית חריץ תמיכה קטן בערך 200 עד 400 פיקסלים שמור על כמה שיותר קל JPEG או PNG, בהתאם לתוכן

תמונת ראש יכולה לשאת משקל רב יותר מכיוון שהיא ממלאת חלק גדול יותר מחלון התצוגה. אריח אוסף לא יכול. זה ההבדל שסוחרים צריכים לזכור כשהם מייצאים תמונות עבור מדורי Shopify, מכיוון שגודל הקובץ צריך להתאים לשטח שהתמונה תופסת בדף.

מדוע ייתכן שתזדקק ליותר מייצוא אחד לאותה תמונה

דף מוצר מציג לעתים קרובות מספר גרסאות של אותו קובץ באמצעות עיצוב רספונסיבי. זה נורמלי. הדפדפן אמור לקבל קובץ קטן יותר עבור מסכים קטנים יותר וקובץ גדול יותר רק במקומות בהם הפריסה דורשת זאת. הגדרה זו שומרת על איכות הזום ללא שינוי מבלי לשלוח נפח מיותר לכל מבקר.

אותו היגיון חל גם מעבר לגלריית המוצרים. חנות צריכה לעיתים קרובות טיפול אחד עבור הדמות הראשית, טיפול אחר עבור כרטיסי איסוף, וטיפול אחר עבור תמונות מקרוב. אם אתם רוצים לשמור על נכסי מדיה חברתית ושיתוף מיושרים עם ויזואליות החנות, מדריך תמונות המדיה החברתית הזה של Shopify עוזר לחבר את הצרכים מחוץ לדף המוצר לאותו תהליך עבודה של תמונות.

כלל אצבע של Shopify: תן לחריץ להחליט על הייצוא. גיבור יכול להיות נדיב. תמונה ממוזערת של רשת לא.

כלל זה מונע את הטעות הנפוצה של העלאת תמונה ענקית אחת ולקוות שהתבנית תפתור את זה. תבניות יכולות לעזור, אבל הן לא יכולות לבטל החלטת ייצוא גרועה.

תפיסות מוטעות נפוצות שגורמות לחנויות להיות איטיות

הרבה חנויות Shopify איטיות הן איטיות משום שמישהו האמין בכלל חצי נכון וחזר עליו שוב ושוב. הרגלים אלה מופיעים שוב ושוב בביקורות, בדרך כלל משום שהעצה נשמעה הגיונית בהתחלה ומעולם לא נבדקה מול אופן טעינת החנות. ברגע שמפרידים בין הרגל לביצועים, התיקונים בדרך כלל פשוטים.

חמש אמונות שגורמות לנפיחות שניתן להימנע ממנה

  • רזולוציה גבוהה יותר תמיד פירושה איכות טובה יותר. זה מפסיק להיות נכון ברגע שהתמונה כבר גדולה יותר מהשטח שהיא ממלאת. פיקסלים נוספים לא עושים כלום לתצוגת הקונה, הם רק מוסיפים משקל.
  • PNG תמיד חד יותר מ-JPEG. PNG היא הבחירה הנכונה עבור לוגואים וגרפיקה עם קצוות קשיחים, אך תמונות מוצר בדרך כלל אינן זקוקות לתקורה ללא אובדן נתונים זו.
  • Shopify מבצעת אופטימיזציה אוטומטית של הכל. Shopify עוזרת במקרים מסוימים, אבל ההעלאה המקורית עדיין קובעת את התקרה למשקל הנכס.
  • WebP פוגע בקידום אתרים (SEO) משום שגוגל לא יכול לקרוא אותו. אמונה זו מיושנת. מערכות חיפוש יכולות לעבד פורמטים מודרניים כמו תמונות רגילות.
  • גודל התמונה קובע רק במחשב שולחני. קונים בנייד חשים קודם כל משקל מיותר של הקבצים, מכיוון שהמכשירים והחיבורים שלהם פחות מרווחים לטעויות.

סוחרי התיקונים יכולים להשתמש באופן מיידי

התיקון מתחיל בתפקיד, לא בהרגל. תמונת גיבור צריכה איכות מספקת כדי להחזיק את ראש העמוד. אריח אוסף צריך להישאר בהיר כדי שהרשת תטען בצורה נקייה. תמונת זום יכולה לשאת יותר פרטים מכיוון שהיא משרתת תפקיד אחר, בעוד שתמונה ממוזערת או דוגמית צריכות להישאר קטנות ככל שהפריסה מאפשרת.

זו הסיבה שכלל ייצוא אחד לכל תמונה גורם לבעיות. אם הנכס הוא תמונה, ייצוא לצורך מהירות וצבע אמין. אם מדובר בגרפיקה עם טקסט או שקיפות, הגן על הקצוות וקבל את העובדה שהקובץ עשוי להיות גדול יותר. אם הוא שייך לחריץ צר, אל תעלה קובץ המיועד לתצוגה ברוחב מלא.

כפי שצוין בסעיף הרזולוציה, תמונה ברזולוציה של 24 מגה פיקסל יכולה להגיע לגודל של בין 2 ל-8 מגה-בייט לאחר דחיסה, וזה מספיק כדי להראות מדוע ספירת הפיקסלים לבדה אינה אומרת אם תמונה מוכנה לגלישה באינטרנט. השאלה המרכזית היא האם הקובץ תואם את המיקום שהוא משרת ב-Shopify. תמונה מסוג hero יכולה לסבול יותר מכרטיס רשת, ותמונה מסוג zoom יכולה לסבול יותר מתמונה ממוזערת. הייצוא חייב להתאים לתפקיד.

טעות קשורה היא ההנחה שכל נכס זקוק לאותו ניקוי מטא-דאטה. אם התמונה חשובה מספיק כדי להציג אותה, חשובה מספיק כדי לבדוק אותה תחילה. השתמשו במחולל טקסט האלטרנטיבי עבור תמונות של Shopify כדי לשמור על עקביות בחלק זה של תהליך העבודה, ולאחר מכן שפטו את גודל הקובץ מול המשבצת שהוא ימלא.

זה החלק שרוב החנויות מפספסות. הקובץ לא צריך להיות קטן. הוא צריך להיות מתאים.

רשימת בדיקה חוזרת ונשנית עבור אוסף התמונות הבא שלך

תהליך העבודה הנקי ביותר של תמונות הוא זה שהצוות שלכם יכול לחזור עליו בלי לנחש. בכל פעם שאותן בדיקות מתרחשות באותו סדר, תקבלו פחות העלאות גדולות מדי, פחות הפתעות פריסה ופחות דפי מוצר איטיים שמסתתרים בקטלוג. אם אתם מכינים השקת מוצר חדשה או מרעננים ערכת נושא, הפעילו את הקבוצה בשגרה זו לפני שמשהו עולה לאוויר.

שגרת ייצוא פשוטה שמתאימה ל-Shopify

  1. ייצוא ברוחב היעד עבור המיקום. לתמונה ראשית, לכרטיס קולקציה, לתמונה ממוזערת של מוצר ולתמונות ממוזערות יש משימות שונות, לכן אין להעלות קובץ גדול יותר רק משום שתמונת המקור מאפשרת זאת.
  2. בחרו את הפורמט לפי תפקיד. תמונות מתאימות בדרך כלל ל-JPEG, WebP או AVIF. לוגואים וגרפיקה עתירת טקסט מתאימים יותר ל-PNG כאשר שקיפות או קצוות חדים חשובים.
  3. שמור גרסה חיה וגרסה עם זום במידת הצורך. קובץ הזום יכול לשמור פרטים נוספים, אך הדף הנראה לעין לא אמור לשאת משקל זה אלא אם כן הפריסה באמת זקוקה לכך.
  4. השתמשו בפורמט מודרני וקליל יותר במידת האפשר. השתמשו ב-WebP או ב-AVIF עבור התמונה החיה, ושמרו על JPEG כגיבוי כאשר תאימות חשובה.
  5. בדוק את המטא-דאטה של התמונה ואת הטקסט האלטרנטיבי לפני הפרסום. אם הנכס חשוב מספיק כדי להציג אותו, הוא חשוב מספיק כדי לבצע ביקורת. השתמש במחולל הטקסט האלטרנטיבי של RankEngine כדי לשמור על עקביות בחלק זה של תהליך העבודה.

צילום מסך מתוך https://rankengine.app

איזו עקביות קונה לך

שיפורים קטנים מצטברים לאורך כל הקטלוג. תמונת גיבורה בהירה יותר לא תשנה חנות בפני עצמה, אבל סט שלם של צילומי מוצר בגודל טוב, אריחי קולקציה ותמונות ממוזערות יכול לגרום לחזית החנות להרגיש נקייה, מהירה וקלה יותר לקניות. לקוחות שמים לב לכך גם אם הם אף פעם לא מדברים על גדלי קבצים.

אם הצוות שלכם מטפל במטא-דאטה של תמונות בקנה מידה גדול, מחולל הטקסט האלטרנטיבי של RankEngine יכול לשמור על חלק זה של זרימת העבודה בתנועה מבלי להפוך כל העלאה למטלה ידנית.

יש ליישם את השגרה הזו על האצווה הבאה שלך, וחלון הראווה שלך ייטען מהר יותר באופן מיידי.