1. אופטימיזציה של תמונות עבור האתר: עיבוד אצווה באמצעות jpegtran OptiPNG | pngout אתר ללא תמונות -...
2. אנו משתמשים בהמלצות לתמונות
3. מבנה ארכיון
4. הנחיות קצרות לעבודה
5. תוספות
6. x64 (aka andi)

אופטימיזציה של תמונות עבור האתר: עיבוד אצווה באמצעות jpegtran OptiPNG | pngout

אתר ללא תמונות - אנכרוניזם. כל כך הרבה אנשים חושבים, וזה לא נטול שכל ישר. ��כור, כמה זמן אתה כבר באתר בפעם האחרונה וכמה זמן אתה כבר על זה?

נתוני טקסט קטנים בהרבה מהתמונה. אבל אנשים ידועים לאהוב את העיניים שלהם. לכן, התמונות יהיו ללא ספק יתרון של הסיפור.

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

בואו נתחיל מתוך הנחה שיש צורך בתמונות. אלה יכולים להיות תמונות, דיאגרמות, פשוט להסביר תמונות.

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

��ז למה למטב תמונות? דוגמה פשוטה היא תמונה. טלפונים מודרניים יש מצלמות 8, 12 ואפילו יותר מגה פיקסל. 12 MP מתאים לתמונה של 4000 × 3000 פיקסלים. בהתאם למורכבות של הסצנה, זה מתאים לגודל של 2-5 מגה בייט, ואף יותר. תריסר תמונות - ואת גודל הדף מתנפח הרבה. התמונה נכנסת לאזור התוכן, כלומר הדפדפן צריך להוריד הכל הכל, בקנה מידה זה ורק אז להציג אותו. לחלשים מעבדים או עם כמות קטנה של זיכרון RAM - אסון.

עכשיו דמיינו שהמשתמש צופה באתר מהטלפון. במקרה זה, טעינת הדף יכול פשוט לא לחכות. אז, התמונות צריך להיות מראש מופחת.

מישהו יטען כי אין טעם בכך, CMS המודרני עושה באופן אוטומטי תמונות ממוזערות בעת הורדת תמונות. ��בל האם לכל אחד יש את האתרים שלהם על VPS או VIP- שיעורי? הורד תמונה אחת של 12 MP עשויה לצאת, אך כדי לעבד אותה, PHP תצטרך להקצות 35+ מגה-בתים (בתיאוריה, למעשה) לאחסון, ולאחר מכן עדיין יודעת כמה ליצור עותק קטן יותר. תעריפים זולים מיד לצלול לתוך עודף של משאבים. טוב Hoster יבקש מהמשתמש לא לעשות את זה יותר, אחד רע יתעלם ממנו, כי רק כסף חשוב לו, ולא את הביצועים של שירותים.

וכך החלטנו לפעול נכון. אנו מקטינים באופן ראשוני את התמונות, ולאחר מכן מעלים אותם לאתר. אז המנוע קל יותר, ואנשים. האם הכל לא ממש.

עורכים רבים שומרים על הגושים המקוריים (meta-information, שאינם חלקים של התמונה בקובץ) המכילים מידע נוסף. לדוגמה, אם תצלם תמונה של משהו בטלפון, העבר את הקובץ למחשב, לחץ עליו עם המקש הימני ובחר "מאפיינים → פרטים", תראה את הנתונים במכשיר: באיזו מצלמה צילמת, מהירות תריס, ISO וכן הלאה. עבור המשתמש, מידע זה הוא חסר תועלת, אז אתה יכול להיפטר ממנו.

ובכן, חשוב על זה, חתיכה אחת. ��ה יש, חבורה של מידע הכלול? תארו לעצמכם. לפעמים אתה מקבל תמונות שבו מאות קילובייט של נתונים כאלה. רק היום, הם שלחו לוגו של 584 KB בגודל כדי להתאים. במקביל, מידע שימושי היה רק ​​14 KB! אשר לי, זה לא לגמרי נכון לאלץ את המבקר להוריד 570 KB מלמעלה.

בואו נסכם את סיכום הביניים. כדי שהמשתמשים באתר יעשו טוב, עליך:

1. הפחת את גודל התמונה. כדי לעזור לכל עורך גרפי.
2. לזרוק מתוך חלקי הקובץ הם מיותרים. למעשה, המשתמש צריך רק תמונה.
3. נסה לצמצם עוד יותר את הגודל של התמונה.

הפסקה הראשונה כוללת עבודה אישית על כל קובץ. זה זמן רב, אבל זה מביא את התוצאה הטובה ביותר. אנו פותחים כל קובץ, לחתוך, להפחית, ולאחר מכן לשמור עם איכות מקובלת.

אבל פסקאות 2 ו -3 ניתן נתון לחסדיהם של תוכניות מיוחדות. תוכנה לעבודה עם תמונות להגדיר. Google ממליצה על התוכניות הבאות:

• jpegtran עבור פורמט.
• optipng ו pngout עבור תמונות PNG.

קצת על עמ '3. עורכי גרפי בדרך כלל לא טורחים עם זה. הם פשוט לשמור את התמונה, בחירה מראש של הזמן הניח אלגוריתמים דחיסה עם אותן הגדרות, מקדמי קוונטיזציה ודברים אחרים. בנוסף, רבים באמת להעביר את meta- מידע זמין ולהוסיף משלהם, להגדיל עוד יותר את גודל הקובץ.

תנאים מוקדמים

לפני שנה, הם התחילו לדבר בהמוניהם על השירות. PageSpeed ​​תובנות מ - Google. למעשה, אלה הן המלצות של ענקית החיפוש על "איך לעשות טוב". פשוט להקליד את הכתובת של האתר ולקבל רשימה של הצעות לאופטימיזציה. שם תוכל להוריד גם משאבים ממוטבים, כולל תמונות, עבור האתר שלך. נכון, זה רלוונטי רק עבור הדף בדק.

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

