반응형
당연히 웹 이미지는 최적화해서 서비스해야 합니다.
페이지 로딩 속도도 빨라지고 데이터 전송이 곧 돈이기 때문에 비용도 절감할 수 있기 때문입니다.
이미지 최적화는 page insight에서도 체크하는 항목 중에 하나이기도 하고요.
아래는 page insight에서 이미지 최적화 관련된 내용의 링크입니다.
위 링크 중간에 보면 이미지 최적화를 할 수 있는 툴을 소개하고 있어요.
아무거나 사용해도 별 문제는 없을 것 같은데요 !
웹 이미지로 PNG가 많이 사용되고 있으니 아래 2개 중에서 하나를 선택해도 좋을 것 같습니다.
저는 pngquant(https://pngquant.org/)를 사용해봤습니다.
먼저 pngquant를 다운로드 해서 압축을 풀고 이미지 최적화 하려는 폴더를 적당히 위치 시킵니다.
위에서는 images 폴더입니다.
images 하위 폴더까지 모두 최적화 시키는 명령어는 아래와 같습니다.
find ./images -name '*.png' -exec ./pngquant --ext .png --force 256 {} \;
./images 만 적절히 바꿔주면 되니깐 최적화 시키려는 폴더가 어디에 위치하는지만 알아도 되겠습니다.
최적화를 수행하고 page insight를 돌려보면 녹색 체크를 받을 수 있습니다 !!
최적화 수행 !! 꼭 합시다 :-)
반응형
'자바스크립트,부트' 카테고리의 다른 글
| 자바스크립트 URL 정보 가져오기(찾기, 확인) (0) | 2017.06.15 |
|---|---|
| jQuery를 활용해서 클래스(class) add / remove 하기 (0) | 2017.06.09 |
| html element delete using jQuery (0) | 2017.03.25 |
| 웹 이미지 최적화 수행하기 (0) | 2017.03.03 |
| safari virtual keyboard change : return to search (0) | 2017.02.27 |
| Awesomeplete in IE, Safari (0) | 2017.02.12 |
| iCheck Radio Button Background Color Change (0) | 2017.02.12 |
| gulp argument (0) | 2017.02.12 |
