Fokuspunkt Test & Editor
Diese Seite demonstriert, wie Fokuspunkt-Koordinaten die Bildpositionierung mit CSS object-position beeinflussen. Nutze den interaktiven Editor, um verschiedene Fokuspunkte zu testen.
Interaktiver Fokuspunkt-Editor
Klicke auf das Bild, um den Fokuspunkt zu setzen
Fokuspunkt-Koordinaten
Generierte CSS
50% 50%{
"focusX": 0.5,
"focusY": 0.5
}Schnellauswahl
Zentriert - Standard-Position
Breiter Container (16:9)
Hoher Container (3:4)
Quadratischer Container (1:1)
Oben links - Fokus auf oberen linken Bereich
Breiter Container (16:9)
Hoher Container (3:4)
Quadratischer Container (1:1)
Oben rechts - Fokus auf oberen rechten Bereich
Breiter Container (16:9)
Hoher Container (3:4)
Quadratischer Container (1:1)
Unten links - Fokus auf unteren linken Bereich
Breiter Container (16:9)
Hoher Container (3:4)
Quadratischer Container (1:1)
Unten rechts - Fokus auf unteren rechten Bereich
Breiter Container (16:9)
Hoher Container (3:4)
Quadratischer Container (1:1)
Mitte links - Fokus auf linke Seite
Breiter Container (16:9)
Hoher Container (3:4)
Quadratischer Container (1:1)
Mitte rechts - Fokus auf rechte Seite
Breiter Container (16:9)
Hoher Container (3:4)
Quadratischer Container (1:1)
Kein Fokuspunkt - Standard oben
Breiter Container (16:9)
Hoher Container (3:4)
Quadratischer Container (1:1)
Responsive Breakpoint-Test
Teste, wie sich der Fokuspunkt bei verschiedenen Bildschirmgrößen verhält:
Mobile (320px - 768px)
Porträt-optimiert
(0.3, 0.3)
Landschaft-optimiert
(0.7, 0.5)
Tablet (768px - 1024px)
Oben links
(0.2, 0.2)
Oben rechts
(0.8, 0.2)
Zentriert
(0.5, 0.5)
Desktop (1024px+)
Oben links
(0.2, 0.2)
Oben rechts
(0.8, 0.2)
Unten links
(0.2, 0.8)
Unten rechts
(0.8, 0.8)
Direkter Vergleich - Gleicher Container, verschiedene Fokuspunkte
Oben links
(0.2, 0.2)
Oben rechts
(0.8, 0.2)
Unten links
(0.2, 0.8)
Unten rechts
(0.8, 0.8)
CMS-Komponenten Vergleich
Hier siehst du, wie die Fokuspunkt-Funktionalität in den tatsächlichen CMS-Komponenten implementiert ist:
HeroImage Komponente
Fokuspunkt: (0.5, 0.3) - Porträt-optimiert
CSS: 50% 30%
CmsHero Komponente
Fokuspunkt: (0.7, 0.5) - Rechts zentriert
CSS: 70% 50%
NewsCard Komponente
Fokuspunkt: (0.3, 0.4) - Links oberhalb Mitte
CSS: 30% 40%
HighlightNews Komponente
Fokuspunkt: (0.5, 0.6) - Zentriert, leicht unten
CSS: 50% 60%
Implementierungsdetails
- • Alle Komponenten verwenden
getImageStylesWithFocusPoint()ausfocusPointUtils.ts - • Fokuspunkt-Daten kommen aus Strapi CMS (focusPoint: {focusX: number, focusY: number})
- • Fallback auf "top" wenn keine Fokuspunkt-Daten vorhanden sind
- • Funktioniert mit Next.js Image-Komponente und object-fit: cover
Wie es funktioniert
- Fokuspunkt-Koordinaten sind im Bereich 0-1 (0% bis 100%)
- focusX: 0 = linker Rand, 0.5 = Mitte, 1 = rechter Rand
- focusY: 0 = oberer Rand, 0.5 = Mitte, 1 = unterer Rand
- Diese Koordinaten werden in CSS object-position Prozentwerte umgewandelt
- Funktioniert mit object-fit: cover um das Seitenverhältnis zu erhalten und auf den angegebenen Punkt zu fokussieren
- Fallback: Wenn keine Fokuspunkt-Daten vorhanden sind, wird standardmäßig "top" verwendet
Performance & Optimierung
Hier findest du Tipps zur Performance-Optimierung und Best Practices:
Performance-Tipps
- • Next.js Image: Automatische Optimierung und Lazy Loading
- • Cloudinary: Automatische Bildgrößen-Anpassung
- • CSS object-position: Hardware-beschleunigt, keine JavaScript-Berechnungen
- • Fallback: Schnelle "top" Positionierung bei fehlenden Daten
- • Memoization: Focus Point Utils sind stateless und schnell
Messbare Vorteile
- • Ladezeit: Keine zusätzlichen API-Calls für Bildpositionierung
- • UX: Konsistente Bildausschnitte auf allen Geräten
- • SEO: Bessere Core Web Vitals durch optimierte Bilder
- • Wartung: Zentrale Logik in focusPointUtils.ts
- • Flexibilität: Einfache Anpassung ohne Code-Änderungen
Code-Beispiel für Optimierung
// Optimiert: Statische Funktion, keine Re-Renders
const imageStyles = getImageStylesWithFocusPoint(focusPoint, {
objectFit: "cover"
});
// In Komponente verwenden:
<Image
src={optimizedImageUrl}
alt={altText}
fill
style={imageStyles} // Einmal berechnet, wiederverwendet
priority={isAboveFold} // Nur bei wichtigen Bildern
/>Export & Integration
Exportiere deine Fokuspunkt-Konfigurationen für die Verwendung in Strapi CMS:
Aktuelle Konfiguration
Strapi CMS Integration
{
"focusPoint": {
"type": "component",
"component": "media.focus-point",
"required": false
}
}{
"focusX": {
"type": "decimal",
"min": 0,
"max": 1,
"default": 0.5
},
"focusY": {
"type": "decimal",
"min": 0,
"max": 1,
"default": 0.5
}
}Praktische Anwendung
In deinem Strapi CMS kannst du bei Artikeln und CMS-Seiten Fokuspunkt-Koordinaten setzen, um zu bestimmen, welcher Teil des Bildes bei verschiedenen Bildschirmgrößen sichtbar bleibt.
Beispiele für Fokuspunkte:
- • Porträt: (0.5, 0.3) - Fokus auf Gesicht
- • Landschaft: (0.5, 0.7) - Fokus auf Horizont
- • Sport: (0.3, 0.5) - Fokus auf Spieler links
- • Logo: (0.5, 0.2) - Fokus auf oberen Bereich
Unterstützte Komponenten:
- • CMS Hero-Bilder
- • Artikel-Hero-Bilder
- • News-Cards
- • Highlight-Slider (Artikel-basiert)