פריסה מותאמת לרטינה: גרפיקה חדה בכל DPI

לעתים קרובות אנו נתקלים במצב: האתר נראה מצוין על מסך רגיל, אבל על MacBook Pro או iPhone, לוגואים מטושטשים, אייקונים "צפים", וצילומי מסך מאבדים פרטים. האשם הוא מסכים עם צפיפות פיקסלים של 2x ומעלה (retina). הניסיון שלנו מראה שפריסת גרפיקה שיטתית המותאמת ל-retina פותרת זאת ללא פגיעה בביצועים. הצוות שלנו מבטיח חדות על כל מכשיר. גישה זו לא רק מבטלת טשטוש, אלא גם מייעלת את התעבורה, וחוסכת עד 50% בעלויות אחסון ו-CDN בהשוואה להוצאות קודמות.

במהלך השנים, עזרנו ליותר מ-100 פרויקטים להתאים גרפיקה למסכי retina, והפחתנו תלונות לקוחות על איכות תצוגה ירודה לאפס. פרויקט אחד היה חנות מקוונת עם קטלוג של 5000 מוצרים. לאחר החלפת כל האייקונים ל-SVG והוספת srcset לתמונות, ממוצע ה-LCP ירד ב-1.2 שניות, ונפח העברת הנתונים ירד ב-35%. הלקוח דיווח על ירידה של 12% בשיעור הנטישה.

שיטות להכנת גרפיקה למסכי Retina

תמונת PNG רגילה בגודל 100×100 פיקסלים על מסך עם devicePixelRatio: 2 נמתחת ל-200 פיקסלים פיזיים. הדפדפן מבצע אינטרפולציה — ומכאן הטשטוש. קיימים מספר פתרונות, כל אחד מיושם בהקשר שלו. אנו משתמשים בטכניקות הבאות בהתאם לסוג התוכן:

למה SVG עדיף על אייקוני רסטר?

עבור רכיבי ממשק, SVG הוא הגישה הנכונה היחידה. גרפיקה וקטורית מתקפלת ללא אובדן על כל DPI. אייקונים באמצעות <use xlink:href> או קומפוננטיזציה דרך React:

// Icon.tsx — системная иконка через SVG sprite
import { FC } from 'react';

interface IconProps {
  name: string;
  size?: number;
  className?: string;
}

const Icon: FC<IconProps> = ({ name, size = 24, className }) => (
  <svg width={size} height={size} className={className} aria-hidden="true">
    <use href={`/sprites/icons.svg#${name}`} />
  </svg>
);

השוואה: אייקון SVG ממוצע שוקל 0.5–2 KB, בעוד PNG בגודל 2x באותו גודל הוא 10–30 KB. חיסכון בתעבורה של 30–50% הוא נפוץ. יתר על כן, SVG תומך באנימציה ובשינוי צבע דינמי דרך CSS, מה שמפשט יצירת ערכות נושא.

איך להגדיר srcset לתמונות תוכן?

שים לב: כאשר SVG אינו זמין — תמונות, צילומי מסך, איורים מורכבים — אנו משתמשים ב-// Icon.tsx — системная иконка через SVG sprite import { FC } from 'react'; interface IconProps { name: string; size?: number; className?: string; } const Icon: FC<IconProps> = ({ name, size = 24, className }) => ( <svg width={size} height={size} className={className} aria-hidden="true"> <use href={`/sprites/icons.svg#${name}`} /> </svg> ); . דוגמה:

<img src="hero-800.jpg" srcset="hero-800.jpg 1x, hero-1600.jpg 2x, hero-2400.jpg 3x" width="800" height="450" alt="Главный экран приложения с retina-ready графикой" loading="lazy" decoding="async" /> 

למקרים אדפטיביים עם חיתוכים שונים, אנו משתמשים ב-srcset:

<picture>
  <source media="(min-width: 1024px)" srcset="hero-desktop-1x.webp 1x, hero-desktop-2x.webp 2x" type="image/webp" />
  <source media="(min-width: 1024px)" srcset="hero-desktop-1x.jpg 1x, hero-desktop-2x.jpg 2x" />
  <source srcset="hero-mobile-1x.webp 1x, hero-mobile-2x.webp 2x" type="image/webp" />
  <img src="hero-mobile-1x.jpg" srcset="hero-mobile-1x.jpg 1x, hero-mobile-2x.jpg 2x" width="390" height="260" alt="Главный экран" />
</picture>

מידע נוסף על מאפיין srcset ניתן למצוא ב-MDN Web Docs.

איך להכין תמונות רקע באמצעות CSS image-set?

.hero-banner {
  background-image: image-set(
    url('/img/banner-1x.webp') 1x,
    url('/img/banner-2x.webp') 2x
  );
  background-size: cover;
}
/* Fallback для старых браузеров */
@supports not (background-image: image-set(url('') 1x)) {
  .hero-banner {
    background-image: url('/img/banner-2x.webp');
  }
}

