Ekran görüntüleri İngilizce uygulamayı göstermektedir. Önceden ayarlanmış adlar ve kontroller uygulama dilinizde de mevcuttur.

Başlangıç ​​noktanız

PixRinse'de Duyarlı Web kullanın, ardından bu ayarları gerçek hedefinize göre inceleyin.

Bu iş akışına ilişkin ayarlar
Genişlikler320 / 640 / 1280 / 1920 px
ÇıkışWebP, kalite 80
RenksRGB
Küçük kaynaklarDaha büyük çeşitler atlanır
PixRinse Duyarlı Web birden fazla WebP çıktı boyutunu gösteren ön ayar
Bu izlenecek yol için kullanılan ayarlar. Tam boyutta incelemek için ekran görüntüsünü seçin.

Nasıl yapılır

  1. Orijinal varlıkla başlayın

    İhtiyacınız olan en büyük değişken için yeterince geniş bir kaynak kullanın. Her türev, tekrar tekrar yeniden boyutlandırılmak yerine orijinalden oluşturulur.

  2. Duyarlı Web'yi seçin

    Dört yerleşik genişliği ve dosya adını gözden geçirin. Kaynaktan daha geniş değişkenler atlanır; bu nedenle planlanan çıktı sayısını inceleyin.

  3. Görüntü kümesini dışa aktar

    Tüm çıktıları inceleyin. Kaynak başına birden fazla çıkış Pro gerektirir; ücretsiz katman, tek boyutlu bir iş akışını test etmek için hâlâ kullanılabilir.

  4. Görselleri sayfanıza ekleyin

    srcset içindeki genişlik tanımlayıcılarını kullanın ve sizes değerini gerçek düzenle eşleşecek şekilde ayarlayın. Resim öğesine doğru genişlik, yükseklik ve alternatif metin ekleyin.

ÖRNEK HTML · DÜZENİNİZE UYARLANIN
<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"
>

BU GÜZERGAHTAN DOSYALAR

Bu örneğin ürettiği şey

3072 px genişliğindeki bir kaynak, önceden ayarlanmış dört genişliğin tümü için yeterince büyüktür. Her dosya, doğrudan o kaynaktan oluşturulan ayrı bir WebP'dir.

Kalite
80
Renk profili
sRGB
Tek kaynaktan çıktılar
4
Gerçek dışa aktarılan dosyalar
DosyaBiçimPikselBayt
vase-1280w.webpWebP1280 × 85335.214
vase-1920w.webpWebP1920 × 128064.108
vase-320w.webpWebP320 × 2134.018
vase-640w.webpWebP640 × 42711.594
Tek kaynak, dört kullanışlı web genişliği: dışa aktarılan gerçek sonuçlar
Bu izlenecek yolda gösterilen örnek dosyalar için gerçek dışa aktarma sonuçları.

Gösterilen örnek dosyalar üzerinde ölçülmüştür. Sonuçlarınız orijinallerinize ve ayarlarınıza bağlıdır. Seramik vazo fotoğrafı yapay zeka tarafından üretilen bir örnektir. Uygulama ekran görüntüleri ve dışa aktarılan dosya ölçümleri gerçektir.

Birkaç ortak soru

Kaynağım yalnızca 1000 px genişliğindeyse ne olur?

Şablon 1280 ve 1920 px değişkenlerini atlıyor. Yalnızca gerçekten oluşturulmuş referans dosyaları.

Uygulama HTML oluşturuyor mu?

Bu iş akışı görüntüler üretir. Web sitenizin koduna veya içerik sisteminize srcset ve sizes ekleyin.

İş akışını işe koyun.

PixRinse açın, birkaç resim ekleyin ve yukarıdaki ayarlarla başlayın.

Mac için indirÜcretsiz: grup başına en fazla 10 görüntü ve kaynak başına bir çıktı. Bu iş akışının birden fazla çıkışı Pro gerektirir. Ücretsiz ve Pro'yu Karşılaştırın.