웹 사이트를 구축 할 때 프런트 엔드 개발자가 내린 결정 중 하나는 이미지를 포함하는 기술입니다.
HTML <img>이거나 CSS 배경을 통한 이미지이거나 SVG <image> 일 수 있습니다.
올바른 기술을 선택하는 것이 중요하며 성능 및 접근성에서 큰 역할을 수행 할 수 있습니다.
https://ishadeed.com/article/image-techniques/
이 기사에서는 이미지의 장점과 단점, 각각의 사용시기와 이유에 대한 언급 외에도 이미지를 포함하는 다양한 방법에 대해 알아 봅니다.
HTML <Img> 요소
가장 간단한 경우의 이미지 요소는 필요에 따라 src 속성을 포함해야 합니다.
<img src="cool.jpg" alt="">너비 및 높이 속성 설정
페이지로드시 페이지 이미지가 로드되는 동안 레이아웃이 일부 변경됩니다. 이를 피하기 위해 너비를 높이 속성으로 설정할 수 있습니다.
<img src="cool.jpg" width="200" height="100" alt="">이것은 약간 오래된 학교로 보일지 모르지만 유용합니다. 개념을 명확하게 이해하기 위해 이것을 시각화 해 봅시다 :
https://ishadeed.com/assets/image-techniques/img-width-height.mp4
아직 로드 되지 않은 경우에도 오른쪽 이미지의 공간이 어떻게 예약되어 있는지 확인 했습니까? 너비와 높이가 설정 되었기 때문입니다. 눈에 띄는 차이를 만듭니다!
https://codepen.io/shadeed/pen/a42ab701809acfecdd4d8f472bb6c043?editors=0100
CSS로 이미지 숨기기
CSS로 이미지를 숨길 수 있습니다. 그러나 여전히 페이지에 로드됩니다. 따라서 주의해서 수행하십시오. 이미지를 숨겨야 한다면 아마도 장식용 일 것입니다.
img {
display: none;
}다시 한 번 말하지만 브라우저가 이미지를 숨겨져 있어도 이미지를 로드 하는 것을 막을 수는 없습니다.
<img>는 대체 된 요소로 간주되므로 로드되는 콘텐츠를 제어 할 수 없기 때문입니다.
접근성 문제
alt 속성을 의미 있는 설명으로 설정하여 HTML 이미지에 액세스 할 수 있어야 합니다.
이것은 스크린 리더 사용자에게 매우 유용 할 수 있습니다.
그러나 대체 설명이 필요하지 않은 경우 제거하지 마십시오. 삭제하면 이미지 src가 읽힙니다. 접근성이 매우 나쁩니다.
뿐만 아니라 어떤 이유로 이미지가 로드되지 않고 대체 이미지가 있는 경우 대체로 표시됩니다. 내가 알고 싶은 흥미로운 것들이 있기 때문에 시각적으로 이야기합시다.
우리는 다음과 같은 이미지를 가지고 있습니다 :
<img class="food-thumb" width="300" height="200" src="cheescake.jpg">
<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">src가 유효하지 않고 로드 되지 않았습니다. 첫 번째는 alt 속성이 없지만 두 번째는 alt 속성이 비어 있습니다. 이것의 시각적 결과를 기대할 수 있습니까?
alt가 없는 이미지는 여전히 공간이 예약되어있어 혼란스럽고 접근성이 좋지 않습니다. 다른 하나는 빈 alt 속성의 내용에 맞게 축소되었지만 테두리로 인해 작은 점으로 표시되었습니다.
그러나 alt 속성 값이 있으면 다음과 같습니다.
좋은 피드백 아닌가요? 또한 이미지 소스가 실패하면 의사 요소를 추가 할 수 있습니다.
반응형 이미지
<img>의 장점은 특정 뷰포트 크기에 맞게 여러 버전의 사진을 갖도록 확장 할 수 있다는 것입니다. 예를 들어 기사 이미지에 사용할 수 있습니다.
반응형 이미지 세트를 갖는 두 가지 방법이 있습니다.
1. srcset 속성
<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">이것은 간단한 것입니다. 나에게 srcset을 사용하는 것이 화면 너비에 따라 여러 이미지 크기를 나타내는 완벽한 솔루션이라는 것을 알지 못합니다. 브라우저에서만 적절한 이미지를 선택할 수 있으며 Google은 이를 제어 할 수 없습니다.
2. HTML 그림 요소
<picture>
<source srcset="large.jpg" media="(min-width: 800px)" />
<source srcset="medium.jpg" media="(min-width: 500px)" />
<img src="small.jpg" />
</picture>다른 옵션은 <picture> 요소를 사용하는 것입니다. 더 쉽고 예측하기 쉬운 것이 좋습니다.
https://codepen.io/shadeed/pen/d703aee137f38c138f2323a0252548ac?editors=1100
이미지 크기 조정
<img>와 함께 사용할 수 있는 가장 좋은 점은 객체 맞춤 및 객체 위치 속성입니다. CSS 배경 이미지처럼 <img> 컨텐츠의 크기와 위치를 조정하는 방법을 제어 할 수 있습니다.
객체 맞춤에 사용할 수 있는 값은 다음과 같습니다. : fill(채우기), contain(포함), cover(덮기), none(없음), scale-down(축소)
다음과 같이 사용할 수 있습니다.
img {
object-fit: cover;
object-position: 50% 50%;
}<img> 요소에 대해 소개 했으므로 이제 두 번째 기술을 살펴볼 차례입니다.
CSS 배경 이미지
CSS 배경을 사용하여 이미지를 표시 할 때는 내용이나 특정 너비 또는 높이를 가진 요소가 필요합니다. 일반적으로 배경 이미지의 주요 용도는 장식용입니다.
CSS 배경 이미지를 사용하는 방법
간단히 말해 요소가 필요합니다.
<div class="element">Some content</div>.element {
background: url('cool.jpg');
}Multiple Backgrounds
CSS 배경 이미지의 장점은 CSS로 쉽게 제어 할 수 있는 여러 배경을 갖는 것입니다. 다음 예제를 고려하십시오.
.element {
background: url('cool-1.jpg'), url('cool-2.jpg');
}이미지 숨기기
이미지를 다운로드하지 않고도 특정 뷰포트에서 이미지를 숨기거나 표시 할 수 있습니다. 이미지가 CSS로 설정되어 있지 않으면 다운로드 되지 않습니다. <img>를 사용하는 것보다 이점이 있습니다.
@media (min-width: 700px) {
.element {
background: url('cool-1.jpg');
}
}위의 예에서는 뷰포트 너비가 700px보다 큰 경우에만 표시되는 배경 이미지가 있습니다.
접근성 문제
잘못 사용하면 배경 이미지가 접근성이 나빠질 수 있습니다. 예를 들어 기사에 필수적인 기사 썸에 사용합니다.
개발자가 아닌 사용자가 다운로드 할 수 없음
재미 있을지 모르지만 보통 사람들은 이미지를 저장하려면 마우스 왼쪽 버튼을 클릭하고 저장을 선택한다는 것을 알고 있습니다. CSS 배경 이미지는 그렇지 않습니다. 요소를 검사 한 다음 DevTools에서 URL 내부의 링크를 열 때까지 CSS로 추가 중인 이미지를 다운로드 할 수 없습니다.
의사 요소
이미지 상단에 오버레이를 표시하기 위해 CSS 배경 이미지와 함께 의사 요소를 사용할 수 있습니다. <img>를 사용하면 오버레이에 별도의 요소를 추가 할 때까지 불가능합니다.
SVG <이미지>
SVG는 이미지로 간주되며 품질에 영향을 미치지 않으면서 스케일링하는 데 가장 큰 힘이 있습니다. 또한 SVG를 사용하여 JPG, PNG 또는 SVG 이미지를 포함 시킬 수 있습니다. 아래 HTML을 참조하십시오.
<svg width="200" height="200">
<image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>
preserveAspectRatio를 보셨습니까? 이것은 이미지를 늘리거나 압축하지 않고 SVG의 전체 너비와 높이를 유지하는 것입니다.
<image> 너비가 더 크면 스트레칭 하지 않고 부모 (SVG) 너비를 채웁니다.
이것은 CSS의 object-fit : cover 또는 background-size : cover와 매우 유사합니다.
접근성 문제
SVG 로의 접근성에 관해서는 <title> 요소를 상기 시킵니다. 예를 들어 아래와 같이 추가 할 수 있습니다.
<svg width="200" height="200">
<title>A photo of blueberry Cheescake</title>
<image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>또한 <desc> 요소를 사용할 수 있습니다.
<svg width="200" height="200">
<title>A photo of blueberry Cheescake</title>
<desc>A meaningful description about the image</desc>
<image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>개발자가 아닌 사용자가 다운로드 할 수 없음
요소를 검사하고 이미지의 URL을 복사 할 때까지 SVG에 포함 된 이미지를 다운로드 할 수 없습니다.
그러나 사용자가 특정 이미지를 다운로드하지 못하게 하려면 이 방법이 좋습니다. 최소한 이미지를 쉽게 다운로드 할 가능성이 줄어 듭니다.
https://codepen.io/shadeed/pen/38225ba6b2cd706ca5bff48c131e83ce?editors=1100
사용 사례
Hero Section
영웅 섹션을 만들 때 제목과 기타 콘텐츠 아래에 이미지가 필요할 때가 있습니다. 아래 그림을 참조하십시오.
이미지가 있습니다. 이걸 어떻게 구축하겠습니까? 다음에 몇 가지 요구 사항을 추가하겠습니다.
솔루션을 시작하기 전에 이 배경의 본질에 대해 스스로에게 물어 봅시다. 다음은 몇 가지 초보자 질문입니다.
Hero - Solution 1
여러 CSS 배경을 사용하면 오버레이 용 이미지와 실제 이미지 용 이미지를 만들 수 있습니다. 아래 CSS를 참조하십시오 :
.hero {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('landscape.jpg');
background-repeat: no-repeat;
background-size: 100%, cover;
}이 솔루션이 작동하는 동안 JavaScript를 사용하여 background-image를 동적으로 변경할 수 있습니다. 아래를 보십시오 :
<section class="hero" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">
<!-- Hero content -->
</section>배경을 인라인 CSS로 추가했습니다. 이것이 작동하는 동안,보기 흉한 것처럼 보이고 실용적이지 않습니다.
CSS 변수를 사용할 수 있을까요? 탐구 해 봅시다.
<section class="hero" style="--bg-url: url('landscape.jpg')">
<!-- Hero content -->
</section>
이제 --bg-url 변수를 쉽게 업데이트 할 수 있으며 배경이 동적으로 변경됩니다. 이것은 인라인보다 백만 배 더 좋습니다.
Solution 1 Takeaways
https://codepen.io/shadeed/pen/17978a2d824fd51a3b27c2c2d099a522
Hero - Solution 2
이 솔루션에는 HTML 이미지를 사용합니다. 아래를 보십시오 :
<section class="hero">
<h2 class="hero__title">Using Images in CSS</h2>
<p class="hero__desc">An article about which and when to use</p>
<img src="landscape.jpg" alt="">
</section>CSS에서는 이미지를 내용 아래에 절대적으로 배치해야 하며 오버레이 역할을 하는 유사 요소가 필요합니다.
.hero {
position: relative;
}
.hero img {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero:after {
content: "";
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}이 솔루션의 장점은 이미지의 src 속성을 쉽게 변경할 수 있다는 것입니다. 또한 이미지가 중요한 경우 더 유용합니다.
또한 HTML <img> 사용에 대해 좋아하는 점은 이미지가 로드 되지 않은 경우 대체를 추가 할 수 있다는 것입니다. 이 폴백은 최소한 내용을 읽을 수 있게 유지할 수 있습니다.
.hero img {
/* Other styles */
background: #2962ff;
}
좋은 점은 소스가 실패한 경우에만 배경이 작동한다는 것입니다. 멋지지 않습니까?
https://codepen.io/shadeed/pen/73a2ca78141fcab39d6db9d5bd982728?editors=1100
Website Logo
로고는 웹 사이트를 다른 웹 사이트와 구별하기 위해 가져야 할 중요한 것입니다. 로고를 포함하기 위해 몇 가지 옵션이 있습니다.
사용할 기술과 올바른 기술을 선택하는 방법에 대해 알아 봅시다.
세부 사항이 많은 로고
로고에 세부 사항이나 모양이 많으면 인라인 SVG로 사용하는 것이 유리하지 않을 수 있습니다. <img>를 사용하는 것이 좋으며 이미지 유형은 png, jpg 또는 svg 일 수 있습니다.
<a href="#"><img src="logo.svg" alt="Nature Food"></a>애니메이션이 필요한 간단한 로고
모양과 텍스트로 구성된 간단한 로고가 있습니다. 마우스를 올리면 모양과 텍스트의 색상이 변경되어야 합니다. 그렇게 하는 방법? 나에게 가장 좋은 해결책은 인라인 SVG를 사용하는 것입니다.
<a href="#">
<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
<rect fill="#D8D8D8" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
<text font-family="Rubik-Medium, Rubik" font-size="25" font-weight="400" fill="#6F6F6F">
<tspan x="63.923" y="36.923">Rect</tspan>
</text>
</g>
</svg>
</a>.logo rect,
.logo text {
transition: 0.3s ease-out;
}
.logo:hover rect,
.logo:hover text {
fill: #4a7def;
}https://codepen.io/shadeed/pen/4005077cc543647148007f4834c0585c?editors=0100
반응형 로고
이것은 Smashing Magazine의 로고를 상기시킵니다. 작은 아이콘에서 전체 로고로 바뀌는 것을 좋아합니다. 아래 모형을 참조하십시오.
이를 위한 완벽한 솔루션은 로고의 두 가지 버전을 추가 할 수 있는 <picture> 요소입니다. 아래를 보십시오 :
<a class="logo" href="/">
<picture>
<source media="(min-width: 1350px)" srcset="sm-logo--full.svg"><img src="sm-logo.svg" alt="Smashing Magazine"></picture>
</a>그리고 CSS에서는 뷰포트의 너비를 1350px 이상으로 변경해야 합니다.
.logo {
display: inline-block;
width: 45px;
}
@media (min-width: 1350px) {
.logo {
width: 180px;
}
}간단하고 간단한 솔루션.
https://codepen.io/shadeed/pen/6cf55d4e87b7c443820bd5f8694587a8?editors=1100
그라디언트가 있는 로고
그라디언트가 있는 로고가 있는 경우 Illustrator 또는 Sketch와 같은 디자인 응용 프로그램에서 로고를 내보내는 과정이 완벽하지 않고 때로는 끊어 질 수 있습니다.
SVG를 사용하면 로고에 그라디언트를 쉽게 추가 할 수 있습니다. <linearGradient>를 추가하고 텍스트에 채우기로 적용했습니다.
<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#4a7def"></stop>
<stop offset="50%" stop-color="#ab4787"></stop>
</linearGradient>
</defs>
<g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
<rect fill="#AB4787" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
<text font-family="Rubik-Medium, Rubik" font-size="30" font-weight="400" fill="url(#gradient)">
<tspan x="63.923" y="36.923">Rect</tspan>
</text>
</g>
</svg>https://codepen.io/shadeed/pen/9bf3bee3d08a40411effb5d65f25b5c1?editors=1100
사용자 아바타
사용자 아바타의 경우 모양이 많지만 가장 일반적인 모양은 사각형 또는 둥근 모양입니다. 이 사용 사례에서는 유용 할 수 있는 중요한 팁을 설명하고자 합니다.
먼저 아래 모형을 보자. 완벽한 아바타가 있으며 100 % 선명합니다.
그러나 사용자가 반 백색 아바타 또는 매우 가벼운 아바타를 업로드 하면 이 디자인이 실패합니다.
위의 모형에서, 초점을 잘 맞추기 전까지는 원이 있는지 확실하지 않습니다. 그게 문제 야 이 문제를 해결하려면 아바타 내부에 테두리를 추가해야 합니다. 이미지가 너무 밝을 경우 대비가 됩니다.
이를 수행 할 수 있는 몇 가지 옵션이 있습니다.
그들 중 어느 것이 최고입니까? 살펴 보자.
HTML <img> 사용
가장 먼저 생각할 수 있는 것은 테두리를 추가하는 것입니다. 살펴 보겠습니다 (죄송합니다. 아래 섹션에서 내 얼굴이 많이 보일 수 있습니다).
.avatar {
border: 2px solid #f2f2f2;
}
우리의 목표는 이미지와 조화를 이루는 내부 테두리를 만드는 것입니다. 탄탄한 테두리를 갖는 것은 실용적이지 않습니다.
<div>와 함께 HTML <img> 사용
이제 문제는 내부 테두리를 추가하면 이미지에서 작동하지 않으므로 삽입 상자 그림자를 사용할 수 없다는 것입니다. 해결책은 아바타를 <div>로 감싸고 내부 테두리 전용 요소를 추가하는 것입니다.
<div class="avatar-wrapper">
<img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
<div class="avatar-border"></div>
</div>.avatar-wrapper {
position: relative;
width: 150px;
height: 150px;
}
.avatar-border {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.1);
}<div>에 10 % 검은 색 테두리가 있으면 테두리가 어두운 이미지와 혼합되어 이미지가 밝은 경우에만 표시됩니다. 아래 모형을 참조하십시오.
https://codepen.io/shadeed/pen/da23d9a18dac14692a97e1bc6e86a5ff?editors=1100
CSS 배경을 가진 <div>
아바타를 표시하기 위해 <div>를 사용한다면 이미지가 장식적인 것입니다. 유스 케이스를 기억했는데, 이는 페이지에 흩어져 있는 임의의 아바타입니다.
우리는 다음과 같은 것을 가질 수 있습니다 :
<div class="avatar" style="--img-url: url(shadeed2.jpg)"></div>.avatar {
background: var(--img-url) center/cover;
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}https://codepen.io/shadeed/pen/39eb9dac364ec15b9ab9bae7fe3a7148?editors=0100
SVG <image>
이것은 나에게 가장 흥미로운 솔루션입니다. Facebook의 새로운 디자인을 살펴보면서 알아 차렸습니다.
<svg role="none" style="height: 36px; width: 36px;">
<mask id="avatar">
<circle cx="18" cy="18" fill="white" r="18"></circle>
</mask>
<g mask="url(#avatar)">
<image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
<circle cx="18" cy="18" r="18"></circle>
</g>
</svg>먼저 해부하자. 여기에는 다음이 포함되어있다.
CSS에는 다음이 있습니다.
circle {
stroke-width: 2;
stroke: rgba(0, 0, 0, 0.1);
fill: none;
}https://codepen.io/shadeed/pen/b17d34b5c23cc90fdc4573779544c8c7?editors=0100
이것이 사용자 아바타 사용 사례입니다.
아이콘이 있는 입력
아이콘이 있는 입력을 보는 것이 일반적입니다. 어떻게 추가합니까? 입력에 초점을 맞추면 어떻게 됩니까? 탐구 해 봅시다.
<p>
<label for="name">Full name</label>
<input type="text" id="name">
</p>나에게 이 경우를 처리하는 가장 좋은 해결책은 CSS 배경 이미지입니다. 쉽고 빠르며 더 많은 요소를 추가하지 않아도 됩니다.
input {
background-color: #fff;
background-image: url('user.svg');
background-size: 20px 20px;
background-position: left 10px center;
background-repeat: no-repeat;
}포커스가 있는 아이콘 색상을 변경하기 위해 URL 인코딩 된 SVG를 사용하여 쉽게 수행 할 수 있습니다. Yoksel의 이 도구는 훌륭합니다.
https://codepen.io/shadeed/pen/81f64125425dba02f7a0b725fa837381?editors=0110
CSS 인쇄
사용자는 웹 페이지를 인쇄해야 할 수도 있습니다. 레시피가 있고 전화 나 컴퓨터를 확인할 필요 없이 부엌에서 볼 수 있도록 인쇄하고 싶다고 가정 해 봅시다.
예시적인 단계가 포함 된 레시피의 경우 인쇄물로 표시하는 것이 중요합니다. 그렇지 않으면 사용자가 웹 페이지를 인쇄해도 아무런 이점이 없습니다.
이미지를 CSS 배경으로 포함하지 마십시오
이미지가 CSS 배경으로 포함되면 이미지가 인쇄되지 않고 빈 공간이 나타납니다. 아래 그림을 참조하십시오.
그런 일이 발생합니다. Firefox 및 IE에서는 작동하지 않지만 브라우저에 이미지를 표시하도록 하여 문제를 해결할 수 있습니다.
.element {
background: url('cheesecake.png') center/cover no-repeat;
-webkit-print-color-adjust: exact; /* Force the browser to render the background in print mode */
}그러나 문제 없이 인쇄되므로 HTML <img>을 사용하는 것이 더 안전합니다.
https://codepen.io/shadeed/pen/97d7b13765718132a4fe71b6bc43e388?editors=0100
등록된 댓글이 없습니다.
