שם השיעור: Compressimage.io
אין לכם גישה לתוכן זה
לקבלת גישה לשיעור זה, יש לבחור מסלול מתאים ולהירשם תחילה
תוכן הקורס
מודול: בניית דף הנחיתה "קלין פרמייר"
- CSS היכרות ושימוש ראשון (28:01)
- טמפלייטים (29:12)
- יצירת Header (27:47)
- יצירת Footer (28:08)
- שימוש בקונטיינרים (27:29)
- תחילת הדרך עם Figma (27:27)
- סיום הHero Section (27:50)
- סיום סקשן "השירותים שלנו" (27:42)
- סקשנים למה אנחנו ושירותים (27:48)
- סקשנים בחרו בשירותים וצוות (27:52)
- סקשן המלצות (32:07)
- סקשן יצירת קשר (28:47)
- התאמה למובייל (27:25)
- דפים כלליים (28:42)
- הנפשות/אנימציות (27:44)
- חיבור לינקים (27:29)
- בדיקות כלליות (28:40)
- בדיקת הטופס (27:45)
מודול: הגדרות גלובליות
- אלמנטור – ההתחלה (28:50)
- זהות האתר ופריסת הדף (27:24)
- מה זה HEX ומה זה RGBA (28:58)
- תבנית עיצוב (27:21)
- פונטים וצבעים גלובליים (28:07)
מודול: טיפים וטריקים
- ניהול האלמנטים (27:39)
- היסטוריית העבודה (27:56)
- טעינת ספריות ומבנה הקישורים (27:12)
- פיטשרים באלמנטור (27:46)
- יחידות מידה (27:28)
- Compressimage.io (29:46)
- Recaptcha V3 & Maspik (29:37)
נו..? איך היה השיעור?
אחח חבל.. אם היית מנוי - היית יכול ללמוד ולדרג את השיעור!
מה נלמד בשיעור הזה?
- נבין את הכלי CompressImage.io ואת היכולות שלו
- נבין את ההבדל בין PNG לבין פורמט webp
- נבין את הרוחב המקסימלי שנצטרך לתמונה, את הסיומת (suffix) שנוכל להוסיף לה ואיך להשוות את התמונה במצבי לפני/אחרי
וקצת יותר בפירוט...
בשיעור זה נלמד כיצד להשתמש בכלי **CompressImage.io** לשיפור ביצועי האתר דרך אופטימיזציה של תמונות. כלי זה מאפשר להקטין את גודל התמונות מבלי לפגוע משמעותית באיכותן, מה שמוביל לזמני טעינה מהירים יותר ולחוויית משתמש טובה יותר. נבין כיצד לעבוד עם הכלי, כולל האפשרות להשוות בין מצב התמונה לפני האופטימיזציה ואחריה כדי לוודא שהתוצאה מספקת.
נעמיק בהבנת ההבדלים בין פורמט **PNG** לבין פורמט **WebP**. בעוד PNG מצוין לתמונות עם שקיפות ולגרפיקה פשוטה, WebP מציע דחיסה יעילה יותר המתאימה במיוחד לאתרי אינטרנט. WebP יכול להקטין את גודל התמונה בצורה משמעותית תוך שמירה על איכות ויזואלית גבוהה, מה שהופך אותו לאידיאלי לשיפור ביצועים באתרים.
נלמד גם כיצד לקבוע את הרוחב המקסימלי הדרוש לכל תמונה באתר, בהתאם למיקום השימוש שלה (Hero Section, גלריה או אייקונים). בנוסף, נכיר את האפשרות להוסיף סיומת (Suffix) לשם התמונה כדי להבדיל בגרסאות שונות של אותה תמונה, כגון תמונות מותאמות למובייל או לדסקטופ. הבנה ושליטה בתהליכים אלו היא קריטית ליצירת אתרי וורדפרס מהירים ומקצועיים כחלק מתהליך בניית אתרים במסגרת קורס אלמנטור.