אופטימיזציה עבור האינטרנט -

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

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

הימנע תמיד שמירת ב 100%

אתה צריך כמעט אף פעם לא לשמור את התמונות JPEG ב 100% איכות. זה יהיה לא לייצר את הכי אפשרי “ממוטב” תמונה. זה בעצם מחשבת באמצעות אופטימיזציה להגביל את הנוסחה אשר מגדילה את גודל הקובץ exorbitantly. גם לעומת 90% או 95% איכות תראה ירידה משמעותית בגודל הקובץ.

רוב הפעמים אתה תהיה מומלץ לשמור תמונות הרבה יותר נמוך מ 90% איכות. אם תפתח את תיבת הדו-שיח 'שמור לאינטרנט' ב- Photoshop, תבחין שהם מציעים ערכים מוגדרים מראש שתוכל לבחור מהם. הוספתי את ערכי JPEG האפשריים להלן - שים לב למוסכמות השמות המובנות.

• נמוך - 10%
• בינוני - 30%
• גבוהה - 60%
• גבוה מאוד - 80%
• מקסימום - 100%

גם ב- Adobe Photoshop איכות התמונה 60% נחשב "גבוה". מפתחי אינטרנט רבים יעידו בין 50% ל -70% הוא טווח בטוח להישאר עם.

כמה נמוך נמוך מדי?

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

הייתי טוען כי מתחת 30% אתה באמת קיצוץ איכות התמונה הבסיסית. מעצבים אחרים ישבעו 50% כ “גבול” כדי להקטין את הערך האופטימלי. אבל העצה הטובה ביותר כאן היא פשוט לנסות הגדרות שונות ולראות מה נראה הכי טוב! אתה לא יכול להשתבש עם כמה מחקרים הבדיקה אופטימיזציה תמונות JPEG עבור האינטרנט.

אפשרויות דחיסה

תחילה עלינו להבהיר את שני המונחים 'דחיסה' ו'איכות 'שהם ההופכים זה לזה. משמעות הדבר היא שאם אתה שומר JPEG ב 40% דחיסה תקבל איכות 60% (לעומת מקסימום של 100% איכות ללא דחיסה).

אלה הן האפשרויות הבסיסיות ביותר לנצל - והם צריכים להיות מספיק בעת שמירת עבור האינטרנט. משתמשים כלליים לא נכנסים הרבה יותר התאמות אישיות. Subsampling נכנס לעניינים מורכבים יותר שבו אתה המרת תמונות RGB לתוך YCbCr (בהיקות, Chroma כחול, Chroma אדום).

(מקור תמונה: קארה מונרו)

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

(מקור תמונה: דרק הטפילד)

כמו הערה צד מעניין Adobe Photoshop לא תמיד לנצל subsampling עבור דחיסה. כל התמונות נשמרו באמצעות “שמור עבור אינטרנט” שיח להשתמש רק chroma subsampling מתחת ערך איכות 50%.

מדיה אינטרנט שונים

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

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

תכנון מודל גרפיקה

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

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

עוד כלי מהודר לבדוק הוא Yahoo! Smush.it. זה יישום אינטרנט מבוסס דפדפן שבו אתה יכול להעלות תמונה Smush.it תסיר את כל תוספת בתים מיותרים כדי לייעל את גודל הקובץ. זה 100% lossless כלומר איכות התמונה לא לשפל בכלל. ואפילו טוב יותר אתה יכול להעלות תמונות אצווה מתוך כתובות אתר ישיר אם יש לך אותם מתארח באתר האינטרנט שלך או שרת צד 3.

כלים נוספים

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

אירפנוו

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

מה אפילו טוב יותר הוא תוסף תמיכה מפתחי צד 3. דוגמה אחת כזו היא RIOT (תמונה רדיקלית כלי ייעול). תוסף זה עובד עבור אחרים דומים קוד פתוח עורכים גרפיים כגון GIMP. הוא מציע להציג תמונה כפולה שבו אתה יכול להתאים ידנית את הפרמטרים דחיסה עבור כל התמונות שלך.

תמיכה בתוכנה נפלאה ותכונות ה- RIOT הן קלות לשימוש. יחד עם דחיסת התמונה יש לך גם גישה להסרת מטא נתונים נוספים כגון EXIF ​​ו- Adobe XMP. אלה סיביות נוספות של נתונים יכול להוסיף רק על הקבצים שלך הכולל והם נדרשים לעתים רחוקות.

ImageOptim עבור Mac

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

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

היו כמה בעיות קלות עם העדכנית 1.3.3 יציבה יציבה טיוח תמונות pixelated JPEG ב אופרה. נסה לבדוק את כל התמונות הממוטבות שלך ב -4 הדפדפנים העיקריים - Chrome, Safari, Firefox ו- Opera (ואולי IE). אם משהו נראה מוטה אתה יכול לנסות להוריד ImageOptim 1.3.0 אשר ממירה קצת מנקה.

משאבים מועילים

• JPEG 101: מדריך קורס מזורז על JPEG
• הגדרות דחיסה נכונה כדי לשמור תמונות JPG עבור WordPress
• חכם. טכניקות אופטימיזציה
• כיצד לבצע אופטימיזציה של תמונות JPEG לאתרי אינטרנט
• כל מה שאתה צריך לדעת על דחיסת תמונה

סיכום

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

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