אנו משתמשים בהמלצות לתמונות

זה נראה פשוט: להוריד את התוכניות שצוינו על ידי Google ולהפעיל את כל הקבצים בשרת באמצעות אותם. הבעיה היא כי כלי עזר אלה הם קונסולת. הם לוקחים רק קובץ אחד בכל פעם. אבל אנחנו לא לשווא המאמר האחרון לקח את הזמן קבצי אצווה, נכון?

מידע מן המאמר הוא די מספיק כדי ליצור קובץ המטפל שלך בהמוניהם, אז אני לא מצייר איפה זה. אני רק מציע להוריד את הרכבה מוכנה, שבה אני משתמשת בעצמי.

הורד ארכיון (212 KB)

מבנה ארכיון

הארכיון מכיל תיקיה [ OptimizeImg ]. כדי להתחיל, לפרוק אותו איפשהו. יש לי את זה נמצא c: \ temp \ אבל זה לא משנה. העיקר שהנתיב אינו מכיל סימני קריאה.

הבא. תיקייה זו מכילה את תיקיית המשנה [ uploads ]. כאן אתה צריך לשים קבצים הדורשים עיבוד. החלק הכי טוב הוא שאתה יכול לדחוף לפחות את התיקיה / מבנה הקובץ.

ישנן 3 תוכניות נוספות: jpegtran.exe optipng.exe | pngout.exe הוא כלי מאוד מומלץ על ידי גוגל. הורד מן האתרים הרשמיים המקביל / מאגרים. אם יש ספק, או רק רוצה לשדרג, להוריד ממקור מהימן ולהחליף הקיימים.

ולבסוף, הלב של טולזה. בתניצקי:

• 1.bat
• 3.bat
• 3-go.bat
• 3-opti-to-out.bat
• 3-out-to-opti.bat

הקובץ הראשון, 1.bat, יוצר מחדש את המבנה מ [העלאות]. 3 תיקיות נוספות נוצרות: [jpg_jpegtran] [png_optipng] [png_pngout] עם קבצים ממוזערים מעובדים מסוגם (jpg - only * .jpg-files, אותו עם png).

3.bat ברצף משיקה שלושה קבצי אצווה לביצוע:

• 3-go.bat הוא כמעט זהה 1.bat. דלג jpg / png קבצים דרך minimizers. התוצאה של העבודה תהיה 3 תיקיות (ראה לעיל) עם התמונות המתאימות.
• 3-opti-to-out.bat יוצרת את התיקייה [png_optipng-to-pngout], שבה קבצים המעובדים על-ידי optipng + pngout נכתבים (ברצף זה בדיוק).
• 3-out-to-opti.bat יוצר [png_pngout-to-optipng] תיקייה שבה קבצים מעובדים על ידי pngout + optipng כתובים. בדומה לזו הקודמת, רק ברצף אחר.

באופן עקרוני, רק 1.bat מספיק עבור הצרכים שלנו. שקיות 3x הופיעו כתוצאה של מחקר שגיאות בגירסה הקודמת של קובץ אצווה. זה קרה אז במהלך השגיאה את הקבצים pngout נלקחו מספריית optipng. ומה היתה ההפתעה שלי כאשר ההשקה של הגרסה הישנה נתן 1.5 פעמים גודל קטן יותר מקובץ אצווה מעודכן. כתוצאה מכך, התברר כי עיבוד כפול יכול "להדביק" תמונות טוב. אבל זה לוקח כמעט פי 2 יותר זמן. אז להחליט בעצמך אם זה נחוץ.

הנחיות קצרות לעבודה

1. הורד ארכיון .
2. לפרוק את זה.
3. עבור אל התיקיה החדשה [OptimizeImg].
4. כל הקבצים הדורשים עקצוץ, להעתיק את התיקיה [להעלות].
5. הפעל 1.bat והמתן. אם יש קבצים רבים והם png, לחכות זמן רב.
6. כאשר מופיעה הודעה בחלון השחור על הצורך ללחוץ על מקש כדי להמשיך, הכל מוכן. זה נשאר לקחת את התוכן של תיקיות שנוצרו להעתיק את אירוח באמצעות FTP, להחליף קבצים ישנים.

לדוגמה. תן לך בלוג על וורדפרס. כל התמונות מאוחסנות ב [ / wp-content / uploads / ]. עבור אל תיקיית האתר (דרך ftp), עבור אל [ wp-content ] ופשוט להעתיק [ העלאות ] לתיקייה OptimizeImg של אותו שם. הפעל 1.bat והמתן. לאחר סיום העבודה, התוכן [jpg_jpegtran] (אנחנו הולכים לשם!) מועלה לשרת. בקשות לקבצים קיימים נענות על ידי כתיבה. טריק דומה עבור png, אבל קודם אנחנו מסתכלים על איזה תיקייה - [png_optipng] או [png_pngout] - תופסת פחות מקום, למלא אותו עם התוכן שלה.

אל תפחד לפגוע בקבצים אחרים. Batniki עבודה רק עם jpg / png, ורק את התמונות של סוגים אלה נכתבים החדש שנוצר תיקיות.

אני מקווה שמישהו יהיה שימושי. הצלחות!

תוספות

1. הנתיב ל- [OptimizeImg] לא אמור להכיל סימני קריאה ! באחוזים
2. הפעל סקריפטים כמנהל אינו נחוץ. יתר על כן, במקרה זה, הם לא יכולים לעבוד!
3. ...

מוציא לאור

לא מקוון 13 שעות

x64 (aka andi)

הערות: 2846 פרסומים: 395 רישום: 02-04-2009