IMAGE6 AVIF 변환 지원되는 이미지 압축 사이트 https://squoosh.app/ Squoosh Simple Open your image, inspect the differences, then save instantly. Feeling adventurous? Adjust the settings for even smaller files. squoosh.app AVIF 포맷을 사용하면 매우 효율이 좋지만 여전히 사파리는 지원이 미비해서 당장 사용하지는 않을 것 같습니다. 하지만 이미지 압축과 변환에 대한 정보를 알고 있는 것만해도 도움이 많이 되겠지요. 곧 사파리에서도 지원한다는 뉴스들이 조금씩 보입니다. 사파리에서도 적용되면 웹 퍼포먼스 환경의 획기적인 변화가 나타날 것이라고 생각되네요. 사용은 다음과 같이 하면 됩니다. 감사합니다 2021. 10. 4. WEBP 차세대 이미지 사용법 (ie 호환, fallback) picture 태그 에서 ie를 지원하기 위해서는 picture태그 내에 img 태그가 들어가야 합니다. 해당 이미지를 ie fallback으로 사용하기 때문입니다. 2021. 2. 7. 파비콘? 다크모드 지원은? 요즘 바야흐로 다크모드의 시대~ 웹도 시큐리티 웹도 모두 다크모두 전성시대인 것 같습니다. 다크모드를 지원하는 일부 기종과 media query가 나옴에 따라 조금 더 세분화하여 처리할 수 있게 되었는데요. 파비콘은 지금 보시고 계신 웹의 상단에 브라우저 타이틀에 제 캐릭터 아이콘이 떠 있듯이 각 웹 및 어플리케이션의 아이덴티티를 효과적으로 나타내는 수단 중 하나입니다. 파비콘? 브라우저의 북마크와 열린 탭을 통해 스캔 할 때 어떤 사이트가 어떤 사이트인지 이해하는 데 도움이됩니다. 아주 새로운 트릭 중 하나는 SVG를 즐겨 찾기 아이콘으로 사용하는 기능입니다. 대부분의 최신 브라우저가 지원하는 방식으로 더 많은 지원을 제공합니다. svg를 사용하면 path나 rect circle 등의 도형의 fill과.. 2020. 4. 25. [이미지] User-Agent가 사라진다고? 이미지 Client Hints 사용하기 이미지에 대한 Client Hints를 사용하기 위해 head 태그 내에 삽입해야되는 메타태그 Accept-CH: DPR, Viewport-Width Accept-CH: Width Accept-CH-Lifetime: 86400 Vary: DPR, Viewport-Width, Width Accept-CH를 통해서 위와 같은 속성들을 사용할 수 있으며, 저는 이번에 DPR, Viewport-Width, width를 사용해 봅니다. DPR의 범위를 제한함과 동시에 medaqueries 사이즈를 통해 각각 노출할 수 있습니다. 2020. 2. 15. 이전 1 2 다음
