이 한 가지 트릭으로 PNG 무게를 크게 줄입니다.

서문: 이 기사에서는 귀하가 이미 SVG에 익숙하다고 가정합니다. 그렇지 않다면 지금이 familiarise yourself을 할 좋은 시간입니다! SVG의 힘은 실로 놀랍습니다.

아마도 당신은 이런 상황에 처했을 것입니다... 당신은 디자인을 받았고, 그것은 아름답고 색상과 이미지로 가득 차 있습니다.

그런 다음 디자이너는 영웅 배너에 변경되는 텍스트가 있고 배경색도 변경된다고 알려줍니다.

영웅 배너의 모습은 다음과 같습니다(훨씬 더 잘 디자인되었을 가능성이 높지만 요점을 알 수 있습니다).



좋습니다. 문제 없습니다. 즉, 배경 이미지만 사용하고 끝낼 수는 없습니다. 주인공을 여러 조각으로 나누어 일부가 역동적일 수 있도록 해야 합니다.

일반적으로 아이스크림 콘 이미지의 경우 PNG에 도달합니다. 그러나 PNG는 일반적으로 꽤 큽니다. 특히 DPI가 높은 화면에 맞추기 시작하면 더욱 그렇습니다. PNG 형식의 아이스크림은 무려 1.9MB에 달합니다! 그래서 대신에 SVG masks 트릭을 사용할 것입니다.


JPG(왼쪽) 292kb, 8비트 PNG(오른쪽) 17kb

먼저 아이스크림을 jpg로 저장하겠습니다. 투명도 대신 검정색 배경을 사용하겠습니다.

다음으로 마스크 이미지로 사용할 다른 이미지를 8비트 png로 저장합니다. 검정색 부분은 보이지 않고 흰색 부분은 모두 보입니다.

그런 다음 SVG에서 다음과 같이 함께 사용할 2개의 이미지를 사용합니다.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin" version="1.1" viewBox="0 0 938 1912">
  <defs>
    <mask id="mask">
      <image width="938" height="1912" xlink:href="/images/ice-cream-mask.png"/>
    </mask>
  </defs>
  <image mask="url(#mask)" width="938" height="1912" xlink:href="/images/ice-cream.jpg"/>
</svg>

위의 코드에서 볼 수 있는 이미지를 참조하거나 이 Codepen에서 볼 수 있는 base64으로 이미지를 인라인할 수도 있습니다.



그리고 거기 당신은 그것을 가지고 있습니다. 품질이나 투명성을 손상시키지 않고 1.9mb 투명 PNG에서 대략 309kb SVG로 전환했습니다. 꽤 달콤해, 헤이?

언제나 그렇듯이 즐거운 코딩하세요! 🤓

모든 브라우저를 테스트하지는 않았지만 SVG 지원이 현재 매우 광범위하므로 많은 문제가 예상되지 않습니다. 즉, 당신이 어떤 것을 만난다면 의견에 알려주십시오.

이것을 사용할 수도 있습니다great Codepen to help with your tests.