>  기사  >  웹 프론트엔드  >  HTML에서 이미지 크기를 제어하기 위해 img 태그를 사용하지 않는 이유는 무엇입니까?

HTML에서 이미지 크기를 제어하기 위해 img 태그를 사용하지 않는 이유는 무엇입니까?

黄舟
黄舟원래의
2017-07-26 13:40:492603검색

한 고객이 웹사이트 배경에 뉴스 사진을 올렸는데, 업로드했는데 웹페이지 표시 범위를 초과했다고 하더군요. 먼저 이미지 처리 소프트웨어를 사용하여 사진을 편집하고, 이미지를 적당한 크기로 처리한 다음, 너비 600픽셀로 처리하고 그에 비례하여 높이를 조정하는 등 업로드하라고 했습니다. 이전 웹사이트에서는 이미지를 처리할 필요가 없었고, 업로드할 때 크기도 동일하므로 이런 일이 발생하지 않을 것이라는 점을 나중에 몇 가지 설명을 통해 이해하게 되었습니다.

div와 css를 사용하여 웹사이트 콘텐츠 페이지의 템플릿을 만들 때 제목에 사용할 크기와 색상, 사용할 글꼴과 색상 등 일부 콘텐츠의 스타일을 수정합니다. 공개 시간 등 콘텐츠 당연히 페이지에는 사진이 있습니다. 이 사진은 해당 웹 사이트 콘텐츠 관리 시스템을 통해 서버에 업로드되며 콘텐츠 페이지의 img 태그를 참조하여 웹 페이지에 표시됩니다. .

  카메라로 촬영한 사진의 픽셀 수는 일반적으로 웹 콘텐츠 영역의 검색 범위를 훨씬 초과하며, 사진 자체의 크기도 때로는 편의상 사진을 직접 업로드한 후 1M 정도입니다. CSS를 사용하여 그림의 너비와 높이를 자동으로 조정하지만 이는 웹 브라우저에 표시되는 그림의 픽셀을 더 작게 만들어 실제로 웹 페이지의 내용과 조화를 이루는 것처럼 보입니다. 한 페이지에 여러 장의 사진이 이미 로드되어 있는 경우 뉴스 사진의 경우 1M 크기의 사진을 계속해서 로드해야 합니다. 이때 웹 페이지의 열기 속도가 확실히 느려지고 일부 사진도 있습니다. 어느 정도 왜곡이 있을 겁니다.

또한, 콘텐츠에 이미지의 크기를 적어두면 일부 첨부파일을 업로드할 때 가끔 첨부파일 앞에 작은 아이콘이 나타나는 경우도 있습니다. 이 작은 아이콘도 img 태그를 사용하여 소개되기 때문입니다. 이 문제를 해결하려면 아이콘 스타일을 별도로 수정해야 하는데, 이는 매우 번거롭고 일반 콘텐츠 업데이트 담당자는 이러한 기술적인 작업을 이해하지 못하는 경우가 많습니다.

홈페이지 수정 시, 서버에 업로드된 사진이 처리되지 않은 경우, 수정 담당자가 책임을 지기 때문에 '이미지 로딩 속도 저하' 문제는 여전히 해결되지 않습니다. 모든 이미지를 하나씩 처리하는 것은 불가능합니다.

 기술적으로 달성할 수 있는 효과는 많지만 모든 솔루션이 합리적인 것은 아닙니다. 따라서 웹 사이트 구축 기술자로서 먼저 이미지를 처리한 후 업로드하는 습관을 길러야 합니다. 즉, 웹 페이지 표시에는 많은 픽셀이 필요합니다. 따라서 업로드하기 전에 최대한 많은 픽셀로 처리하면 디스크 공간이 절약될 뿐만 아니라 시청자가 페이지를 여는 속도도 향상됩니다.

위 내용은 HTML에서 이미지 크기를 제어하기 위해 img 태그를 사용하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.