50,000px 규칙: 고해상도 웹 이미지 크기 조정

소개

오늘은 특정 달의 다른 날과 마찬가지로 새로운 것을 배웠습니다. 하지만 이 가벼운 지식은 특히 흥미로웠고 내 경험으로는 웹 개발자와 SEO 전문가 사이에서 잘 알려진 것이 아닙니다.

그래서 나는 생각했다. 내가 지금까지 바위 밑에서 살지 않았더라도 짧은 글을 써서 널리 알리는 건 어떨까?

바라건대, 지금쯤이면 여러분의 호기심이 조금이나마 풀리셨기를 바랍니다. 이제 더 이상 고민하지 않고 제가 명명한 50,000px 규칙을 살펴보겠습니다.

높은 수준의 개요

최근에 JSON-LD 구조화 데이터에 대한 Google Codelab을 작성하면서 이 정보를 알게 되었습니다. 내 목표에서 약간 벗어난 주제이지만 일부 관련 문구가 내 관심을 끌었습니다. 한번 봅시다!

"For best results, provide multiple high-resolution images (minimum of 50K pixels when multiplying width and height) with the following aspect ratios: 16x9, 4x3, and 1x1."
--Google Search Central

따라서 기본적으로 Google이 여기서 말하려는 것은 이것입니다. 사진 크기를 연결한 후 이 표현식이 true를 반환하지 않으면 사이트에서 고해상도 이미지를 제공하지 않는 것입니다.

<span>imgW * imgL &gt;= sqrt(50,000)</span>

수학을 약간 단순화합시다. 우리는 (2 x2 =4)를 알고 있으므로 이 값을 간단한 사각형에 할당해 보겠습니다. 주어진 정사각형 면적에 대한 공식을 사용하면 2인치 x2인치 정사각형의 표면적이...놀랍습니다! 4제곱인치.





이제 우리는 이 계산이 측정 단위에 따라 변하지 않는다는 것을 깨달아야 합니다. 대신 2피트 정사각형 또는 2cm 정사각형이 있는 경우 사용되는 측정 단위는 실제 값을 변경하지 않습니다.

그렇다면 픽셀도 측정 단위입니까? 물론! "px"로 축약되는 픽셀은 작은 측정 단위입니다. 1픽셀은 약 1/96인치(0.26mm)입니다.

작지만 이러한 반점은 웹 디자인에서 필수적인 역할을 합니다. 픽셀은 보기에 사용되는 화면 해상도에 관계없이 지정된 요소가 렌더링되도록 하는 데 사용됩니다.

실용적인 응용 프로그램

50,000px 규칙으로 돌아가서 이제 개념이 훨씬 단순해 보입니다. 고해상도 이미지의 최소 요구 사항을 충족하려면 사진의 정사각형 영역이 50K 픽셀 이상이어야 합니다.

웹 페이지에서 제공할 수 있는 이미지의 변형으로 널리 권장되는 세 가지 종횡비를 사용하여 이것이 무엇을 의미하는지 계산해 봅시다.

1:1 - 기본 정사각형 또는 썸네일 이미지

이제 이러한 유형의 계산에 익숙해져야 합니다. 50,000의 제곱근을 취한 후 1:1 비율의 고해상도 사진을 위한 최소 크기를 발견했습니다.

1:1 영상비

4:3 - 오래된 영화에 사용된 향수를 불러일으키는 "Academy ratio"

모양이 정사각형에서 직사각형으로 바뀌면 계산 프로세스가 덜 세분화되고 비율과 분수가 포함됩니다.

4:3 가로 세로 비율

16:9 - 현재 "와이드스크린"시네마틱 표준

짐작할 수 있듯이 기본 비율이 클수록 50,000과 이미지의 실제 크기 사이의 간격이 커집니다. 16:9 종횡비에서는 십진수를 사용하지 않고는 51,984제곱 픽셀보다 더 가까워질 수 없습니다.

16:9 화면 비율

결론

여러분, 50,000 규칙이 이해되었습니다. 이제 나는 어떤 개발자도, 심지어 나 자신도 이 정보를 자주 참조할 필요가 없을 것이라고 예상합니다.

그래도 연구하는 것은 즐거웠고 고해상도 이미지에 대한 구체적인 기준을 설정하기도 했습니다. 이 기사를 즐겁게 읽으셨기를 바라며 오늘 새로운 것을 배웠을 것입니다!

"For an image to be considered high-resolution when served on the Web, it must satisfy the 50,000px Rule."

이 기사를 💖하고 💭를 남기는 것을 잊지 마세요. 아래 의견에서 귀하의 생각과 의견을 읽기를 기대합니다. 더 너그러운 마음이 든다면 아래 제 이름을 🎆구독🎇 눌러주세요!

-- killshot13


.ltag__user__id__497515 .follow-action-button {
배경색: #243b4a !중요;
색상: #acf4db !중요;
테두리 색상: #243b4a !중요;
}

마이클 알 팔로우

Full-Stack Web Developer— Websites · Web Applications · WordPress · SEO · MongoDB · UGA/GA4 Certified · Windows Insider · WP Core · Ethical Hacker · USAF Veteran