빠른 대화형 지도를 위한 대형 이미지 준비

대화형 지도는 일반 웹 사진보다 훨씬 더 높은 이미지 성능을 요구합니다. 방문자는 미세한 건축 라벨, 단위 크기 및 개별 부스 경계를 ​​검사하기 위해 이동하고, 핀치하고, 확대합니다.

이미지가 너무 작으면 확대할 때 텍스트와 선이 흐려지고 읽을 수 없게 됩니다. 이미지가 압축되지 않은 80MB 원시 내보내기인 경우 페이지 로드 시간이 급증하고 반송률이 증가하며 메모리 제약으로 인해 모바일 장치가 충돌합니다.

LayerPin은 심층 확대 타일링 아키텍처를 사용하여 이러한 격차를 해소합니다. 소스 이미지를 올바르게 준비하면 면도날처럼 선명한 벡터와 같은 선명도로 즉각적인 이동 및 확대/축소 반응성을 얻을 수 있습니다.

디자인 소프트웨어(AutoCAD, Revit, Adobe Illustrator, Canva 또는 Figma)에서 마스터 플랜이나 평면도를 내보낼 때 최적의 결과를 얻으려면 다음 내보내기 규칙을 따르십시오.

벡터 CAD 및 청사진: 2배 또는 3배 크기로 고품질 PNG 또는 WebP로 내보냅니다. 넓은 확대/축소 개요에서 미세한 벽 경계가 사라지지 않도록 선 두께의 두께가 최소 1pt에서 1.5pt인지 확인하십시오.

항공 및 드론 사진: 85-90% 품질의 프로그레시브 JPEG 또는 WebP로 내보냅니다. 인간의 눈은 85% 품질에서는 압축 아티팩트를 감지할 수 없지만 압축되지 않은 100% 내보내기에 비해 파일 크기는 최대 70%까지 줄어듭니다.

LayerPin에 이미지를 업로드하면 처리 파이프라인이 다중 해상도 이미지 피라미드(심층 확대 타일)를 생성합니다.

모바일 브라우저가 50MB 이미지를 한꺼번에 다운로드하도록 강제하는 대신, LayerPin은 방문자의 현재 뷰포트 및 확대/축소 수준 내에서 표시되는 특정 마이크로 타일만 동적으로 스트리밍합니다. 낮은 확대/축소에서는 낮은 대역폭 개요 타일이 즉시 로드됩니다. 사용자가 Room 402를 확대하면 고해상도 타일 조각이 원활하게 스트리밍됩니다.

이 아키텍처는 매우 큰 아키텍처 마스터 플랜을 지원하면서 초기 이미지 전송을 줄입니다. 실제 로딩 시간은 여전히 ​​이미지 준비, 네트워크 상태, 호스팅 및 방문자 장치에 따라 달라집니다.

지도를 공개적으로 시작하기 전에 항상 실제 다중 장치 감사를 수행하십시오.

개인 브라우저 창에서 게시된 지도를 열고 데스크톱 4K/Retina 디스플레이, 셀룰러 연결이 가능한 중급 휴대폰, 가로 및 세로 방향의 태블릿 등 세 가지 조건에서 테스트하세요.

즉각적인 확대/축소가 필요 없이 초기 기본 확대/축소가 전체 관심 영역을 표시하는지 확인하고, 캔버스의 가장 먼 모서리를 가로질러 이동할 때 텍스트 레이블이 선명하게 유지되는지 확인합니다.