Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add image container for compatibility #222

Merged
merged 2 commits into from
Mar 13, 2023

Conversation

joohaem
Copy link
Member

@joohaem joohaem commented Mar 11, 2023

  • 브랜치명, 브랜치 알맞게 설정
  • Reviewer, Assignees, Label, Milestone, Issue(PR 작성 후에) 붙이기
  • PR이 승인된 경우 해당 브랜치는 삭제하기

📌 내용

  • 브라우저 마다 webp 파일의 호환성에 대비하기 위해 picture, source 태그로 png 파일을 예비로 정의해놓습니다.

@joohaem joohaem added this to the 🦄 스프린트2 🦄 milestone Mar 11, 2023
@joohaem joohaem requested a review from NYeonK March 11, 2023 13:34
@joohaem joohaem self-assigned this Mar 11, 2023
@joohaem joohaem linked an issue Mar 11, 2023 that may be closed by this pull request
12 tasks
Copy link
Contributor

@NYeonK NYeonK left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

짱짱맨✨🌟🤗👍

Comment on lines +28 to +31
<picture key={index}>
<source srcSet={img.src} type="image/webp" />
<St.ImageWrapper src={img.subSrc} alt={img.alt} loading="lazy" />
</picture>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wepb 안될 때, png가 뜨는 거구낭~!~!!
<picture>이랑 <source> 처음 알아갑니다!!👀👀

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

webp 파일이 여러개 있는데, banner에만 적용하는 이유가 있을까요?-?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

우선적으로 webp의 호환성 문제가 크지 않기 때문에(우리가 타겟으로 하는 대부분의 디바이스에서 지원을 하기 떄문에) 하나하나 세밀하게 대응할 필요는 없다고 느꼈어요,

더불어서 다른 배너들은 background-image로 되어있어서, 더 찾아보니 image-set 이라는 것이 있네요 !! 이거 반영하도록 하겠습니다✨✨

@joohaem joohaem force-pushed the feat/#219-image_container branch from 8e5ab95 to c822142 Compare March 13, 2023 01:39
@joohaem joohaem merged commit fa3cb20 into release/1.3 Mar 13, 2023
@joohaem joohaem deleted the feat/#219-image_container branch March 13, 2023 01:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[ Common ] 이미지 최적화 작업 추가 진행
2 participants