Landing Page Image Quality

Cursor-Regel für Landingpage-Bilder – moderne Formate, Lazy Loading und Alt-Texte statt naive img-Tags.

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

Diese Regel steuert die KI dazu, bei Landingpage-Bildern von Anfang an auf Performance und Zugänglichkeit zu achten: moderne Formate wie WebP oder AVIF statt unkomprimiertem JPEG/PNG, responsive srcset-Angaben für verschiedene Bildschirmgrößen, Lazy Loading außerhalb des sichtbaren Bereichs und sinnvolle Alt-Texte für SEO und Barrierefreiheit. Sinnvoll für alle, die Marketing- oder Produktseiten bauen und verhindern wollen, dass generierter Code naive -Tags ohne Optimierung liefert – ein häufiger Grund für schlechte Core-Web-Vitals-Werte. Ersetzt keine echte Bildoptimierungs-Pipeline, sorgt aber dafür, dass die KI von sich aus die richtigen Attribute mitliefert.

Praxis-Tipp

Bei „Baue eine Hero-Section mit Bild“ prüfen, ob die Antwort automatisch loading=“lazy”, ein srcset und einen beschreibenden Alt-Text setzt.

Lizenz & Quelle

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

Lade …