Digamos que tiene una imagen fotográfica que realmente debería ser un JPG o WebP, para obtener el mejor tamaño y calidad de archivo. Pero, ¿y si yo también necesito transparencia? ¿No necesito PNG para eso? ¿No supondrá eso archivos de gran tamaño (PNG-24) o una calidad extraña (PNG-8)? Veamos otra forma que termina siendo lo mejor de ambos mundos.
La imagen fotográfica original.
El objetivo es recortarme de la imagen, eliminando el fondo. Mi técnica para eso suele ser usar Photoshop y cortar un trazado de recorte manualmente con la herramienta Pluma.
Ahora puedo seleccionar el inverso de ese trazado de recorte para eliminar fácilmente el fondo.
¡Intentar guardar esto como una imagen de 1200px de ancho como PNG-24 de Photoshop termina como una imagen de 1MB!
1 MB es enorme 🙁
Podríamos reducir eso en un 75% usando PNG-8, pero luego 1) obtenemos ese extraño aspecto de Giffy (menos fotográfico) y 2) tenemos que elegir un color mate para los bordes porque no estamos obteniendo una buena transparencia alfa aquí, solo transparencia binaria.
Tamaño de archivo mucho mejor, pero la calidad es extraña.
Dios, ¿y si pudiéramos usar JPG? La calidad y el tamaño del archivo es camino mejor.
Sin embargo, no hay transparencia.
¡Pero espera! ¿No podemos simplemente cortar esto? Tenemos clip-path ahora. Bueno sí. Tenemos clip-path. No puede tomar un path(), sin embargo, y lo que hemos creado para puntos vectoriales en Photoshop son datos de ruta. Podría tomar un polygon() aunque, si hiciéramos todas las líneas rectas. Probablemente eso no sea lo ideal (¡tengo curvas!). O podríamos hacer un <clipPath> elemento en algún SVG en línea y uso clip-path: url(#id_of_clipPath);, que admite un <path> dentro.
También hay enmascaramiento, que es otra posibilidad.
Sin embargo, veamos una tercera posibilidad: poner todo en <svg>. Eso tenía un sentido lógico para mí, así que todo esto se mantiene unido y se escala junto.
El truco consiste en hacer dos cosas:
- El JPG
- El recorte
<path>
El JPG es bastante fácil. Imprima eso directamente desde Photoshop. Optimizar.
Ahora podemos configurar el SVG. SVG se complace en tomar un gráfico de trama. SVG es conocido por los gráficos vectoriales, pero es un formato de imagen muy flexible.
<svg>
<image xlink:href="https://css-tricks.com/images/chris.jpg" x="0" y="0">
<svg>Para obtener la ruta, exportamos la ruta que creamos con la herramienta Pluma a Illustrator.
Ahora tenemos la ruta allí y es fácil de exportar como SVG:
Ahora tenemos los datos de ruta que necesitamos:
Incluso con todos esos puntos, esto fue 1.5K sin optimizar y descomprimido. No hay mucha sobrecarga.
Usemos eso <path> Dentro de un <clipPath> en el SVG que comenzamos. A continuación, aplique también esa ruta de recorte a la <image>:
<svg viewBox="0 0 921.17 1409.71">
<defs>
<clipPath id="chris-clip">
<path d=" ... " />
</clipPath>
</defs>
<image xlink:href="https://css-tricks.com/images/chris.jpg" clip-path="url(#chris-clip)" x="0" y="0" width="921" height="1409">
<svg>¡Tada!
Un JPG transparente, esencialmente.