Front End Develop Front End Develop

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 포맷을 사용하면 매우 효율이 좋지만 여전히 사파리는 지원이 미비해서 당장 사용하지는 않을 것 같습니다. 하지만 이미지 압축과 변환에 대한 정보를 알고 있는 것만해도 도움이 많이 되겠지요. 곧 사파리에서도 지원한다는 뉴스들이 조금씩 보입니다. 사파리에서도 적용되면 웹 퍼포먼스 환경의 획기적인 변화가 나타날 것이라고 생각되네요. 사용은 다음과 같이 하면 됩니다. 감사합니다

picture 태그 에서 ie를 지원하기 위해서는 picture태그 내에 img 태그가 들어가야 합니다. 해당 이미지를 ie fallback으로 사용하기 때문입니다.

요즘 바야흐로 다크모드의 시대~ 웹도 시큐리티 웹도 모두 다크모두 전성시대인 것 같습니다. 다크모드를 지원하는 일부 기종과 media query가 나옴에 따라 조금 더 세분화하여 처리할 수 있게 되었는데요. 파비콘은 지금 보시고 계신 웹의 상단에 브라우저 타이틀에 제 캐릭터 아이콘이 떠 있듯이 각 웹 및 어플리케이션의 아이덴티티를 효과적으로 나타내는 수단 중 하나입니다. 파비콘? 브라우저의 북마크와 열린 탭을 통해 스캔 할 때 어떤 사이트가 어떤 사이트인지 이해하는 데 도움이됩니다. 아주 새로운 트릭 중 하나는 SVG를 즐겨 찾기 아이콘으로 사용하는 기능입니다. 대부분의 최신 브라우저가 지원하는 방식으로 더 많은 지원을 제공합니다. svg를 사용하면 path나 rect circle 등의 도형의 fill과..

이미지에 대한 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 사이즈를 통해 각각 노출할 수 있습니다.

Lazy Loading 기법 이제 이미지가로드되는 것을 막을 것이므로 브라우저에 로드 할 시기를 알려줘야합니다. 이를 위해 이미지가 뷰포트에 입력되는 즉시 로드를 트리거하는지 확인합니다. 이미지가 뷰 포트에 들어갈 때를 확인하는 두 가지 방법이 있습니다. Method 1 : Javascript 이벤트를 통한 방법 이 기술은 브라우저에서 이벤트 리스너를 scroll, resize 및 orientationChange 이벤트에 사용합니다. 스크롤 이벤트는 스크롤이 발생할 때 사용자가 페이지에있는 위치를 감시하므로 매우 명확합니다. resize 및 orientationChange 이벤트도 똑같이 중요합니다. 브라우저 창 크기가 변경되면 resize 이벤트가 발생하지만 장치가 가로 방향에서 세로 방향으로 회전 할..

CSS Image Sprite CSS IMAGE Sprites?HTTP 요청 횟수와 트래픽을 절약하는 기법으로 실제로 적용하기도 매우 쉬워서 많이들 사용하는 것 같습니다.웹 애플리케이션을 최적화하는 것은 유저들을 위한 필수 요소이며, 포털사이트 같은 부분에서는 현재 널리 쓰이고 있습니다. 마젠타 배경(투명, 마스킹)에 여러 아이콘들을 넣어서 하나의 이미지로 쓰는 것이 일반적입니다.여러 이미지를 HTTP 요청 한번으로 로드한 뒤에 'background-position' 속성을 사용하여 더 빠른 웹 브라우징을 가능하게 해줍니다. 스프라이트라는 용어는 비디오 게임에서 가장 자주 사용되는 컴퓨터 그래픽 기술에서 유래했다고 합니다. 컴퓨터가 그래픽을 메모리로 불러 와서 한 번에 그 이미지의 일부만 표시할 수 있다..