[카카오 클라우드 스쿨 개발자과정] 프론트엔드 - 이미지

신하늘·2022년 11월 1일
0

캐싱

페이지에서 이미지를 불러 올 때, 서버에서 다운로드 받아와서 출력한다.

이 때, 캐싱을 사용하는데 캐싱은 다음에 출력할 때 빠르게 출력하기 위해 로컬 컴퓨터에 저장하여 사용하는 것을 의미한다.

이미지 출력

HTML은 출력을 할 때 서버의 자원이 필요한 경우는 영역만 확보하고 전부 출력한 후 나중에 다운로드 받아서 영역에 채워넣는다.

이 때, width와 height를 설정하지 않으면 강제로 채워넣으므로 image 태그 뒤의 요소들이 죄다 밀려버린다. 따라서 사전에 width와 height를 설정해야 한다.

반응형 웹은 화면의 크기를 확인한 후 크기를 동적으로 설정하기 때문에 width와 height를 설정하지 않는데, 이 때문에 이미지가 많을 경우 처리속도가 떨어진다.

로컬 컴퓨터에서 찾아올 떄는 내용이 아니라 경로로 존재 여부를 파악한다. 따라서 동일한 이미지를 여러 곳에서 출력하는 경우에는 이미지 경로를 동일하게 작성하는 것이 좋다.

profile
한창 구르고있는 신입 개발자

0개의 댓글