העלאת תמונות בממדים תקינים
נכתב ע"י יוחאי ירמיהו5 שאלות
תיאור קצר לשיעור: בשיעור הזה נדבר על מימדים של תמונה ואיך להעלות את התמונה בגודל המתאים שבו התמונה הולכת להיות מוצגת באתר לעומת העלאת תמונה גדולה עם משקל גדול.
אורך השיעור: 5:58 דקות
קורסים המכילים את השיעור וידאו:
איך לבנות אתר בחינם בשעה וחצי?
תוכן השיעור:
תוכן ראשוני שיופיע בעמוד
כותרת ברמה 1
תוכן משני שיופיע בתוך העמוד
הצטרפו לקהילות המובילות של בוני האתרים בישראל
זה הזמן להצטרף לקהילה שלנו ולקבל סיוע ותמיכה בקבוצות המובילות בארץ לבוני אתרים בוורדפרס (-:
מתחילים בקטן - קורסים לבוני אתרים בפחות מ-99 ₪
-
קורס: וורדפרס Tool Kit
69.00 ₪ -
20 אלף בחודש מבניית אתרים
69.00 ₪ -
נגישות אתרים באופן מעשי
199.00 ₪ -
התנהלות עם לקוחות
99.00 ₪ -
משיחת מכירה לכסף בחשבון
99.00 ₪ -
בניית אתרים + כתיבת קוד עם AI (בינה מלאכותית)
199.00 ₪ -
זכויות יוצרים בדיגיטל
69.00 ₪ -
יסודות העיצוב לבוני אתרים
69.00 ₪ -
קורס קלאודוויז + קורס קלאודפלייר + פתיחת מייל עסקי בחינם
29.00 ₪ -
אפיון ראשוני ומחקר מילות מפתח
29.00 ₪ -
גיבוי, שחזור, ותחזוקה לאתר
29.00 ₪ -
התקנת וורדפרס על המחשב
29.00 ₪
עוד לא צפיתם בהדרכה? זה בחינם!
יש לי הצעה מעניינת יצרתי הדרכה מלאה של למעלה משעתיים שתלמד אותך איך לבנות אתר מ-0 בחינם כולל רכישת אחסון ודומיין. נשמע מעניין? אשמח לשלוח לך אותה למייל.
קורסים מקיפים ומומלצים ללימוד בניית אתרים
לבנות אתר ב-10 ימים
קורס מזורז שילמד אותך לבנות אתרים ב-10 ימים. נקודת כניסה מעולה לתחום של בניית אתרים במחיר משתלם.
- קורס לבנות אתר ב-10 ימים 52 שיעורים שילמדו אותך הכל על בניית אתרים
- בונוס 1: לבנות אתר מתבנית מוכנה לאנשים עסוקים שלא רוצים להשקיע 10 ימים
- בונוס 2: גיבוי, שחזור, ותחזוקה לאתר איך לבצע גיבויים ולתחזק אתר ללא תקלות
- בונוס 3: אלמנטור קונטיינר (Container) איך ליצור תוכן באמצעות אלמנטור קונטיינר
- בונוס 4: קורס אחסון אתרים ב-Cloudways אחסון אתרים על גבי חברות השרתים המובילות בעולם
- בונוס 5: קורס קלאודפלייר + מייל עסקי בחינם איך להשתמש בקלאודפלייר + יצירת מייל עסקי בחינם
- בונוס 6: לעבור אחסון ולהישאר בחיים איך להעביר אתר מאחסון אחד לאחר ללא תקלות
- תמיכה לשנה לשאלות בעמודי השיעורים
- גישה לקבוצת הפייסבוק של הקורס
- גישה לכל החיים
- תעודה הכשרה בסיום הקורס (קובץ PDF)
- גישה לעדכונים ושיעורים חדשים
- 100% החזר כספי ל-14 ימים
רכשו את הקורס 597 סטודנטים לפניך (-:
מסלול וורדפרס Expert
למעלה מ-10 קורסים מלאים ומעל 600 שיעורים שילמדו אותך הכל על בניית אתרים ברמה הגבוהה ביותר בארץ.
- קורס וורדפרס Beginner קורס בניית אתרים למתחילים – (2,250 ₪)
- קורס וורדפרס Tool Kit הצעת מחיר + אפיון + צ’ק ליסט + התנהלות עם לקוחות
- קורס בניית אתר ב-10 ימים איך לבנות אתר במהירות שיא
- קורס וורדפרס Next Level מחיר הקורס 2,500 ₪
- קורס וורדפרס SEO התאמת אתרים לגוגל – (750 ₪)
- קורס: אלמנטור Ninja הקורס שיהפוך אותך לנינג’ה באלמנטור – (999 ₪)
- קורס: אלמנטור PRO + אנימציות יצירת אתרים מורכבים ואנימציה – (550 ₪)
- קורס וורדפרס Rocket שיפור מהירות לאתר – (999 ₪)
- קורס וורדפרס Security חיזוק אבטחה לאתר – (750 ₪)
- קורס וורדפרס Global בניית אתרים דו לשוניים בכל השפות – (750 ₪)
- בונוס 1: גיבוי, שחזור, ותחזוקה לאתר תחזוקת אתרים ומניעת בעיות ותקלות
- בונוס 2: אנליטיקה ומעקב לאתר גוגל אנליטיקס, סרץ קונסול ויאנדקס מטריקה
- בונוס 3: איך לקבל יותר פניות מהאתר הוספת כפתורי יצירת קשר + שיפור המרות
- בונוס 4: קלאודפלייר + מייל עסקי בחינם שימוש בקלאודפלייר ויצירת מייל עסקי בחינם
- בונוס 5: התקנת אתר על המחשב איך להשתמש במחשב ולחסוך עלויות אחסון
- בונוס 6: קורס Cloudways אחסון אתרים בחברות השרתים המובילות בעולם
- בונוס 7: לעבור אחסון ולהישאר בחיים איך להעביר אתר מאחסון אחד לאחר ללא תקלות
- בונוס 8: אופטימיזציה לתמונות איך להעלות תמונות שיעזרו לאתר להתקדם בגוגל
- בונוס 9: יסודות העיצוב לבוני אתרים כל מה שצריך לדעת כדי לעצב את האתר המושלם
- בונוס 10: זכויות יוצרים בדיגיטל איך להימנע מתביעה משפטית כאשר בונים אתר
- בונוס 11: 20 אלף בחודש מבניית אתרים איך למצוא לקוחות ולייצר הכנסה מבניית אתרים
- בונוס 12: משיחת מכירה לכסף בחשבון איך לשפר את התהליך מכירה ולסגור יותר עסקאות
- בונוס 13: התנהלות עם לקוחות + ניהול פרויקטים איך מתנהל פרויקט בניית אתרים כולל תחזוקה לאתר
- 705 שיעורים למתחילים + למתקדמים
- תמיכה לשנה לשאלות בעמודי השיעורים
- גישה לקבוצת הפייסבוק של הקורס
- גישה לכל החיים
- תעודה הכשרה בסיום הקורס (קובץ PDF)
- גישה לעדכונים ושיעורים חדשים
- 100% החזר כספי ל-14 ימים
רכשו את הקורס 494 סטודנטים לפניך (-:
אם אהבתם את השיעור ואתם רוצים לשתף אותו ניתן לעשות זאת על ידי לחיצה על כפתורי השיתוף מתחת:
עוסק בתחום של פיתוח אתרים ועיצוב גרפי למעלה מ-15 שנה. נינג’ה מומחה לוורדפרס, מפתח תוספים ותבניות בהתאמה אישית והמרצה שלכם בקורס הדיגיטלי המקיף והמוביל בישראל ללימוד בניית אתרים בוורדפרס בצורה נכונה.
שאלות ותשובות לשיעור
5 שאלות
באסה, היכולת לשאול שאלות בשיעור פתוחה רק למשתמשים שרכשו את הקורס
בהעלאת תמונה, כאשר מקטינים אותה דרך וורדפרס – זה מייצר עותק חדש קטן של התמונה?
או שזה ממש מחליף את זו המקורית?
ומה לגבי כאשר הקטנת הפיקסלים של התמונה נעשה בעזרת הדרך השנייה שהצגת דרך אלמנטור? (זה יקטין את התמונה גם לשאר העמודים שמשתמשים באותה תמונה, למרות שהשינוי לא נעשה דרך וורדפרס או דרך המדיה שבלוח הבקרה)?
היי, אני לא בטוח ב-100% אז תבדוק אותי.
עד כמה שאני יודע כשאתה מעלה תמונה לוורדפרס זה מייצר עותק חדש ונוסף של התמונה ולא מחליף את התמונה המקורית.
לגבי אלמנטור סביר להניח שזה מקטין את התמונה רק לעמוד הנוכחי ולא לעמודים נוספים.
כמה דברים שבדקתי:
1.חיתוך דרך וורדפרס מייצר שתי העתקים לתמונה, כאשר העותק החדש שנחתך, יופיע בכל עמודי האתר שתמונה זו כבר נמצאת.
בנוסף עניין אחר שחשוב לדעת – חיתוך פיקסלים דרך וורדרפס מקטין את משקל התמונה כמו חיתוך שנעשה מחוצה לו דרך תוכנה. קשה לראות זאת בעמוד ספריית הוורדרפס כיוון שיש באג שמונע מהמשקל המוצג להתעדכן, אך באתר עצמו וגם בתקיית האחסון ניתן לראות שהמשקל אכן יורד.
2.יצירת חיתוך דרך אלמנטור מייצר קובץ חדש שנשמר בתקייה נפרדת במקום אחר בשרת האחסון, שלא משפיע על שאר התמונות שבעמודים האחרים באתר. לצד זאת, הוא לא עובר אופטימיזציה כלשהי מתוסף-התמונות.
3.חיתוך פיקסלים ידני של תמונה דרך וורדפרס מייצר שתי העתקים וממילא גם תתבצע דרך תוסף-אופטימיזציה-לתמונות עותקים כפולים בהתאם (נבדק רק ב Lite-speed אך מאמין שגם בשאר התוספים).
4.מתקיימת תמיד יצירת העתק מוקטן בוורדפרס גם לאחר הכנסת קוד חסימה לכך (במקרים מסויימים שמעלים תמונה גדולה, זו הדרך של וורדפרס להתמודד).
פירוט הנקודות:
————————————————-
———————————————
פירוט הנקודות שלמעלה:
1.חיתוך דרך וורדפרס ישנה את גודל התמונה בכל העמודים באתר שהתמונה הזו מוצגת. באותה פעולה ייווצר גם קובץ חדש שיאוחסן בשרת האחסון עם הגודל החדש, לצד הגודל הישן (במידה וקיים תוסף-אופטימיזציה-לתמונות, לאחר מספר דקות ייעשה אוטומאטית אופטימיזציה גם לגודל החדש של התמונה ובכל העמודים באתר יופיע הגודל החדש + אופטימיזציה).
בנוסף עניין נוסף שחשוב לדעת שבחיתוך דרך וורדפרס, זה מאוד עוזר להקטין את משקל התמונה. יש לוורדפרס באג שהוא לא מראה בתצוגה את משקל התמונה העדכני לאחר החיתוך. אך אכן החיתוך הוריד את משקל התמונה. ניתן לראות זאת הן דרך תקיית הקבצים בשרת האחסון, והן דרך שימת התמונה בעמוד כלשהו באלנמטור, עדכון וצפייה בגדלים של התמונה החדשה שנמצאת בעמוד .
2.כאשר דרך אלמנטור, עורכים גודל של תמונה על ידי בחירת ‘מתואם’ (כלומר, בוידג’אט תמונה מכניסים תמונה מספריית הוורדפרס, ואז דרך הוידג’אט עצמו, בתוך עמוד האלמנטור אפשר לבחור ‘מותאם’ ולהזין יקסלים), העריכה הזו רלוונטית רק לעמוד אלמנטור הנוכחי. וכמובן לא משנה את התמונה שנמצאת בספריית הוורדפרס. לכן זה כמובן לא ישפיע על שאר העמודים באתר שעושים בתמונה זו שימוש.
איפה התמונה הזו שגזרנו בעזרת אלמנטור נמצאת ונשמרת?
היא לא נשמרת ב Uplouds הרגיל בו כל תמונות הוורדפרס נשמרות.
אלא, היא נשמרת בתקייה הקרוייה Elementor בתוך שרת האחסון (כמובן שתקיית Elementor הזו נמצאת גם היא בתקיית-הגג Uplouds, אך בנפרד ).
חשוב לשים לב! ברגע שהקובץ נמצא בעצם בתקיית Elementor אזי לתוסף אופטימיזציה לתמונות אין גישה לשם. התמונה שתופיע במקרה כזה בעמוד האתר עצמו תהיה תמונה שלא עברה אופטימיזציה (המשמעות היא שלא תהיה גרסת WebP וגם גרסת ה JPEG לא תהיה אחרי אופטימיזציה). כן צריך לציין שכיוון שהחיתוך של אלמנטור מתבצע על בסיס קובץ שקיים בספריית המדיה של וורדפרס, אזי אם תוסף-התמונות הספיק לבצע דחיסה של התמונה שכבר הועלתה לספריית הוורדפרס, אזי חיתוך התמונה בעמוד האלמנטור ייעשה על אותה תמונה שכבר עברה דחיסה (גם בזה – רק על תמונת ה JPEG ולא על גרסת ה WebP).
בדרך כלל, כשמעלים מייד תמונה לוורדפרס, ומייד מבצעים חיתוך דרך עמוד האלמנטור, תוסף-התמונות עדיין לא הפסיק לכווץ את התמונה שבספריית הוורדפרס, כך שהחיתוך שייעשה מייד לאחר מיכן דרך אלמנטור – בעצם יעלה את הגודל המקורי של התמונה, וישמור אותו ללא אופטימיזציה למשקל – בתקיית Elementor שבשרת האחסון
3.כאשר מעלים תמונה חדשה דרך ספריית הוורדפרס, ולאחר מיכן בוחרים לערוך אותה דרך ספריית הוורדפרס ולהקטין את הפיקסלים בה,
אז בעצם נוצרים 2 העתקים לתמונה בתקייה של שרת האחסון.
בנוסף, האופטימיזציה של תוסף אופטימיזציה לתמונות (שמעבד GEPEG וגם WebP) תתבצע על שתי התמונות האלו. כך שתצא כמות כפולה של תמונות.
זה בסדר להעלות תמונה קצת גדולה לוורדפרס, ואז לחתוך את זה בוורדפרס. יותר נוח. אבל רק לקחת בחשבון שמבחינת וורדפרס, חיתוך דרך וורדפרס ייצור שתי עותקים לתמונה, ואופטימיזציה של תוסף-תמונות יבצע אופטימיזציה לשתי הגרסאות (גם אם יוגדר לא לשמור את הגיבוי של התמונות המקוריות).
4.גם לאחר חסימת מספר גדלים לתמונה דרך הקוד המדובר –
כאשר מעלים לספריית הוורדפרס תמונה שהיא למעלה מ 2560 פיקסל –
וורדפרס אוטומאטית מייצר תמונה של 2560 פיקסל, איתה הוא עובד.
התמונה הגדולה יותר (יכול להיות תמונה מקורית של 5,000 פיקסל ו 12 מ”ב) –
אפילו לא נכנסת לספריית המדיה של וורדפרס.
(לשים לב – התמונה הגדולה כן תוכנס אל הקבצים בשרת האחסון. אך כיוון שהיא לא חלק ממערכת הוורדפרס, אז תוספי האופטימיזציה לתמונות לא יעבדו עליה. ובצדק. אין בה צורך).
הפחתת פיקסלים – מתי זה מתחיל לפגום באיכות התמונה?
אם גודל מסך במובייל הוא 400 פיקסל, אז לא יהיה שום הבדל אם התמונה תהיה בפיקסל 800 למול פיקסל 400?
מימה שאני חוויתי, היה נראה שזה פוגם באיכות תמונה. למרות שעל פניו התמונה מוצגת למסך של 400 פיקסל..
יכול להיות?
אני לא יודע אם יש פה כלל אצבע, העורך של וורדפרס לא עושה עבודה טובה בדרך כלל אז זה עשוי לפגוע באיכות של התמונה. יכול להיות שגם מופעל אצלך עכשיו התוסף של shortpixel ואולי הוא מה שגורם לאיכות נמוכה יותר בתמונה.
אין פה דרך שמצאתי לזהות את זה, יהיו מצבים שבהם תהיה בעיה באיכות ויהיו מצבים שזה יעבוד כמו שצריך.
אני באופן אישי משתמש בפוטושופ לבצע את הפעולה הזאת ואם זה לא עובד לך בצורה טובה אתה יכול אולי לנסות את הכלי שדיברת עליו של PicreSize.
https://picresize.com/