ערכת כלים להכנת גרפיקה

אופטימיזציית תמונות היא חלק בלתי נפרד מהתאמת retina. אנו משתמשים בפורמטים מודרניים WebP ו-AVIF, וכן בכלים כמו Sharp ו-SVGO ליצירה אוטומטית של כל הגרסאות. בצינור הייצור, בונה הנכסים מייצר את כל הגדלים ממקור יחיד. דוגמת סקריפט עבור Sharp ו-SVGO:

// scripts/build-assets.mjs
import sharp from 'sharp';
import { optimize } from 'svgo';
import { glob } from 'glob';
import fs from 'fs/promises';
import path from 'path';

const SOURCE_IMAGES = 'src/assets/images';
const SOURCE_ICONS = 'src/assets/icons';
const OUTPUT = 'public';

// растровые изображения
const imageFiles = await glob(`${SOURCE_IMAGES}/**/*.{png,jpg}`);
for (const file of imageFiles) {
  const name = path.basename(file, path.extname(file));
  const outDir = path.dirname(file).replace(SOURCE_IMAGES, `${OUTPUT}/img`);
  await sharp(file)
    .resize({ width: 800 })
    .webp({ quality: 82 })
    .toFile(`${outDir}/${name}-1x.webp`);
  await sharp(file)
    .resize({ width: 1600 })
    .webp({ quality: 78 })
    .toFile(`${outDir}/${name}-2x.webp`);
}

// SVG спрайт
const iconFiles = await glob(`${SOURCE_ICONS}/*.svg`);
let symbols = '';
for (const file of iconFiles) {
  const id = path.basename(file, '.svg');
  const raw = await fs.readFile(file, 'utf8');
  const { data } = optimize(raw, {
    plugins: ['preset-default', { name: 'removeViewBox', active: false }],
  });
  const symbol = data
    .replace(/<svg([^>]*)>/, `<symbol id="${id}"$1>`)
    .replace('</svg>', '</symbol>');
  symbols += symbol;
}
const sprite = `<svg xmlns="http://www.w3.org/2000/svg" style="display:none">${symbols}</svg>`;
await fs.writeFile(`${OUTPUT}/sprites/icons.svg`, sprite);

איך אנו פותרים את המשימה: תהליך שלב-אחר-שלב

1. ביקורת על התמונות והאייקונים הנוכחיים באתר. קביעה אילו רכיבים דורשים החלפה.
2. החלפת אייקוני רסטר ב-SVG sprite. יצירת קובץ sprite יחיד המכיל את כל האייקונים.
3. הוספת srcset לכל תמונות התוכן. עבור כל תמונה, יצירת גרסאות 1x, 2x, ובאופציה 3x.
4. הכנת תמונות רקע באמצעות CSS image-set(). עיבוד כל הצהרות background-image.
5. הקמת צינור אוטומטי ליצירת גדלים באמצעות Sharp, Vite-imagetools, או מקבילים.
6. בדיקה על מכשירים אמיתיים: iPhone, MacBook, Galaxy.
7. תיעוד התהליך ומסירת קבצי המקור ללקוח.

מה כלול בעבודה

לאחר סיום, תקבל:

• SVG sprite עם כל האייקונים.
• קבוצת תמונות תוכן עם גרסאות srcset.
• סגנונות CSS עם image-set() לתמונות רקע.
• הגדרת צינור ליצירת גדלים אוטומטית (הגדרת Sharp/SVGO).
• תיעוד על התהליך וגישה למשאבים.
• הדרכה לצוות שלך על עבודה עם גרפיקה אדפטיבית.
• אחריות ל-12 חודשים על כל העבודה שבוצעה.

בדיקה על מסכי Retina

כלים:

• Chrome DevTools → Sensors → Device pixel ratio: הגדר ל-2 או 3.
• Firefox: <img src="hero-800.jpg" srcset="hero-800.jpg 1x, hero-1600.jpg 2x, hero-2400.jpg 3x" width="800" height="450" alt="Главный экран приложения с retina-ready графикой" loading="lazy" decoding="async" /> → <picture>.
• מכשירים אמיתיים: iPhone 13+, MacBook Pro M1+, Samsung Galaxy S22+.

רשימת בדיקה לפני מסירה:

ציר זמן

התאמת retina בסיסית לפריסה קיימת (החלפת אייקונים ל-SVG, הוספת srcset): מיום עד יומיים. פריסת retina מלאה לפרויקט חדש כלולה בציר הזמן הכולל. העלות מחושבת באופן אישי — נבחן את הפרויקט שלך ללא עלות. צור קשר לייעוץ והערכה מדויקת.