Html/Css
이미지 최적화
- 애플리케이션에서 사용하는 이미지의 용량이 크거나 많을 경우, 이미지를 불러오는데 오랜 시간이 소요된다.
- 애플리케이션의 이미지가 보이지 않을 경우 사용자 경험을 악화시키고 이탈시키기 때문에 이미지 최적화 작업이 필요하다.
스트라이프 기법
- 이미지 스트라이프는 여러 개의 이미지를 모아 하나의 파일로 제잔한 후
background-postion속성을 이용해 이미지를 배치하는 방법이다. - 각각의 이미지를 개별적으로 보여주는 것이 아닌 하나의 파일에서 이미지를 떼서 사용하는 방법이다.
- 여러 개의 이미지를 사용할 때보다 서버로 적은 요청을 보내게 되고 이는 사이트 로딩 속도와도 직결된다.
- 이미지는
css의background-image를 활용하기 때문에img태그 자체를 사용할 수 없어alt속성을 사용할 수 없다.- 따라서 아이콘, 로고와 같이 크게 중요하지 않은 이미지의 경우에 적합하다.
- 또한 이미지의 수정이 필요한 경우
background에 대한 설정값이 바뀌기 때문에 값을 하나하나 바꿔줘야 하고, 유지 보수 측면에서 까다롭다는 단점이 있다.
Webp
- 일반적인 이미지 파일은
JPG, PNG가 사용된다. - 이미지를 압축한 형식의
Webp를 사용하면 파일 크기가 20~80% 까지 압축된다. - 모든 브라우저에서 호환되진 않지만,
source, picture를 사용하면 이 또한 해결할 수 있다.
이미지 속성 활용하기
alt
- 대체 텍스트는 SEO, 사용자 경험 등의 여러 이점을 갖고 있다.
srcSet
- 다양한 화면 크기에 맞게 이미지를 변경하는 속성을 사용하여, 이미지가 줄어들고 늘어나는 것에 대한 변화가 없기 때문에 성능을 향상 시킬 수 있다.
1
<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src=”...” alt=”...”>
- w 단위는 화면 너비에 대한 단위이다.