תמיכה « נושאים כלליים « שאלה | טעינת background-image איטית, איך לייעל?

  • נפתר shai.m

    (@shaim)


    שלום,
    יש לי אתר שכיבכול הDiv הראשי ממורכז לאמצע – כמו אתרי התדמית הנפוצים היום.

    הכנסתי קובץ Gif בתור background-image לbody והדף נטען די באיטיות.

    רציתי לדעת איך לייעל את טעינת הדף?

    גודל הGIF הוא : 474KB

    האם הגדול קובע כאן? או שיש שיטה אחרת?

    יש לי את הקובץ המקורי ששוקל 1.7 מגה וכיווצתי אותו בפוטושופ.
    **הידע שלי בפוטושופ מינימלי, וכך גם אולי תוצאת כיווץ הimage

מוצגות 10 תגובות – 1 עד 10 (מתוך 10 סה״כ)
  • זה הגודל הקובע.. הוא מאוד מאוד ענק.
    תנסה להמיר אותו ל-JPG או PNG, אולי תקבל פחות מקום ועם אותו איכות.

    לדעתי כיום עדיף להשתמש ב-GIF רק לאנימציות.. ולא לסתם "פוסטרים".

    Moderator maorb

    (@maorb)

    אכן אתה חייב להקטין את המשקל שלו למשהו קטן בהרבה.
    אפשרות אחת היא כמו שהציעו – png או jpg.
    אם אתה עובד עם תוכנה גרפית כמו פוטושופ או גימפ אז יש לך אפשרות גם של save for web כדי להקטין אותה.
    שים לב גם שמידות התמונות ענקיות – רוחב של יותר מ2000 פיקסל – אתה לא צריך את התמונה כזו גדולה.
    גם 200k זה הרבה.

    כיוון נוסף הוא אם זה רקע שחוזר על עצמו – אז לשמור קוביה במידות קטנות ועם css להריץ חזרה של הרקע לאורך הצירים x-y.

    תודה חברים.

    כן, זה רקע שחוזר על עצמו (מעין אבנים לבנות/אפורות)…

    מאור, המימוש הוא בצורה הבאה?

    background-image: url(/images/img.jpeg);
    background-repeat:repeat-y repeat-x;

    תודה

    או בדרך הנכונה יותר:

    background: url(/images/img.jpeg) repeat-x repeat-y #000;

    כמובן שתשנה את הצבע (#000), לאיזה צבע שתרצה להכניס במידה והתמונה לא תעלה או שתיהיה באמצע העלאה..

    בהצלחה רבה

    Moderator maorb

    (@maorb)

    אפשר גם כמו שכתבת וגם כמו שהציע KingYes

    אני דיברתי על הדרך הנכונה והקצרה.. אני לא רואה שום סיבה למה לעשות כמה שורות background בבלוק אחד.. זה כמו שתשתמש ב-margin-right/left/top בבלוק אחד. הזוי. 🙂

    King הבנתי אותך ואהבתי (והכי חשוב – הפנמתי)

    ביצעתי את זה ויצא מעולה 🙂

    תודה לשניכם (מאור וקינג)

    חופשי. 🙂
    שמחתי לעזור.

    אגב,
    איך מוסיפים resolve לשם הפוסט? האם זה תפקיד אדמין?

    Moderator maorb

    (@maorb)

    אם כבר לדבר על הדרך הקצרה והנכונה אז repeat-x repeat-y זה מיותר, ומספיק repeat כדי לחזור על 2 הצירים. ב x/y נשתמש אם נרצה לחזור רק על ציר אחד.

    לגבי למה נרצה לעשות בכמה שורות – את ה repeat באמת אין סיבה לכאורה, את ה background-position נרצה לפעמים לשים בנפרד, למשל לאפקט מעבר עכבר.

    בכל מקרה, זה כבר pure css ולא קשור בוורדפרס עצמה.

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

מוצגות 10 תגובות – 1 עד 10 (מתוך 10 סה״כ)
  • הדיון ‘שאלה | טעינת background-image איטית, איך לייעל?’ סגור לתגובות חדשות