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

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

Jul 26, 2017 pm 01:40 PM
html 제어

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

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

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

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

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

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

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

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

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

H5 페이지 생산에는 지속적인 유지 보수가 필요합니까? H5 페이지 생산에는 지속적인 유지 보수가 필요합니까? Apr 05, 2025 pm 11:27 PM

코드 취약점, 브라우저 호환성, 성능 최적화, 보안 업데이트 및 사용자 경험 개선과 같은 요소로 인해 H5 페이지를 지속적으로 유지해야합니다. 효과적인 유지 관리 방법에는 완전한 테스트 시스템 설정, 버전 제어 도구 사용, 페이지 성능을 정기적으로 모니터링하고 사용자 피드백 수집 및 유지 관리 계획을 수립하는 것이 포함됩니다.

JS가 H5없이 실행할 수 있습니까? JS가 H5없이 실행할 수 있습니까? Apr 06, 2025 am 09:06 AM

JavaScript가 HTML5없이 실행할 수 있습니까? JavaScript 엔진 자체는 독립적으로 실행할 수 있습니다. 브라우저 환경에서 JavaScript를 실행하는 것은 코드를로드하고 실행하는 데 필요한 표준화 된 환경을 제공하기 때문에 HTML5에 따라 다릅니다. HTML5가 제공하는 API 및 기능은 최신 JavaScript 프레임 워크 및 라이브러리에 중요합니다. HTML5 환경이 없으면 많은 JavaScript 기능을 구현하기 어렵거나 구현할 수 없습니다.

H5 페이지 제작의 장점은 무엇입니까? H5 페이지 제작의 장점은 무엇입니까? Apr 05, 2025 pm 11:48 PM

H5 페이지 제작의 장점에는 경량 경험, 빠른 로딩 속도 및 사용자 유지 개선이 포함됩니다. 교차 플랫폼 호환성, 다른 플랫폼에 적응할 필요가 없어 개발 효율성을 향상시킵니다. 유연성 및 동적 업데이트, 감사가 필요하지 않아 콘텐츠를 쉽게 수정하고 업데이트 할 수 있습니다. 기본 앱보다 비용 효율적이고 개발 비용이 낮습니다.

플렉스 레이아웃의 자주색 슬래시 영역이 잘못된 '오버플로 공간'으로 간주되는 이유는 무엇입니까? 플렉스 레이아웃의 자주색 슬래시 영역이 잘못된 '오버플로 공간'으로 간주되는 이유는 무엇입니까? Apr 05, 2025 pm 05:51 PM

플렉스 레이아웃의 보라색 슬래시 영역에 대한 질문 플렉스 레이아웃을 사용할 때 개발자 도구 (d ...)와 같은 혼란스러운 현상이 발생할 수 있습니다.

Edge 브라우저의 특정 DIV 요소가 표시되지 않는 이유는 무엇입니까? 이 문제를 해결하는 방법? Edge 브라우저의 특정 DIV 요소가 표시되지 않는 이유는 무엇입니까? 이 문제를 해결하는 방법? Apr 05, 2025 pm 08:21 PM

사용자 에이전트 스타일 시트로 인한 디스플레이 문제를 해결하는 방법은 무엇입니까? 에지 브라우저를 사용하는 경우 프로젝트의 DIV 요소를 표시 할 수 없습니다. 확인 후 게시했습니다 ...

MySQL에 루트로 로그인 할 수 없습니다 MySQL에 루트로 로그인 할 수 없습니다 Apr 08, 2025 pm 04:54 PM

Root로 MySQL에 로그인 할 수없는 주된 이유는 권한 문제, 구성 파일 오류, 암호 일관성이 없음, 소켓 파일 문제 또는 방화벽 차단입니다. 솔루션에는 다음이 포함됩니다. 구성 파일의 BAND-ADDRESS 매개 변수가 올바르게 구성되어 있는지 확인하십시오. 루트 사용자 권한이 수정 또는 삭제되어 재설정되었는지 확인하십시오. 케이스 및 특수 문자를 포함하여 비밀번호가 정확한지 확인하십시오. 소켓 파일 권한 설정 및 경로를 확인하십시오. 방화벽이 MySQL 서버에 연결되는지 확인하십시오.

Safari의 로컬 웹 페이지에서 맞춤형 스타일 시트가 적용되지만 Baidu 페이지에서는 그렇지 않은 이유는 무엇입니까? Safari의 로컬 웹 페이지에서 맞춤형 스타일 시트가 적용되지만 Baidu 페이지에서는 그렇지 않은 이유는 무엇입니까? Apr 05, 2025 pm 05:15 PM

Safari에서 사용자 정의 스타일 시트 사용에 대한 토론 오늘 우리는 Safari 브라우저에 대한 사용자 정의 스타일 시트 적용에 대한 질문에 대해 논의 할 것입니다. 프론트 엔드 초보자 ...

어떤 경우에는 부정적인 마진이 적용되지 않는 이유는 무엇입니까? 어떤 경우에는 부정적인 마진이 적용되지 않는 이유는 무엇입니까? Apr 05, 2025 pm 04:09 PM

어떤 경우에는 부정적인 마진이 적용되지 않는 이유는 무엇입니까? CSS를 사용하여 레이아웃 웹 페이지를 사용하는 경우 종종 부정적인 여백이 발생합니다 (음수 ...

See all articles