search

yamoo9 / likelion-FEQA

질문/답변 — 프론트엔드 스쿨, 멋사
29 stars 9 forks source link

[LAB-7] Light house 권장 사항 중 '이미지를 올바르지 않은 가로세로 비율로 표시' 문제 #279

Closed third-park closed 1 year ago

third-park commented 1 year ago

질문 작성자

박세명

문제 상황

라이트하우스

Light house 권장 사항 중 '이미지를 올바르지 않은 가로세로 비율로 표시' 문제가 떠서 해결해보려는 중에
1, 굳이 신경쓰지 않아도 되는 문제인지
2. 해결 가능하다면 어떤 방법이 있을지
궁금해져서 이슈를 올립니다. ㅠ


처음에는 렌더링하는 이미지의 비율을 정해주면 되는거 아닌가라는 생각에 태그 자체에, CSS에 비율을 넣어줬습니다.

<img
  src={user.profile}
  className={styles.profileImege}
  width={48}
  height={48}
  alt="프로필 사진"
/>

img태그 자체와 CSS에 비율을 지정해줬지만 같은 오류가 떠있었습니다.

그리고 검색을 하다가 aspect-ratio 속성을 발견해서 이를 사용해서 비율을 맞춰보기로 했습니다.

.profileImege {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin-top: 2px;
  margin-right: 17px;
}

하지만 문제는 여전히 떠있었습니다.

그래서 다시 Light house 보고서의 자세히 보기를 읽어보니 이런 문구가 있었습니다. 스크린샷 2023-04-04 171235
이것을 볼때 결국 원본 이미지의 비율을 지키지 않는 이상 해당 문제가 계속 뜬다는 말 같은데
다양한 사람이 업로드 하는 이미지들은 제각각 비율이 다를 것이고 이를 같은 비율의 이미지로 받지 않는 이상은
일괄적으로 같은 크기로 렌더링 되어야 하는 프로필 이미지에선 해결할 수 없는 문제가 아닌지 궁금해서 질문을 남기게 되었습니다...

프로젝트 저장소 URL

환경 정보

yamoo9 commented 1 year ago

질문

Light house 권장 사항 중 '이미지를 올바르지 않은 가로세로 비율로 표시' 문제 해결 방법이 궁금합니다.

문제 분석

이 경고는 최적화(performance) 이슈로 화면에 표시되는 이미지 크기와 서버에서 응답 받은 이미지 크기가 다르기 때문에 애플리케이션의 성능 저하가 발생할 수 있음을 알려주는 것입니다. 표시되는 영역 대비 이미지가 크기 때문에 사용자 데이터를 낭비하고 페이지 성능을 저하 시킵니다.

문제 해결

문제 해결을 위해서는 사용자가 이미지 크기가 큰 파일을 업로드 하더라도 서버에 저장할 이미지 크기를 적정하게 조정해야 합니다.

[FRONT-END] 이미지(1000×1000) 업로드 → [BACK-END] 적정 크기(100×100)로 저장

하지만 프로젝트에서 서버 개발 없이 Firebase와 같은 클라우드 서비스를 사용 하므로 직접 이미지 크기를 조정해 저장할 수 없습니다. 그러므로 다음의 2가지 방법으로 문제를 해결해야 합니다.

  1. Firebase Resize Images 확장을 사용해 Storage에 리사이징 된 이미지를 저장한다. (참고)
  2. 프론트엔드 환경에서 pica와 같은 리사이즈 이미지 라이브러리를 사용해 Cloud Storage에 업로드 한다. (참고)

레퍼런스