웹 사이트에서 피해야 할 8 가지 이미지 실수

/2019-12-05 12:43:11/
Arjen
/제도법/

큰 이미지, 갤러리 및 사진이 많은 디자인은 웹 디자인에서 큰 트렌드입니다. 이 미학을 최대한 활용하려면 웹 사이트의 모든 이미지가 디스플레이에 적합하고 브랜드를 잘 표현하고 싶을 것입니다.

기술적 인 문제에서 이미지 품질에 이르기까지 디자이너들이 많은 실수를 저지르고 있습니다. 그러나 웹 사이트 이미지로 작업 할 때 이러한 함정 중 하나에 속하지 않아도됩니다. 여기서는 이미지 실수와이를 수정하거나 피하는 방법을 살펴 보겠습니다. (이 게시물의 보너스로, 우리는 Death에서 Stock Photo의 최근 객체 컬렉션에 이르기까지 재미 있고 멋진 이미지 모음을 제공합니다.)

실수 : 큰 파일 업로드

전체 크기 이미지는 인쇄 작업과 관련하여 아름답고 필요하지만 웹에서는 문제가 발생할 수 있습니다. 큰 이미지는 느리게로드됩니다. 로드 시간이 느리면 사용자가 사이트를 포기하게됩니다.

불행히도 쉽게 넘어 질 수있는 함정입니다. 많은 백엔드 프로그램에서는 큰 이미지를 업로드 할 수 있으며주의를 기울이지 않으면 파일이 놀라운 크기로 업로드되고 있음을 알지 못할 수도 있습니다. 용도에 따라 다른 이미지는 다른 이미지 사양이 필요합니다. 사이트에서 공통 이미지 영역의 크기를 알 수 있도록 브랜드 또는 웹 사이트 가이드를 참조하십시오.

이미지를 생각할 때 파일 형식도 중요합니다. 웹에 딱딱한 것을 사용하지 마십시오. 가장 일반적이고 사용 가능한 파일 형식은 PNG (차트 또는 로고와 같은 컴퓨터 생성 이미지 또는 투명성이 필요한 경우), JPG (사진) 또는 GIF (애니메이션)입니다.

해결책 : 간단한 해결책은 적절한 웹 해상도로 표시 될 프레임의 크기에 맞게 이미지 크기를 조정하는 것입니다. 그러나 조금 더 있습니다. 사이트에서 최적의 사용과 소셜 공유를 위해 각 이미지를 저장하십시오. 예를 들어 Pinterest 이미지의 너비는 600 픽셀입니다. 이미지를 공유 할 수있게하려면 해당 크기 여야합니다.

실수 : 자르기를 잊다

큰 파일을 사용하면 사이트가 다운 될 수 있지만 화면에 숨겨져있는 전체 프레임 이미지를 사용할 수 있습니다. 자르기는 풀 프레임 이미지에는 없을 수있는 정의 된 초점을 만들어 사용자가보고 싶어하는 영상을 보여줍니다.

이미지 자르기 부족으로 인해 모양과 종횡비가 모두 동일한 동적이 아닌 시각적 스택을 만들 수 있습니다. 이미지에 여러 자르기와 흥미로운 모양을 사용하면 웹 사이트에 시각적 인 호기심을 더할 수 있습니다.

해결책 : 모든 이미지가 원하는대로 렌더링되도록 업로드하기 전에 이미지를 적절한 크기 나 치수로 자릅니다.

실수 : 썸네일 잊어 버리기

축소판 크기 조정 및 크기 조정을 처리하는 방법에는 여러 가지가 있습니다. (이 중 다수는 백엔드 기능에 의존하므로 각각의 장점을 주장하지는 않습니다.) 그러나 사이트에서 가장 작은 이미지를 업데이트하고주의를 기울여야합니다.

디자이너들은 웹 사이트 컨텐츠의 변경으로 썸네일, 이미지 미리보기 및 파비콘을 업데이트해야한다는 사실을 너무 자주 잊습니다.

다른 큰 실수? 섬네일 크기의 이미지를 최대한 크게 사용하면 이미지 크기가 열악합니다. 이미지가 나쁘면 사용하지 마십시오. 이미지가 좋지 않은 이미지보다 낫습니다.

해결 방법 : 이미지가 변경되고 즐겨 찾기 아이콘이 최신 상태 인 경우 오래된 축소판 또는 미리보기를 제거하십시오.

실수 : 검색 할 수없는 이름 및 메타 데이터

