IS(Image-Sprite)

여러가지의 이미지를 하나의 이미지 파일안에 배치하여 이미지로드 부담을 줄이는 방법

• 서버측에서 트래픽이 확 ↓
  ex) 이미지 100번통신 vs 이미지 1번통신
• 서버부하도 ↓
• 퍼블리셔는 저런 이미지 제작을해놓고
  좌표잡아주면됨(background-position)
  

image sprite generator :
https://spritegen.website-performance.org/

https://www.toptal.com/developers/css/sprite-generator

IR(Image Replacement) - 텍스트 이미지처리

디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 html 곳곳에 숨겨두는 방법
특정 요소를 스크린 리더 친화적 환경을 위해서라면 html 문서에는 남겨둬야하지만, 동시에 디자인적으로는 숨겨야 하는 때가 있다.

헤딩(h1, h2, ...) 태그
input의 label과 같이 정보를 전달하는 텍스트 등....

• 대체 텍스트 처리방법!
• 리더기가읽을땐 텍스를읽는거지만
• 비장애인들은 이미지를 볼수있음
• 배경처리로
• 규모가 작은프로젝트

아래 속성들은 스크린리더가 읽을 수 없기 때문에 지양

color: transparent;
opacity: 0;
visiblity: hidden;
display: none;

카카오

PC용 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때

.ir_pm{
	display:block;
	overflow:hidden;
	Font-size:1px;
	line-height:0;
	text-indent:-9999px;

Mobile용 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공 시

.ir_pm{
	display:block;
	overflow:hidden;
	font-size:1px;
	line-height:0;
	color:transparent; 
  /* transparent 키워드는 IE9부터 사용 가능하기 때문에 PC에서는 빠져있습니다.
 https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#transparent */}

스크린리더가 읽을 필요는 없지만 마크업 구조상 필요한 경우

.screen_out {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

중요한 이미지 대체텍스트로 이미지 off 시 에도 대체 텍스트를 보여주고자 할때

.ir_wa{
	display:block;
	overflow:hidden;
	position:relative;
	z-index:-1;
	width:100%;
	height:100%}

네이버

.blind {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}

clip 속성은 언제 사라질지 모르기 때문에 네이버식 IR 사용하려면 clip-path: inset(50%)을 사용하는 것이 좋을듯 (clip:rect(0 0 0 0) 쓰고 다음줄에 clip-path: inset(50%) 쓰면 안-전