תמונות הן בדרך כלל החלק הכבד ביותר בכל עמוד. צילום מהטלפון שוקל 3-6MB, ובאתר מספיק לו פחות מ-300KB. ההבדל הזה הוא ההבדל בין עמוד שנטען בשנייה לעמוד שגולשים סוגרים לפני שהוא נפתח.
שלושה דברים שמקטינים תמונה
- מידות: אין טעם להעלות תמונה ברוחב 4000 פיקסלים לאזור שמוצג ברוחב 1200. זה החיסכון הגדול ביותר.
- איכות דחיסה: בין 70% ל-80% העין כמעט לא מבחינה בהבדל, והקובץ קטן פי כמה.
- פורמט: WebP קטן ב-25%-35% מ-JPG באותה איכות, ונתמך בכל הדפדפנים ובוורדפרס.
מידות מומלצות
- תמונת רקע לרוחב מסך מלא: 1920 פיקסלים
- תמונה בתוך תוכן או בכרטיס: 1200 פיקסלים
- תמונת מוצר בחנות: 1000-1200 פיקסלים, ביחס אחיד
- תמונה לשיתוף ברשתות (OG): 1200×630
איך עושים את זה ב-773 Tools
- פותחים את כיווץ תמונות וגוררים את כל התמונות ביחד (עד 30 בכל פעם).
- בוחרים איכות (75% מתאים כמעט לכל שימוש) ורוחב מקסימלי.
- לוחצים "כיווץ" ורואים לכל תמונה כמה חסכתם.
- מורידים כל תמונה בנפרד, או את כולן בקובץ ZIP.
צריכים רק להחליף פורמט? המרה ל-WebP שומרת על השקיפות של קובצי PNG. צריכים מידות מדויקות? שינוי גודל תמונה מאפשר לקבוע רוחב וגובה בפיקסלים.
טעויות נפוצות
- לכווץ תמונה שכבר כווצה, שוב ושוב. כל פעם האיכות יורדת. תמיד כווצו מהמקור.
- לשמור צילומים כ-PNG. PNG מתאים ללוגואים ולגרפיקה, לא לצילומים.
- לסמוך רק על תוסף כיווץ באתר. תוסף עוזר, אבל תמונה שהועלתה ענקית נשארת כבדה בספריית המדיה.
אם האתר עדיין איטי גם אחרי שהתמונות קלות, הבעיה כנראה במקום אחר: תבנית כבדה, יותר מדי תוספים או אחסון חלש. סטודיו טליה שלוש בונה אתרי וורדפרס ואלמנטור שנבנים מההתחלה כדי להיות מהירים.
הכלים מהמדריך