Retina-Ready 이미지를위한 웹 사이트 설정 방법

iOS 기기의 Retina 디스플레이가 처음 출시 된 이래로 꽤 오랜 시간이 걸렸지 만 디자이너와 개발자가 완전히 반응하는 모바일의 사실을 알게 되더라도 여전히 Retina 준비가되어 있지 않은 많은 웹 사이트가 있습니다. - 친한 세상.

점점 더 보편화 된 Retina 디스플레이에서 작업을 최상으로 보이게하는 옵션에 대해 알아야 할 사항이 있습니다. 희소식은 생각보다 어려운 것처럼 실제는 그렇게 복잡하지 않다는 것입니다.

$config[code] not found

Retina-Ready 이미지를위한 웹 사이트 준비하기

너의 재미를 두배로하다

실제로이 고양이를 껍질을 벗길 수있는 방법에는 여러 가지가 있습니다. 첫 번째 단계에서는 CSS를 조금 더 세밀하게 조정하고 이미지 버전을 정상 해상도의 두 배로 포함해야합니다. CSS는 사이트가 표시되는 기기에 따라 표시 할 이미지를 결정합니다.

필요한 CSS 업데이트는 대상 브라우저에 따라 달라질 수 있지만 좋은 소식은 지금은 그리 복잡하지 않으며 점점 더 쉬워지고 있다는 것입니다. 실제 코딩은 다른 날로 남겨 둘 것입니다.

한 가지 유의해야 할 점은 망막 이미지의 명명 규칙을 개발하여 나중에 편집해야 할 경우에 대비하여 이미지의 두 버전을 쉽게 연결할 수 있도록하는 것입니다.

SVG

또 다른 접근법은 SVG 또는 Scalable Vector Graphics입니다. 이름에서 알 수 있듯이 이들은 벡터 그래픽으로 제한되며 사진 이미지에는 사용할 수 없지만 SVG 그래픽을 사용하면 사이트의 각 그래픽에 대해 두 개의 이미지 파일을 사용할 필요가 없습니다. 다시 말하지만 브라우저마다 다양한 변형이 있으므로 필요에 따라 추가 조사를 수행 할 수 있습니다.

그리고 위에서 언급 한 것처럼 사이트에 사진 형식 이미지가없는 경우 SVG가 대부분의 사이트에서 유일한 솔루션으로 작동하지 않을 수 있습니다.