비디오: Uploading an image into design space with iPhone/iPad 2024
웹 사이트에서 눈길을 사로 잡는 이미지는 이미지를 중요시하는 iPhone 및 iPad 애호가를 유치하는 가장 좋은 방법 중 하나입니다. 그러나 포스터 크기로 날아갈 수있는 고해상도 이미지를 iPhone 화면에 밀어 넣는 것은 의미가 없습니다. 사진이 올바르게 표시되지 않을뿐만 아니라 크기가 큰 파일을 다운로드하면 시간이 오래 걸리고 방문자가 사이트를 포기하게됩니다.
모바일 사용자가 액세스 할 수있는 모바일 사이트 홈 페이지에서 큰 이미지를 다운로드하도록 방문자를 유도하는 대신 디자인에서 사용자가 작업하는 제약 사항을 준수하도록해야합니다.
모바일 웹 사이트에 이미지를 넣으려는 경우 다양한 화면 크기, 해상도 및 종횡비를 처리 할 전략이 있으면 설계 프로세스가보다 원활하게 진행됩니다.
하나의 이미지를 두 화면에 맞게 크기 조정: iPhone 및 iPad에서 모두 작동하도록 최적화 된 이미지를 만드는 실용적이고 시간을 절약 할 수있는 방법은 두 가지 모두에서 잘 보이는 웹 최적화 이미지를 만드는 것입니다. 장치.
완벽한 과학은 아니지만, iPad와 iPhone 4에는 멋진 이미지가 표시되어 이미지를 약간 위아래로 확대 할 수 있으며 여전히 상당히 멋있게 보일 수 있습니다. 이 방법은 절대 안전한 것은 아니지만 최적화 된 이미지를 만드는 것이 가장 간단한 방법이며 많은 사이트에서 사용할 수 있습니다.
여러 이미지 크기 사용: 리소스와 시간이있는 경우 사이트를 각 장치의 기능 및 화면 크기에 맞게 조정하는 것이 가장 좋습니다.
이 방법을 사용하면 너비가 320 픽셀에서 1024 픽셀까지 다양한 크기로 각 이미지의 여러 버전을 만듭니다 (가로 모드에서 iPad의 화면에서 이미지를 확대하려는 경우). 그런 다음 장치 탐지 스크립트와 함께 장치에 가장 적합한 크기를 제공합니다.
장치 검색 스크립트를 설정하는 작업이 복잡하고 모든 이미지의 여러 버전을 만들면 일반 웹 사이트에 많은 작업이 추가되기 때문에 많은 사람들이 Galleria와 같은 서비스를 사용하여 최적화 된 많은 이미지가있는 슬라이드 쇼를 빠르게 만듭니다 전송되는 각 기기에 대해
이미지 포트폴리오 또는 갤러리 표시: 포트폴리오 사이트를 디자인하는 경우 - 고객이 언제 어디서나 자신의 작품을 과시 할 권한을 부여하는 것이고 (가장 최선의 방법을 찾도록) - 합법적 인 큰 파일 크기의 고해상도 이미지를 포함해야합니다.
이 상황을 처리하는 가장 좋은 방법은 저해상도 축소판 그림이나 짧은 텍스트 설명으로 한 페이지를 만든 다음 큰 이미지로 링크하는 것입니다.이 접근법의 예는 Inplainsight Art 웹 사이트에서 볼 수 있습니다. 그림과 같이 페이지 상단의 축소판 그림은 아래 그림과 같이 큰 버전으로 연결됩니다.
이렇게하면 가장 중요한 페이지는 모든 방문자가 볼 수있는 작은 이미지 버전으로 빠르게로드되며 고해상도 이미지에 관심이있는 사용자는 한 번에 하나씩 큰 버전을 다운로드하도록 선택할 수 있습니다.
iPhone 및 iPad에서 모두 작동하는 갤러리를 만드는 방법은 다양합니다. 기억해야 할 주요 개념은 Flash를 사용하지 않는 것입니다.
이러한 갤러리를 디자인 할 때 데스크탑 컴퓨터의 웹 브라우저와 터치 스크린의 차이점 중 하나는 iPhone 또는 iPad에서 마우스로 이미지를 넘길 수 없다는 점입니다. 대신 이미지 갤러리에서 일반적으로 사용되는 롤오버 이벤트는 iPad 또는 iPhone의 링크로 변환됩니다.
