PixRinseScreenshots zeigen die englische App. Voreingestellte Namen und Steuerelemente sind auch in Ihrer App-Sprache verfügbar.
Ihr Ausgangspunkt
Verwenden Sie Responsives Web in PixRinse und vergleichen Sie diese Einstellungen dann mit Ihrem tatsächlichen Ziel.
| Breiten | 320 / 640 / 1280 / 1920 px |
|---|---|
| Ausgabe | WebP, Qualität 80 |
| Farbe | sRGB |
| Kleine Quellen | Größere Varianten werden übersprungen |
Wie es geht
Beginnen Sie mit dem ursprünglichen Asset
Verwenden Sie eine Quelle, die breit genug für die größte benötigte Variante ist. Jedes Derivat wird aus dem Original generiert, anstatt wiederholt in der Größe geändert zu werden.
Wählen Sie Responsives Web
Sehen Sie sich die vier integrierten Breiten und Dateinamen an. Varianten, die breiter als die Quelle sind, werden übersprungen. Überprüfen Sie daher die geplante Ausgabeanzahl.
Exportieren Sie den Bildsatz
Überprüfen Sie alle Ausgaben. Mehrere Ausgaben pro Quelle erfordern Pro; Das kostenlose Kontingent kann weiterhin zum Testen eines Workflows mit einer einzigen Größe verwendet werden.
Fügen Sie die Bilder Ihrer Seite hinzu
Verwenden Sie Breitenbeschreibungen in srcset und stellen Sie sizes so ein, dass es dem tatsächlichen Layout entspricht. Fügen Sie dem Bildelement genaue Breite, Höhe und alternativen Text hinzu.
<img
src="vase-1280w.webp"
srcset="vase-320w.webp 320w,
vase-640w.webp 640w,
vase-1280w.webp 1280w,
vase-1920w.webp 1920w"
sizes="(max-width: 720px) 100vw, 960px"
width="1280" height="853"
alt="A terracotta vase with an olive branch"
>DIE DATEIEN AUS DIESER KOMPLETTSTRUKTUR
Was dieses Beispiel hervorgebracht hat
Eine 3072 px-breite Quelle ist groß genug für alle vier voreingestellten Breiten. Jede Datei ist ein separater WebP, der direkt aus dieser Quelle generiert wird.
- Qualität
- 80
- Farbprofil
- sRGB
- Leistungen aus einer Hand
- 4
| Datei | Format | Pixel | Bytes |
|---|---|---|---|
| vase-1280w.webp | WebP | 1280 × 853 | 35.214 |
| vase-1920w.webp | WebP | 1920 × 1280 | 64.108 |
| vase-320w.webp | WebP | 320 × 213 | 4.018 |
| vase-640w.webp | WebP | 640 × 427 | 11.594 |
Gemessen anhand der gezeigten Beispieldateien. Ihre Ergebnisse hängen von Ihren Originalen und Einstellungen ab. Das Foto der Keramikvase ist ein KI-generiertes Muster. Die App-Screenshots und exportierten Dateimessungen sind echt.
Ein paar häufig gestellte Fragen
Was passiert, wenn meine Quelle nur 1000 px breit ist?
Die Vorlage überspringt die Varianten 1280 und 1920 px. Nur Referenzdateien, die tatsächlich generiert wurden.
Generiert die App HTML?
Dieser Workflow erzeugt Bilder. Fügen Sie srcset und sizes in Ihren Website-Code oder Ihr Content-System ein.
Setzen Sie den Workflow in Gang.
Öffnen Sie PixRinse, fügen Sie ein paar Bilder hinzu und beginnen Sie mit den oben genannten Einstellungen.
Für Mac ladenKostenlos: bis zu 10 Bilder pro Stapel und eine Ausgabe pro Quelle. Für die mehreren Ausgaben dieses Workflows ist Pro erforderlich. Kostenlos und Pro vergleichen.