온라인 이미지 최적화 사이트 소개

온라인 이미지 최적화하기

온라인 이미지 최적화 사이트 소개

 

구글 서치 콘솔을 들어가 보면 복잡하고 이해하기 어려운 게 많다. 보다 보면 또 감으로 알게 되는 것들도 있는데 여전히 어려운 것은 바로 요부분.

반응형

구글 서치 콘솔의 개선사항 핵심적인 웹 지표를 보면 모바일과 데스크톱에 느린 URL이 26개나 된다 ㅠㅠ

 

 

CLS문제: 0.25초과란다.

 

 

그래서 PAGESPEED INSIGHTS를 눌러보니

 

 

빨간색 9란 숫자가 그다지 좋아 보이지 않는다. 자세히 모르겠지만 들어가 확인해보니

 

 

메트릭 점수와 성능 점수는 다음 범위에 따라 색상이 지정됩니다.

• 0 ~ 49 (빨간색) : 나쁨 (나의 경우임 ㅠㅠ)
• 50-89 (주황색) : 개선 필요
• 90 ~ 100 (녹색) : 좋음

좋은 사용자 경험을 제공하기 위해 사이트는 좋은 점수 (90-100)를 갖도록 노력해야 합니다. 100 점의 "완벽한"점수는 달성하기가 매우 어렵고 예상되지 않습니다. 예를 들어 99 점에서 100 점을 받으려면 90 점에서 94 점까지 걸리는 것과 동일한 수준의 메트릭 개선이 필요합니다.  - 구글 서치 콘솔 참고

좋은 환경을 제공하기 위해 개선해야 하는 내용이 많지만 티린이는 잘 모르겠다 ㅠㅠ 공부해야 할게 너무나 많은 티스토리.

검색하다 알게 된 티친님이신 kibua20님의 글. 구글 서치 콘솔 CLS로 고민하시는 분들 참고하시면 도움될 거라 생각해 링크해본다.(kibua20님 링크 괜찮나요? 혹시 실례가 된다면 말씀해주세요. 지우겠습니다~)

티스토리 블로그에서 구글 서치 콘솔 CLS(0.25 초과)문제 해결법

kibua20님이 말씀해주신 대로 했는데도 해결되지 않았던 내 스토리😂 내 스토리는 또 다른 문제가 있나 보다. 혹시 내 이미지들이 너무 커서 로딩하는데 오래 걸리나? 그런 생각이 들었다.

고해상도의 이미지 파일은 용량이 크고 해당 이미지가 포함된 웹 페이지의 로딩 속도는 당연히 속도가 느려지기 마련이다. 따라서 로딩 속도의 압박으로 인한 사용자의 이탈을 막기 위해 이미지를 최적화할 수 있게 하는 방법을 찾아본다.

내가 선택한 방법은 이미지를 최적화시켜주는 사이트를 이용하여 용량이 큰 이미지는 크기를 줄이는 것이다. 혹시 용량이 커서 고민이셨던 분들이 있으실 것 같아 정보를 공유해본다.

 

 

 온라인 이미지 최적화 사이트 소개

1. imagecompressor

온라인 이미지 최적화기

가장 좋은 최적화와 손실 압축 알고리즘을 결합해 JPEG와 PNG 이미지 파일들을 퀄리티는 유지하면서 가능한 최소 사이즈로 줄인다. 대부분의 경우에 Optimixilla는 가장 뛰어난 이미지 압축 비율을 달성하며 다른 모든 프로그램보다 뛰어난 성능을 보인다. 최대 20개의 이미지를 업로드해서 이미지 크기를 줄일 수 있다.

 2. tiny png

TinyPNG – Compress PNG images while preserving transparency

스마트 손실 압축 기술을 사용하는 png 파일의 파일 크기를 줄인다. 이미지 색상 수를 선택적으로 줄이면 데이터 저장에 필요한 바이트 수가 줄어든다. 효과는 거의 보이지 않지만 파일 크기에 큰 차이가 있다. 최대 20개 파일을 드래그 앤 드롭하여 앱 및 사이트의 이미지를 축소할 수 있다. 이미지 크기는 각각 최대 5MB( 그 이상은 돈 내고 사용하는 것 같음)

 직접 두 개의 사이트 이용해 보기

 

두 개의 사이트를 편하게 이용 중이긴 한데 tiny png은 크기가 5MB가 넘으면 유료 사용으로 넘어가야 되니 imagecompressor를 더 자주 사용하고 있다.

예를 들어 이 글의 썸네일 파일을 Canva를 이용하여 만들었는데 만든 이미지 크기가 5MB 초과이다.

tiny png을 이용하려고 했더니 다음과 같이 파일이 너무 크다는 메시지와 함께 프로로라는 걸 이용하라고 나온다. 이건 유료라서 난 패스~난 무료만 쓸래용 ㅋㅋ

 

 

이제  imagecompressor 사이트에 들어가 이미지 크기를 줄여본다. 처음 파일 크기는 5.18MB 임을 기억!!

 

 

파일 업로드를 누르고 이미지를 선택하면 아래처럼 -68%. 68%감소했다는 메시지가 뜨며 다운로드를 통해 파일을 내려받으면 된다.

파일 이름이 내가 올린 파일명_min으로 바뀌어서 다운로드하여진다.

 

 

변환시켜 내려받은 썸네일 파일 크기는 1.64MB로 확실히 줄어듬을 알 수 있다. (5.18MB →1.64MB)

 

 

기존 글들 이미지 전환을 다 하기엔 너무 힘들 것 같아서 앞으로 올리는 포스팅 중 크기가 큰 이미지는 이렇게 온라인 최적화 작업을 하고 올리려고 한다. 오류 메시지들은 더 이상 내 눈에 안 띄길 바라는데 갈길이 참 먼 티스토리^^