האתר שלך כולל הרבה תמונות כולל תמונות של מוצרים, אוספים ואייקונים, בדיוק כמו אתרים אחרים, רובם הם פורמטים של תמונה PNG או JPEG. אבל גילית שככל שמועלים יותר תמונות PNG או JPEG, האתר שלך נטען לאט יותר. אם זה המקרה שלך, הגיע הזמן לחשוב על אופטימיזציה של תמונה עבור כמה סוגי תמונות כמו אייקונים בפורמט SVG.
בהשוואה ל-PNG ו-JPEG, לקבצי SVG יש את היתרונות להגביר את מהירות הטעינה שלך תוך שמירה על הרזולוציה הגבוהה של התמונות. בואו לגלות את הדברים הטובים ביותר על קבצי SVG ומדוע כדאי להשתמש בהם כדי להגביר את ביצועי האתר שלך באמצעות מאמר זה.
בעמוד זה
מהו קובץ SVG
שלא כמו קובצי תמונה פופולריים אחרים כגון PNG או JPEG, SVG (Scalable Vector Graphics) הוא פורמט תמונה מבוסס וקטור וניתן להדרגה קטן או גדול יותר מבלי לאבד איכות. כדי להבין קבצי SVG, אולי נשווה את המאפיינים שלהם לפורמט הנפוץ PNG.
| SVG | PNG | |
|---|---|---|
| סוג קובץ | מבוסס וקטור | מבוסס רסטר (או מבוסס פיקסלים) |
| גודל הקובץ | קטן בהרבה מ-PNG | גדול עם ברזולוציה גבוהה |
| איך זה עובד | השתמש בשפת תכנות XML כדי לתקשר עם דפדפן האינטרנט או יישומים כדי להציג תמונה | עברו את תהליך הסינון, הקידוד והדחיסה ללא הפסדים כדי להציג את התמונה הדחוסה זהה לתמונת המקור |
| הכי מתאים ל | עיצוב אתר, לוגו, אייקון | תמונות, עריכה ולוגו |
למה אתה צריך להשתמש בקבצי SVG
לפורמט SVG יש הרבה יתרונות בולטים שהופכים אותו לבחירה הטובה ביותר עבור עיצוב אתרים ואפליקציות.
מדרגיות בלתי מוגבלת
עקב שימוש בוקטורים, תמונות SVG אינן תלויות ברזולוציה וניתנות להרחבה בכל מימד מבלי להיות מושפעות מהאיכות. בהתבסס על האלגוריתם המתמטי ליצירת התמונה, דפדפן האינטרנט יקרא ויציג אותה על המסך. רק קוד קטן ויכול להתאים לצופים שונים כגון חלונות תצוגה, מכשירים, עיצובים רספונסיביים וכו', פורמט SVG קל יותר לתמונות שלך להופיע בעיבוד מלא על המסך ללא אובדן איכות.
תכונה זו הופכת את SVG לעדיף על סוגי קבצים מבוססי רסטר כגון PNG או JPEG. באשר לתמונות רסטר, מידע התמונה מאוחסן ברשת של פיקסלים. לכן, כאשר אנו מגדילים את התמונה, כל פיקסל צריך להתרחב מעבר לגודלו המקורי וזה גורם לאיכות לרדת.
התאמה אישית קלה
קובצי SVG נותנים שליטה רבה למעצבי אתרים לבצע שינויים כגון צורות וקטוריות, טקסטים, צבעים בעזרת תוכנות עיצוב פופולריות כגון Adobe Illustrator או CorelDraw וכו'. קובץ התמונה נערך תוך דקות ספורות.
מידה קטנה
כאמור, קובץ SVG הוא הרבה יותר קל מתמונת רסטר ויותר מזה, לא צריך להחליף בין הגודל הקטן לאיכות התמונה. ככל שהתמונות קטנות יותר, האתר שלך נטען מהר יותר. אז, SVGs יכולים לשפר את מהירות טעינת האתר שלך באופן כללי.
ידידותי לקידום אתרים
מכיוון שפורמט SVG מוגדר על סמך טקסט, מנוע החיפוש יכול לקרוא, לסרוק ולהוסיף את התמונות במהירות ובקלות רבה יותר. אז אתה יכול לשפר את דירוג הדף שלך ואופטימיזציה למנועי חיפוש. קובצי SVG עולים על קובצי PNG או JPEG מהבחינה הזו מכיוון שמנועי חיפוש מזהים רק תמונות רסטר לפי המטא נתונים שלהם, כגון כותרת, מילות מפתח או תג ALT.
כעת, רוב ספקי נושא האתרים רוצים לתעדף גורמים כמו טעינה מהירה, תמונות ברזולוציה גבוהה ודירוג גבוה במנועי החיפוש. במיוחד, כמה ערכות נושא של Shopify כמו Be Yours, יקבעו חלקים או בלוקים שבהם רק SVGs מתקבלים. אז מומלץ לבחור ב-SVG על פני PNG או JPEG במקרה זה.
שימוש ב-SVG בנושא Be Yours
ניתן ליצור קובץ SVG בעצמך עם כמה אפליקציות עיצוב גרפי נפוצות כמו Adobe Photoshop או Adobe Illustrator לפי ההוראות במאמר זה .
אם זה קצת מסובך ליצור SVG בעצמך, יש לנו ספק אייקוני SVG, Remixicon.com , כדי להקל על חייך. ל-Remixicon.com יש ספריית אייקונים ענקית של SVG לבחירות שלך ותוכל לקבל בקלות כל סמל שתרצה בשתי לחיצות בלבד:
- ב-Remixicon.com, הקלד מילת מפתח כדי לחפש את הסמל הרצוי.
- לחץ על הסמל מהרשימה ובחר בלחצן העתק SVG .
גש לקטע/גוש של ערכת הנושא שלך שבו ברצונך להוסיף סמל SVG והדבק את קוד תמונת ה-SVG בשדה המכיל הרלוונטי.
לדוגמה, בערכת הנושא Be Yours, יש לך את הקטע אחריות המאפשר לך להוסיף SVG מותאם אישית בשדה סמל SVG מותאם אישית .
- לחץ על שמור כדי לאשר את השינוי.
תודה על זמן הקריאה שלך. אנו מקווים שתמצאי מאמר זה שימושי. עקבו אחרינו היום בפייסבוק , בטוויטר ובבלוג האתר כדי לקבל את העדכונים האחרונים שלנו!
