위 미리보기 이미지가 휴대폰 화면에 로드될 때 뭔가 웃긴 점을 발견한 사람이 있나요?
왜 미리보기 정사각형이 채워지는데 이렇게 고통스럽게 오래 걸린 걸까요?
그건 이 이미지가 아주 크기 때문이에요!
그런데 왜 아주 작은 미리보기 이미지가 보여지기 전에 이미 로드되었을 수도 있는데, 이렇게 큰 이미지가 사용자의 데이터 요금제를 다 써버리면서 이렇게 오래 걸려야 하는 걸까요?
정확히 누구를 탓해야 할지는 잘 모르겠어요.
아니요. 이건 버그가 아닙니다. 이미지는 결국 나중에라도 도착하니까요. 그냥 사용자 경험(UX)이 나쁘다고 말하는 거예요. 사용자는 자신의 데이터 요금제에 아무도 신경 쓰지 않는다고 느끼게 되고, 페이지는 다른 페이지보다 훨씬 느리게 로딩을 마칩니다.
로딩 시간을 크게 느끼지 못했으니, 브라우저나 네트워크 문제일 가능성이 높습니다.
다른 기기로 처음 실행한 경우:
이것은 iOS에서 Chrome으로 실행한 것입니다
조급해하지 마세요. 선진국에 있는 그대의 상아탑에서는 그 차이를 절대 알 수 없을 겁니다. 하지만 비(非)상아탑에 있는, 비(非)선진국에 있는 나에게는 그 차이가 아주 크게 느껴지거든요!
개발자 도구를 사용해 국가를 2등 또는 3등 국가로 설정하고, 
, 캐시를 끄고, 페이지를 다시 불러오세요.
즉, 불만은 ISP와 그들의 피어링에 대한 것이죠?
정리하자면, 원본 이미지는 3.4MB이고, 해당 섬네일은 Cloudfront에서 서빙되며 해상도가 690x460이고 용량은 164KB입니다.
어쨌든, 무슨 제안을 하시는 건가요? Cloudfront가 사용자의 지역에서 CDN으로 적합하지 않다는 건가요? 아니면 Discourse가 최적화된 이미지를 충분히 빨리 다운로드하고 생성하지 못했다는 건가요?
제가 아는 한, 그 치수들은 휴대폰 화면 자체보다 더 큽니다!
저는 작은 스마트폰(4.6인치 | 720 x 1,280 픽셀)을 사용하는데, 제 화면은 섬네일보다 작지 않습니다. 당신의 화면은 얼마나 작습니까?
데이터 가격이 미국보다 8배, 유럽보다도 여전히 2.5배나 저렴한 당신의 ‘상아탑이 아닌’ 나라에서요? (출처) 아니면 세계 최고 속도의 광대역 인터넷을 보유한 당신의 ‘상아탑이 아닌’ 나라를 말씀하시는 건가요? (출처)? 혹은 이동 데이터 기준 여전히 28위에 머물러 있어 많은 선진국보다 순위가 높은 당신의 ‘상아탑이 아닌’ 나라를意指하신 걸까요? (출처)
더 큰 폰이 필요한 것 같습니다.
이전 게시물들을 보면 Jidanni는 Galaxy A13 5G와 Zenfone 3을 가지고 있는 것으로 보입니다:
Galaxy A13 5G: 6.5인치, 1600 x 720
Asus Zenfone 3: 5.5인치, 1920 x 1080
최적화된 섬네일 이미지는 690x460 크기로, onebox에 의해 그 치수가 더 제한되므로 이 기기들의 화면보다 크지 않습니다. 하지만 브라우저 확대 기능을 사용하니까, 정확히는 알 수 없습니다 
여기 뭔가 수상해 보입니다.
데스크톱 뷰에서는 onebox가 690x460px, 160 KB 사진을 로드하는 반면, 모바일에서는 1380x920, 500 KB 사진을 로드합니다. 
주제를 #contribute:bug로 이동합니다. 제 생각에는 버그인 것 같아서, 나중에 다시 분류될 수도 있겠네요 
제가 틀렸을 수도 있지만, 이렇게 하는 것이 타당하다고 생각합니다.
HTML srcset를 보면, 디바이스 픽셀 비율(x1, x1.5, x2)에 따라 다음 이미지들이 제공됩니다.
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_690x460.jpeg,
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_1035x690.jpeg 1.5x,
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_1380x920.jpeg 2x
보통 모바일 기기는 픽셀 밀도가 높아 x2 비율(또는 그 이상)을 가집니다.
따라서 더 높은 해상도의 이미지를 제공하기를 원하게 됩니다.
디바이스 픽셀 비율(DPR)은 디바이스 제조사가 제공하는 수치로, HiDPI(High Dots Per Inch) 또는 Retina(애플의 상표) 디스플레이에 사용됩니다. 이러한 디스플레이는 현대의 스마트폰, 태블릿, 일부 노트북 및 모니터에 포함됩니다.
DPR은 디스플레이의 픽셀 밀도와 직접적인 상관관계가 있으며, 밀도가 높을수록 DPR 값도 커집니다.DPR은 화면의 가로(폭) 또는 세로(높이) 방향에서 물리적(디바이스) 픽셀과 논리적(CSS) 픽셀 사이의 비율입니다.
즉, DPR은 화면의 CSS 해상도를 계산하는 데 사용되는 수치입니다. DPR을 통해 한 CSS 픽셀이 실제 물리적 하드웨어 픽셀 몇 개로 구성되어 있는지 직접 확인할 수 있습니다.예시:
Apple iPhone 12
디바이스(물리적) 픽셀 해상도: 1170 x 2532
DPR: 3
폭: 1170/3 = 390, 높이: 2532/3 = 844
따라서 CSS 픽셀 해상도: 390 x 844DPR이 3이므로, 픽셀 그리드에서: 3(폭) x 3(높이) = 9; 9개의 물리적 픽셀이 하나의 CSS 픽셀을 형성합니다.
음, 이건 버그라고 생각하지 않습니다. 모바일 뷰에서 내 아이패드가 데스크톱보다 더 높은 해상도의 사진을 로드하는데, 그렇게 할 수 있기 때문이죠. 틀렸을 수도 있지만, 내 이해로는 화면 크기가 아니라 기기 성능에 따라 달라지는 거라고 알고 있습니다.
그리고, 이 주제가 원박스(One Box) 섬네일 자체에 관한 건지, 아니면 원박스 링크를 클릭했을 때 실제 사진이 로드되는 것에 관한 건지 여전히 명확하지 않습니다.
좋은 지적이네요.
스마트폰은 화면 크기가 작아서 해상도가 낮은 이미지를 사용해도 사용자가 거의 인지하지 못할 가능성이 높습니다. 그리고 일반적으로 모바일 네트워크를 통한 인터넷 연결이 가정용 인터넷 연결보다 느린 경우가 많다고 생각합니다. 따라서 모바일 환경에서는 데스크톱 컴퓨터보다 더 큰 이미지를 로드하는 것을 기대하지 않을 것입니다.
하지만 scrset은 픽셀 비율에 따라 어떤 이미지를 로드할지 지정합니다. 
이것은 분명히 버그가 아니므로 Contribute > UX 로 다시 이동하겠습니다. 
썸네일입니다.
실제로 여기에서 우리는 Kiwi 브라우저의 개발자 도구(Developer Tools) 결과를 볼 수 있습니다.
네, 우리는 500킬로바이트짜리 썸네일에 대해 이야기하고 있습니다.
팀 버너스 리(Tim Berners-Lee)는 이를 어떻게 생각할까요?
좋아요, 웹 검색을 해봤는데 실제로 500KB는 썸네일로서 합리적인 크기입니다 – 만약 여러분이 그것을 YouTube에 업로드한다면요.
제 말은, 아마도 그것은 꽤 멋진 홀로그램 50차원 썸네일이나 그런 것일 겁니다. 약 5000바이트로 같은 것을 만들 수 없었는지 확신할 수 있나요? 사용자가 차이를 알아차릴 수 있을까요? 아니요, 저는 에너지 위기나 웹 속도 저하를 누구 탓으로 돌리는 것이 아닙니다. 다만, 최종 도착지가 작은 휴대폰인 점을 고려하면 더 잘 할 수 있는 부분이 있다고 생각합니다.
제 말은, 그들이 어떤 휴대폰 크기의 기기를 가지고 있든, 인간에게는 아무런 차이가 없는데 더 많은 바이트를 추가하는 데에는 한계가 있어야 한다는 것입니다. 그들이 독수리 눈(매의 눈)을 가지고 있는 한은 모르겠지만, 그들은 독수리가 아니라 인간이니까요.
여기 뭔가 문제가 있는 것 같습니다. 그 이미지가 너무 큽니다. 우리 원박스(Onebox) 구현 방식은 훨씬 작은 이미지로 충분할 텐데도 불구하고 지나치게 큰 이미지를 요청하고 있습니다.
향후 한 달 정도 동안 확인해 보겠습니다.
위키미디어 링크의 onebox 썸네일 크기 문제를 특별히 해결하는 PR이 방금 병합되었습니다.
다음은 이를 테스트할 수 있는 위키미디어 링크입니다:
모든 onebox 썸네일 크기에 적용될 수 있는 더 일반적인 수정 사항은 아직 개발이 필요합니다.
모든 원박스(onebox)에 적용할 수 있는 보다 일반적인 수정이 생성되었습니다:
테스트를 위해 이 비위키미디어 사이트의 기사를 사용했습니다: Read the latest Great Reads stories from car lovers like you - Hagerty Media 해당 사이트에는 원박싱할 수 있는 상당히 큰 이미지들이 있었기 때문입니다.
수정 전:
수정 후:
이 변경 사항 이전에는 원박스 이미지가 약 400kb이었습니다. 제 변경 사항 이후에는 약 100kb가 되었습니다.
다음은 축소된 썸네일 크기를 사용하는 원박스 예시입니다.
이 주제는 41시간 후 자동으로 닫혔습니다. 새로운 답글을 더 이상 작성할 수 없습니다.
