imagesWithMarkup
Last updated
Was this helpful?
Last updated
Was this helpful?
mobile networking의 의미는 file요청은 요청 size만큼 중요하다. 즉, image 요청 줄이는 목표는 image file의 사이즈가 아니다. 이러한 문제를 latency라 부른다. 이것은 요청과 응답의 delay다. 너의 브라우저가 website 로부터 이미지를 retrieve 한다. 이 방식의 모든 스텝에서 디바이스와 website 서버 간 potential delay가 있다.
많은 모던 웹 페이지, bandwidth는 latency만큼 중요하지 않다.
여튼 file size와 file request 수 를 줄여야한다.
image bytes를 줄이는 좋은 방법은 1 compress them 2 reduce number of images
latency는 new bottleneck이다. High performance Browser Networking 에서 반면에 bandwidth는 평평해지고 있다.
image download 양을 줄이기 위해, 다음을 사용할 수 있다. 1 2
는 많은 이미지를 결합한다. 이것은 sprite sheet을 background to the element로써 세팅하여 개별적으로 dp된다. 그리고 나서 CSS로 background position으로 조정된다. 이러한 테크닉은 특히 icon, 반복되는 grphic에서 유용하다.
latency를 피하기 위해 사용하는 기법이 뭐든, HTTP/2의 변화를 알아둬라
In a nutshell, HTTP/2는 다음을 의미한다; 많은 file의 요청은 costly less다(spriting, concatenating 사용을 멈출 준비를하고 other HTTP/1 hacks!)
shadow는 모든 모던 브라우저에서 지원된다. (이미지 hack보다 더 낫다)
rounded corners, gradient, and animation 다 된당
그러나 processing and rendering cost to using CSS shadows, rounded corners, and so on
rendering cost는 모바일에서 중요하다
background images는 많은 responsive effect를 성취하는데 사용된다.
[this image display whole image if viewport more than 500 px wide, or a smaller crop otherwise, add CSS transition, there is not too much of jolt if you resize the window]
smaller koala crop is displayed, downloaded when the window is small. and then if you resize the window larger, the larger crop is downloaded and displayed.
With background images, you can also use the CSS Image Set to choose a background image depending on screen resolution.
이 예제는 high resolution dp에서 2x color image를 dp한다 otherwise a 1x monochrome image를 dp한다
compare between background-size value's cover AND contain
cover : 컨테이너를 완전히 채우는 동안 가능한 사이즈 작게함. contain : 컨테이너 내부에서 완전히 visible 될만큼 가능한 사이즈 커진다
char set to utf-8 inside your meta tag.
meta tag에 utf-8 명시해
icon font characters는 CSS before selector를 이용하여 추가된다.
CSS text shadow를 포함한 formatting을 추가
[class*="zocial-"]:before { display: inline-block; font-family : 'zocial', sans-serif; text-shadow: 3px 3px 3px #aaa; width: 20vw; }
class name 기반 selector (like zocial-flicker etc)
SVG and image element with a data URI source
1 SVG
inline SVG support on mobile and desktop browsers
optimization tools can significantly reduce SVG size.
SVG와 data URI source는 동일하게 보인다. 하지만 1개는 3K고 다른 1개는 2K다.
responsive interactivity for less than 160kb
Data URIs
provide a way to include a file such as image inline as a base64 encoded string using the format
Data URI and SVG 둘다 mobile지원 좋고 CSS에서 인라인될 수 있다.
@import url();
SVG is incredibly powerful.
