קיימים מספר פורמטים של תמונות שניתן להשתמש בהם בדפי אינטרנט. כמה דוגמאות נפוצות הן GIF , JPG ו- PNG . קבצי SVG משמשים גם באתרים כיום, נותן מעצבי אינטרנט עוד אפשרות עבור התמונה באינטרנט.
תמונות GIF
השתמש בקבצי GIF לתמונות בעלות מספר קבוע וקבוע של צבעים. קובצי GIF מופחתים תמיד ליותר מ -256 צבעים ייחודיים. אלגוריתם דחיסה של קבצי GIF מורכב פחות מאשר קבצי JPG, אבל כאשר נעשה שימוש על תמונות צבעוניות וטקסט זה מייצר גודל קבצים קטנים מאוד.
תבנית GIF אינה מתאימה לתמונות או לתצלומים מצולמים עם צבעי צבע. בגלל פורמט GIF יש מספר מצומצם של צבעים, Gradients ותצלומים יסתיים עם banding ו pixelation כאשר נשמר כקובץ GIF.
בקיצור, אתה יכול להשתמש GIFs רק עבור תמונות פשוטות עם רק כמה צבעים, אבל אתה יכול גם להשתמש PNG עבור זה גם כן (עוד על זה בקרוב).
תמונות JPG
השתמש בתמונות JPG לתמונות ותמונות אחרות בעלות מיליוני צבעים. הוא משתמש באלגוריתם דחיסה מורכב המאפשר לך ליצור גרפיקה קטנה יותר על ידי לאבד חלק באיכות התמונה. זה נקרא דחיסה "lossy" בגלל כמה פרטי התמונה הוא איבד כאשר התמונה דחוסה.
פורמט JPG אינו מתאים לתמונות עם טקסט, בלוקים גדולים של צבע מוצק, וצורות פשוטות עם קצוות חדים. הסיבה לכך היא שכאשר התמונה דחוסה, הטקסט, הצבע או השורות עלולים לטשטש וכתוצאה מכך תמונה שאינה חדה כפי שהיא תישמר בתבנית אחרת.
תמונות JPG משמשות הטובה ביותר עבור תמונות ותמונות שיש להם המון והרבה צבעים טבעיים.
תמונות PNG
הפורמט PNG פותח כתחליף לפורמט GIF כאשר נראה כי תמונות GIF יהיה כפוף לתשלום תמלוגים. גרפיקה PNG יש שיעור דחיסה טוב יותר מאשר תמונות GIF אשר התוצאה תמונות קטנות יותר מאותו קובץ שנשמר כמו GIF. קבצי PNG מציעים שקיפות אלפא, כלומר אתה יכול לקבל אזורים של התמונות שלך כי הן שקופות לחלוטין או אפילו להשתמש במגוון של שקיפות אלפא. לדוגמה, טיפת צל משתמשת במגוון של אפקטי שקיפות ויהיה מתאים PNG (או שאתה יכול פשוט לסיים אותנו באמצעות צללים CSS במקום).
תמונות PNG, כמו קבצי GIF, אינן מתאימות לצילומים. ניתן לעקוף את הבעיה banding המשפיעה על צילומים שנשמרו כמו קבצי GIF באמצעות צבעים אמיתיים, אבל זה יכול לגרום לתמונות גדולות מאוד. תמונות PNG גם הם לא נתמכים היטב על ידי טלפונים סלולריים ישנים וטלפונים תכונה.
אנו משתמשים PNG עבור כל קובץ הדורש שקיפות. אנחנו גם משתמשים PNG-8 עבור כל קובץ זה יהיה מתאים כמו GIF, באמצעות פורמט PNG במקום.
תמונות SVG
SVG מייצג Scalable Vector Graphic. שלא כמו הפורמטים המבוססים על raster שנמצאו ב- JPG, GIF ו- PNG, קבצים אלה משתמשים בקטעים ליצירת קבצים קטנים מאוד שניתן לבצע בכל גודל ללא איבוד איכות הגידול בגודל הקובץ. הם נוצרו עבור איורים כמו סמלים ואפילו לוגו.
הכנת תמונות עבור משלוח אינטרנט
ללא קשר לפורמט התמונה שבו אתה משתמש, והאתר שלך בטוח להשתמש במספר פורמטים שונים בכל הדפים שלו, עליך לוודא שכל התמונות באתר זה מוכנות למסירה באינטרנט . תמונות גדולות מדי יכולות לגרום לאתר לפעול לאט ולהשפיע על הביצועים הכוללים. כדי להילחם זה, התמונות האלה חייב להיות מותאם כדי למצוא את האיזון בין איכות גבוהה ואת גודל הקובץ הנמוך ביותר האפשרי ברמה זו איכות.
בחירת פורמט התמונות הנכון הוא חלק מן הקרב, אלא גם לוודא שיש לך הכין את הקבצים הללו הוא הצעד הבא בתהליך זה חשוב משלוח האינטרנט.
מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'יררד.