디지털 카메라는 웹으로 변환되지 않는 다양한 메타 필드에 많은 정보를 저장합니다. 이미지에서이 정보를 제거하고 사용 가능한 데이터로 교체하십시오. 검색 엔진은 이미지의 내용을 읽을 수 없으므로 검색 가능한 이미지를 만들려면 제목, 태그 및 주변 컨텐츠에 설명 단어를 포함해야합니다.

이미지 이름이 불량한 예 :

picture1.jpg
DSCN00023.jpg
glasses % and % watch.jpg

훨씬 좋은 이미지 이름에는 glasses-and-watch-and-plant.jpg와 같은 몇 가지 설명적인 단어가 포함됩니다. 이미지에 대한 태그 참조에는 "카운터 안경, 시계 및 식물의 항목"과 같은 유사한 설명이 포함되어야합니다. (단어의 철자가 올바른지 확인하십시오.)

솔루션 : 모든 웹 사이트 이미지에 강력한 이름 지정 규칙을 사용하고 이미지를 각 비주얼과 관련된 컨텐츠와 쌍을 이루십시오. 이미지 이름에는 하이픈으로 구분 된 설명 어가 포함되어야합니다.

실수 : 부적절한 스케일링 또는 스트레칭

얼굴이 펴지거나 이미지의 크기가 잘못 조정 된 것보다 더 이상하게 보이지 않습니다. 이미지의 확장 또는 비 비례 스케일링 (테마 또는 백엔드 변경이 발생할 때 특히 일반적 일 수 있음)은 아닙니다. 모든 이미지는 수직 및 수평으로 1 대 1의 비율로 조정해야합니다. 다른 것이 있으면 사진의 무결성이 손상됩니다.

해결 방법 : 모든 확장 비율을 면밀히 관찰하고 사이트를 정기적으로 감사하십시오.

실수 : 여러 장치 크기를 계획하지 않음

반응 형 디자인 프레임 워크에는 이미지에 대한 영향이 있습니다. 장치마다 또는 방향에 따라 모양이나 크기가 변경되면 이미지가 장치에서 렌더링되는 방식을 결정하는 것이 중요합니다.

가장 일반적인 방법 중 하나는 미디어 쿼리를 사용하여 장치별로 이러한 변경을 계획하는 것입니다. CSS를 사용하면 화면 크기를 기준으로 특정 스타일을 이미지에 적용 할 수 있으며 디자인을 "중단하지 않고도 이미지를 잘 표현할 수 있습니다.

솔루션 : 반응 형 프레임 워크에 미디어 쿼리를 사용하고 여러 장치에서 이미지 렌더링을 테스트하십시오.

실수 : 망막 화면 무시

웹 사이트에 필요한 너비는 72ppi에서 600 픽셀의 표준 이미지 만 있으면 충분했습니다. 그러나 화면이 더 이상 그렇지 않은 속도로 개선되고 있습니다.

프레임 워크에 따라 모든 이미지에는 실제로 망막 디스플레이를 포함하여 다른 화면 크기와 해상도로 저장된 여러 이미지가 포함될 수 있습니다. (망막 디스플레이의 해상도는 장치마다 다를 수 있지만 표준 디스플레이보다 훨씬 높습니다.)

솔루션 : Retina 디스플레이 전용 파일 및 미디어 쿼리를 포함하십시오. (CSS-Tricks가 도울 수 있습니다.)

실수 : 남용 또는 일반 예술

재고 사진은 빠른 수정이 될 수 있지만 의도하지 않은 결과를 초래할 수 있습니다. 너무 많은 웹 사이트에서 사용되거나 일반적인 모양과 느낌을 가진 사진은 사용자와의 연결을 설정하는 시각적 요소를 만들지 않습니다. (귀하의 웹 사이트가 다른 웹 사이트처럼 보이기를 원하지 않습니까?)

스톡 사진을 사용하려는 경우 편집하거나 재미있는 방식으로 작업 할 수있는 이미지를 고려하십시오. 다른 곳에서 본 것처럼 보이는 이미지는 피하십시오 (모든 경쟁 업체 또는 유사한 사이트의 이미지를 확인하십시오).

솔루션 : 웹 사이트에 맞는 훌륭한 이미지 파일을 만들려면 사진사를 고용하십시오. 회사 나 브랜드와 관련된 시각 자료를 포함하고 올바른 방식으로 사이트를 반영하십시오.