PixRinseLas capturas de pantalla muestran la aplicación en inglés. Los nombres y controles preestablecidos también están disponibles en el idioma de su aplicación.
Tu punto de partida
Utilice Web adaptable en PixRinse, luego revise estas configuraciones con respecto a su destino real.
| Anchos | 320 / 640 / 1280 / 1920 px |
|---|---|
| Producción | WebP, calidad 80 |
| Color | sRGB |
| Pequeñas fuentes | Se omiten las variantes más grandes. |
como hacerlo
Comience con el activo original
Utilice una fuente lo suficientemente amplia para la variante más grande que necesite. Cada derivado se genera a partir del original en lugar de cambiar su tamaño repetidamente.
Seleccione Web adaptable
Revise los cuatro anchos y nombres de archivos integrados. Se omiten las variantes más anchas que la fuente, por lo que debe inspeccionar el recuento de salida planificado.
Exportar el conjunto de imágenes
Revisar todos los resultados. Múltiples salidas por fuente requieren Pro; el nivel gratuito aún se puede utilizar para probar un flujo de trabajo de tamaño único.
Añade las imágenes a tu página.
Utilice descriptores de ancho en srcset y configure sizes para que coincida con el diseño real. Incluya el ancho, el alto y el texto alternativo precisos en el elemento de imagen.
<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"
>LOS ARCHIVOS DE ESTE RECORRIDO
Lo que produjo este ejemplo
Una fuente de ancho 3072 px es lo suficientemente grande para los cuatro anchos preestablecidos. Cada archivo es un WebP independiente, generado directamente desde esa fuente.
- Calidad
- 80
- Perfil de color
- sRGB
- Salidas de una fuente
- 4
| Archivo | Formato | Píxeles | 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 |
Medido en los archivos de muestra que se muestran. Sus resultados dependen de sus originales y configuraciones. La fotografía del jarrón de cerámica es una muestra generada por IA. Las capturas de pantalla de la aplicación y las medidas de los archivos exportados son reales.
Un par de preguntas comunes
¿Qué sucede si mi fuente tiene solo 1000 px de ancho?
La plantilla omite las variantes 1280 y 1920 px. Sólo archivos de referencia que realmente se generaron.
¿La aplicación genera HTML?
Este flujo de trabajo produce imágenes. Agregue srcset y sizes en el código de su sitio web o sistema de contenido.
Ponga el flujo de trabajo a trabajar.
Abra PixRinse, agregue algunas imágenes y comience con la configuración anterior.
Descargar para MacGratis: hasta 10 imágenes por lote y una salida por fuente. Las múltiples salidas de este flujo de trabajo requieren Pro. Comparar gratis y profesional.