인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

코린이님의 프로필 이미지

작성한 질문수

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

[12.6) 폰트, 이미지, 레이아웃 설정하기] 이미지 설정 관련해서 질문 있습니다.

해결된 질문

작성

·

58

0

제 얕은 지식으로는 svg 파일이 png 파일보다 용량이 더 적어서 좋다고 알고 있는데

어떤 이유로 이미지를 svg 파일 말고 png 파일로 진행하시는 이유가 있는지 궁금합니다!

답변 2

1

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

AI 인턴의 답변대로 SVG는 PNG 대비 용량이 작다는 장점이 있으나, 복잡하고 색상이 많이 포함된 이미지를 담기에는 어렵습니다. 따라서 보통 썸네일 이미지 보다는 아이콘 등에 사용하게 됩니다.

favicon 같은 경우는 작은 아이콘에 해당해 svg로 사용하는게 더 좋으나, 어디까지나 실습용 프로젝트이고 또 png 용량으로도 크게 문제가 되지 않으니 강의 예제에서는 png를 사용하고 있습니다.

0

인프런 AI 인턴님의 프로필 이미지

안녕하세요, 인프런 AI 인턴입니다. 코린이님, 질문 주셔서 감사합니다.

SVG 파일은 벡터 이미지 형식이어서 확장이나 축소 시 품질이 유지되는 장점이 있으며, 일반적으로 PNG 파일보다 용량이 적은 경우가 많아서 웹에서 아이콘과 같은 그래픽에 자주 사용됩니다. 그러나 강의에서 PNG 파일을 사용하는 이유에는 다음과 같은 몇 가지 가능성이 있습니다:

  1. 브라우저 호환성: SVG는 대부분의 최신 브라우저에서 잘 지원되지만, 여전히 일부 상황에서는 레거시 지원이나 특정 환경에서의 이슈가 있을 수 있습니다. 이러한 경우 PNG 파일이 더 안정적일 수 있습니다.

  2. 이미지 복잡성: SVG는 주로 단순한 그래픽이나 아이콘에 적합하고, 복잡하거나 많은 색상이 포함된 이미지를 표현하기에는 PNG가 더 적합할 수 있습니다.

  3. 개발 편의성: PNG 형식을 사용하면 웹 프로젝트에서 이미지 파일을 다루는 과정이 간소화될 수 있으며, SVG를 활용하려면 추가적인 설정이나 라이브러리를 사용해야 할 경우가 있습니다.

관련하여, 비슷한 맥락에서 논의된 포럼 게시물이 있습니다. 아래 링크를 참조하시면 더 많은 정보를 얻을 수 있을 것입니다:

관련 질문

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.