Landing Page Image Quality

Cursor-Regel für Bildqualität auf Landingpages — Format, Lazy Loading und Alt-Texte automatisch berücksichtigt.

Original-Beschreibung der Autoren: Cursor rules for avoiding placeholder or broken image URLs, using stable visual assets, and checking alt text, dimensions, licensing, and responsive behavior.

Die Regel

---
description: "Cursor rules for avoiding placeholder or broken image URLs, using stable visual assets, and checking alt text, dimensions, licensing, and responsive behavior."
globs: **/*
alwaysApply: false
---
# Landing Page Image Quality

When generating or editing user-facing pages, use real, relevant visual assets instead of placeholder image services.

## Image Sources

- Do not commit `placehold.co`, `via.placeholder.com`, `dummyimage.com`, `picsum.photos`, random image URLs, or broken/deprecated image services.
- Prefer committed project assets, product screenshots, generated assets approved by the user, or stable URLs from an approved image provider.
- Before using a third-party image, confirm the license and attribution requirements are compatible with the project.
- Avoid hotlinking images from arbitrary websites.

## Asset Quality

- Match images to the actual content, product, place, object, or user state they represent.
- Do not use vague atmospheric images when the user needs to inspect a product, feature, workflow, or interface.
- Use consistent aspect ratios for repeated cards or gallery items.
- Provide explicit `width` and `height` attributes or CSS aspect-ratio constraints to prevent layout shift.
- Use optimized formats and sizes appropriate for the target framework.

## Accessibility

- Every informative image must have specific `alt` text that describes the image's purpose in context.
- Decorative images must use empty alt text and should not be announced to assistive technology.
- Do not put essential text only inside an image.

## Implementation Checks

- Ensure image paths resolve in the built application.
- Check responsive behavior at mobile and desktop widths.
- Verify that loading, error, and empty states do not leave broken image icons in production UI.

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Cursor-Regel, die den KI-Editor anweist, bei der Arbeit an Landingpages auf Bildqualität zu achten — etwa passende Auflösungen, moderne Formate (WebP/AVIF), Lazy Loading, korrekte alt-Texte und responsive Bildgrößen. Statt bei jedem Landingpage-Task erneut auf Performance- und SEO-Aspekte von Bildern hinzuweisen, sorgt die Regel dafür, dass Cursor diese Best Practices automatisch mitdenkt. Nützlich für Frontend- und Marketing-Entwickler:innen, die viele Landingpages bauen und dabei Ladezeit sowie Core-Web-Vitals im Blick behalten müssen. Ersetzt kein echtes Bildoptimierungs-Tool, hilft aber, Qualitätsstandards direkt beim Coden einzuhalten statt sie nachträglich zu prüfen.

Praxis-Tipp

In Kombination mit einem Prompt wie “Baue die Hero-Section mit Produktbild” nutzen — die Regel erinnert Cursor automatisch an Format, Lazy Loading und alt-Text.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …