HTML] 웹 이미지(사진, 그림) 크기 변경/조정, 사진 사이즈 축소 태그 속성; Image Size

그림/사진의 크기 조정은, 포토샵에서 그림 자체의 크기를 변경하는 것이 가장 좋지만, 여기서는 HTML 태그 속성을 사용하여, 임시로 이미지 사이즈를 조정하는 방법을 설명합니다.

웹페이지에서, 그림/사진 등 이미지의, 가로 세로 길이를 변경하려면



이렇게 width / height 속성을 사용하면 됩니다.

이미지 사이즈 변경 예제

원본 크기 이미지
위의 원본 사과 사진은

가로 길이 (width) : 350 픽셀

세로 길이 (height) : 500 픽셀

입니다.






width="175" height="250" 을 지정하여 절반으로 축소시킨 결과
원본의 절반 값인 175 와 250 을 지정하자, 사진 크기가 4분의1로 축소되었습니다.







width="400" height="100" 값을 지정하여, 그림 늘이기
가로 세로 비율을 다르게 지정하면 위와 같이 그림이 왜곡됩니다. 의도적인 경우가 아닌 이상, 이런 식으로 지정하면 안됩니다.


width height 속성을 잘못 지정하면, 그림이 삐뚤어지기에 주의가 필요합니다.

그리고 어떤 경우든, width height 속성으로 이미지 사이즈를 조정하면 화질이 나빠지게 됩니다.

---

width height 속성은, 이미지 사이즈 조정 용도 외에도, 이미지의 정확한 크기를 브라우저에게 "미리 알려주는" 역할을 합니다.

브라우저는 이미지 파일을 완전히 읽었을 경우에만, 이미지 크기를 알 수 있습니다. 그렇지만 width height 속성을 사용하여 원본의 정확한 가로 세로 길이를 미리 알려주면, 이미지를 읽기 전에도 브라우저가 이미지 크기를 알 수 있어, 웹페이지를 바르게 출력하는 데에 도움이 됩니다. 다만 이때, 정확한 값을 지정하지 않으면 그림이 왜곡되고 화질이 나빠지기에 주의가 필요합니다.

---

업데이트:

다음과 같이

가로 길이만 지정하면, 세로 길이는 일정한 비율로 자동으로 조절됩니다.



포토샵으로 사진 사이즈를 축소하는 방법입니다: ▶▶ 포토샵] 사진 사이즈 축소 크기 조절; 이미지 사이즈 조정 변경; Image Size Photoshop


☞ HTML | CSS | 자바스크립트 JavaScript