블로그 스피드 최적화 왜 할까요? 웹페이지의 전체용량을 가장 많이 차지하는 부분이 이미지이고 이 용량을 94%이상 줄일 수 있다면, 말 그대로 웹페이지의 용량도 거의 90% 가까이 줄어든다란 이야기입니다. 그만큼 이미지는 알기 쉽게 설명을 해주기도 하지만, 내 페이지가 열리기도 전에 방문자를 나가게도 하는 그런 양날의 검이 될 수 있습니다.
제가 찍은 이 사진은 전주 서신동에서 먹은 아주 맛깔나는 아귀찜입니다. 원본사진은 2.33M용량이 아깝지 않은 사진으로 그 크기는 2992*2992 사이즈 입니다. 제가 이 사진을 사용해서 포스팅을 하기에는 이미지 사이즈가 너무 큽니다. 티스토리에서 보이는 화면은 1000픽셀 정도이며 사이드 메뉴등이 존재한다면 약 800픽셀 이하로 떨어질 가능성도 있습니다.(스킨에 따라 다를 수 있기 때문에 기준 픽셀은 1000으로 하는 게 좋습니다.)
모바일 기준으로 하지 않는 이유는320-340픽셀 기준의 모바일 기반으로 이미지를 첨부하면 PC화면에서 저화질로 보이기 때문에 웹페이지 품질에 좋지 않습니다.(사용자 편의성 저하)
사진을 1000*1000으로 사이즈 변경만 하면 어떻게 될까요? 433KB로 극적인 용량 절약을 하실 수 있습니다. 약 82%의 용량을 절약할 수 있습니다. 구글이 원하는 웹페이지 스피드도 그만큼 빨라지는 것 입니다. 하지만~ 웹페이지 용량은 2-3MB를 넘지 않는 게 좋기 때문에, 이 정도 용량으로는 맛깔라는 음식 리뷰를 마음껏 할 수 없습니다.
여기에서 우리는 구글에서 2010년 출시한 그래픽 파일 포멧인 WEBP를 사용하고자 합니다. WEB에서 사용을 목적으로 만들어진 이 효율적 이미지 포맷은 웹피라고 읽으면 됩니다. 이 웹피는 손실과 무손실 압축을 모두 지원하고 JPEG 포맷 대비 20-30% 적은 파일로 효과를 볼 수 있습니다. 그래서 웹피로 변환하고 나니 136KB로 무려 94% 용량이 줄어든 결과로 구글이 원하는 가장 빠른 스피드를 보게 되었습니다.
웹피로 변환한 사진의 경우 136KB이지만, 제가 웹이미지 등을 캡쳐해서 사용하는 경우가 많은데 그런 경우는 30KB 정도까지도 변환이 가능합니다. 요약해서 이미지를 어떻게 사용하는지 알려 드리겠습니다.
이미지 사용 방법
- 원본 이미지를 그냥 사용하지 않는다.(원본 사진이 꼭 필요한 경우는 링크를 따로 두고 링크페이지를 통해서 볼 수 있도록 합니다.)
- 사이즈를 1000*1000픽셀로 조절한다.(이 부분은 나중에 온라인 마켓에서 상품을 팔 때도 좋습니다.) 80% 효율
- JPG에서 WEBP로 변환 한다. 96% 효율
변환 사용 시 주의할 점
- WEBP는 표준이 아니기 때문에 상황에 따라 보이지 않을 가능성이 있습니다. 포멧이 호환성이 존재할 수 있다는 이야기로 네이버의 경우 블로그에 올릴 수는 있으나 JPG 등으로 처리되며, 네이버카페 등에 업로드할 수 없습니다.
공짜로 이용할 수 있나요?(모바일,PC공통)
온라인 이미지 편집 사이트 리사이즈 픽셀에서 사이즈를 조절하세요. 설치도 없고 무료입니다.
ResizePixel - 온라인 이미지 편집기
온라인 무료 이미지 자르기, 크기 조절, 좌우반전, 회전, 변환, 압축 편집기
www.resizepixel.com
온라인 WEBP 변환 사이트 ANYCONV에서 WEBP로 변환하세요. 역시 설치도 없고 무료입니다.
온라인에서 JPG를 WEBP로 변환하십시오 - AnyConv
AnyConv는 5 성급 JPG WEBP 변환기입니다 ⭐ 온라인에서 jpg를 webp로 몇 초 안에 변환하십시오 👍 소프트웨어 설치가 필요하지 않습니다 👍 무료로 👍 완전히 안전합니다. JPG를 WEBP로 쉽게 변경할 수
anyconv.com
이렇게 2개의 사이트 이용만으로도 우리는 품질 좋은 블로그 포스팅을 할 수 있습니다. 각 사이트 사용 시 이용하실 때마다 광고 클릭하고 스크롤이나 약 15초 이상 봐주시면 해당 사이트에 도움이 될 것입니다. 오늘도 블로그 스피드 최적화-이미지 용량 94% 절약하기를 해본 수습하는 아재였습니다. 저도 귀찮으면 잘 지키지 않지만 잘 지켜야 광고수익이 올라간다고 생각하고 꼭 지켜서 포스팅하시길 바랍니다. 감사합니다.
