כיצד להגדיר את אתר האינטרנט שלך עבור התמונות

תוכן עניינים:

Anonim

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

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

$config[code] not found

Prepping אתר האינטרנט שלך עבור תמונות מוכנות הרשתית

פעמיים כיף שלך

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

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

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

SVG

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

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

בכוח הזרוע

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

פתרונות קידוד אחרים

בקצה השני של המאמץ ואלגנטיות ספקטרום הן שיטות קידוד המסתמכים על כמה שינויים בצד השרת (כמו. HTaccess קובץ ערכי) יחד עם PHP ו- Javascript קידוד.

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

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

נאסד"ק צילום דרך Shutterstock