CSS_이미지 최적화

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2) 강의노트

이미지최적화

작업 후 서버에 올릴 때는 이미지 최적화 작업이 필요함
PC에서는 잘 못느끼지만 모바일에서 오래 걸림
=> PNG/JPG 이미지

1.작업용도로 사용하기 좋은 무료 이미지 website

pixabay.com/ko
www.freepik.com

-픽사베이에서 3-4개 이미지 다운받음(최적화 테스트용)

2.optimize png 구글링
추천 싸이트
tinypng.com

drag & drop 으로 20개까지 한꺼번에 가능
=> 다운로드 하기

결과

JPG부터 PNG가 사이즈 % dramatic 함 (50~70%)

JPG는 선명도 부분에 약간의 차이

PNG 화질 차이 거의 없음