웹사이트 로딩 시간 단축하는 꿀팁 4가지 ( 이미지 파일크기 줄이기,사진 파일압축 )

013

사이트가 느린 것은 플랫폼의 문제가 아니라

우리의 이미지 편집 문제입니다.

안녕하세요. 테라픽셀 스튜디오 임대표입니다.

많은 분들이 셀프 제작한 사이트 속도가 너무 느린 경우,

가장 먼저 하는 공통질문이 있습니다.

윅스는 원래 이렇게 느린 건가요?

워드프레스는 원래 좀 느리잖아요?

크리에이터 링크는 왜 느린 거죠?

아니요! 사이트가 느린 것은 플랫폼의 문제가 아니라 우리의 손 탓입니다.

​테라픽셀 스튜디오의 3가지 약속 (Feat 자청 책사꾼 랜딩페이지)

우리는 클래스 101이 아니다.

아래 영상을 보시면, 클래스 101의 로딩속도가 대략 25초 정도입니다.

이 영상을 끝까지 보는 분들은 몇분 없을겁니다.

전세계적으로 가장 신뢰성 있는 사이트 속도 측정 사이트 GTmetrix 에서의 클래스101 속도 측정 결과입니다.

결과는 누가 봐도.. 빠르다고 할 수 없죠?^^

GT metrix에서 클래스 101 검색시

단순히 로딩 속도를 보여주는 영상임에도 다 안보는데

과연 유명하지도 않은 우리 웹사이트 로딩 속도가 이렇게 느리면 어떻게 될까요?

네. 방문객이 바로 이탈합니다.

브랜딩에 성공한 사이트는 목적이 분명한 방문객들의 충성심으로 이탈율이 확실히 낮지만,

우리는.. 클래스 101이 아닙니다.

그렇기에 단 1초라도 로딩속도를 최소화 하는 것이 관건입니다.

아무리 구겨 넣어도 맞지않아…

쉽게 말해, 큰 곰을 작은 가방에 억지로 넣는 것과 같습니다.

해결책은 간단합니다.

가방에 맞는 곰인형을 넣으면 됩니다.

하지만 주의할 점이 있습니다.

퀄리티는 그대로 유지하되, 사진 파일 압축은 필수

로딩 속도가 오래 걸리는 이유는 간단합니다.

바로 맞지도 않은 대형 사이즈 이미지들을 억지로 넣었기 때문에

큰 사진들을 불러올 때마다 큰 로드가 걸리는 것이죠.

기존 이미지 파일을 홈페이지용으로 편집하는 가장 최선의 방법은

이미지 사이즈를 모니터 크기에 최적화 >> 사진 파일 압축 (TINYPING 사이트)

그런다면, 사이즈 최적화하기 위해서는 모니터에 적합한 사이즈를 우선 찾아야 겠죠?

HD 모니터의 사이즈는 가로 1920 PX 세로 1080 PX입니다

아래와 같이 이미지 사용 용도에 따라 사이즈를 대략 계산하여 최적화해야 합니다.

– 모니터 꽉 찬 이미지 : 가로 1920X

– 화면 가로의 절반의 너비 이미지: 대략 960px

– 메뉴 상단 로고: 30PX

웹사이트 제작에 매일 사용하는 툴이지만

많은 분들에게 아직은 생소한, 이미지 파일 크기 줄이기 4가지 방법에 대해서 알려드리고자 합니다.

Tinyping : 무료 사진 파일 압축 사이트

Tinypng는 png 및 JPG(JPEG) 파일 사이즈를 압축해 주는 사이트입니다.

즉, 사이즈와 해상도는 그대로이지만

파일 자체의 용량은 절반 이상 줄여주죠.

앞서 말했듯이,

홈페이지에 이미지 업로드 전에

이 사이트에서 사진 파일 압축 후 업로드하면,

사이트 속도 개선에 도움이 됩니다.

사용방법도 직관적입니다.

위 사진은 사이트 접속 시 메인화면입니다.

빨간 박스 안으로 파일을 드래그하여 놓으면 자동으로 압축하여 아래 압축파일이 뜹니다.

다운로드 버튼을 클릭하면 바로 내 컴퓨터로 사진 파일 압축 버전을 내려받을 수 있습니다.

TINYPNG 사이트 바로 가기

IMAGERESIZER : 무료 이미지 파일 크기 줄이기

Tinyping 과같이

원하는 사진을 드래그해서 올려놓으면

원하는 비율로 사이즈 변동 및 이미지 파일 크기 줄이기가 가능합니다.

자르기, 좌우대칭, 회전 기능도 있어 다양한 편집이 한번에 가능합니다.

무엇보다 이 사이트의 가장 유용한 기능은 메뉴 중 Bulk Resizing입니다.

대량 파일들을 한꺼번에 여기 드래그해서 올려놓으면

이미지 사이즈 변화를 한꺼번에 적용할 수 있어 시간 단축에 도움이 되죠.

Imageresizer 바로 가기

fast image converter (파일 확장자 변경)

이 사이트에서는 각종 파일을 다른 파일명으로 바로 변경 가능합니다.

원본 파일을 업로드하여,

변환 원하는 포맷을 선택한 뒤

파란색 버특을 누르면 변환된 파일이 내 컴퓨터로 다운로드 돼요.

주로 유료 이미지 소스를 체험용 미리 보기로

다운로드할 경우, AI 파일인 경우가 많습니다.

일러스트레이션 프로그램을 사용하지 않는다면,

이 사이트에서 파일 변환하면 이미지 파일로 바로 확인할 수 있습니다.

fast image converter 바로 가기

포토스케이프

포토스케이프 내 컴퓨터에 다운로드하여 사용 가능한 무료 프로그램입니다.

1. 사진 편집

이미지 크기 줄이기, 자르기, 밝기 및 색상 변환, 필터 적용, 텍스트 추가 등

포토샵을 사용하지 않고도 이미지 단순 편집이 가능합니다.

2. 페이지 기능

다양한 콜라주 프레임이 있어

원하는 프레임을 선택하고 이미지를

드래그하여 각 프레임에 놓으면

위와 같이 여러 장의 사진을 손쉽게 배치할 수 있어요.

랜딩 페이지를 하나의 이미지로 보여줄 때 손쉽게 사진을 조합할 수 있습니다.

3. 이어붙이기

여러 장의 이미지 파일을 드래그하여

포토스케이프 안에 높으면 자동으로

사진을 이어 붙여 하나의 파일로 만들어 줍니다.

상품 상세페이지나 세로로 긴 홈페이지의 레이아웃을

한눈에 볼 수 있게 만들 수 있죠.

어떤 기술이든, 기초 다지기가 제일 중요하다고 생각합니다.

처음에 제대로 배우지 못하면, 어설픈 노하우가 독이 될 수도 있습니다.

방법을 알면 간단한 문제인데 그 근본적인 이유를 모른다면, 엄한 플랫폼 탓을 하게 됩니다.

쉽다고 시작한 사이트 제작이었으나,

영문도 모른채, 해결책을 찾지 못하고

시간과 에너지만 소모하고 스트레스만 받다가

결국 포기를 해버릴수도 있게 되는 것이죠.

이미지 파일 크기 줄이기 + 사진 파일 압축!

꼭 기억하시길 바랍니다.

사이트 로딩 속도가 너무 느리다면,

내 사이트에 이미지가 너무 많이 삽입 된것은 아닌지,

그 파일들이 최적화 되어 있는지 꼭 확인해 보시기 바랍니다.


함께 읽으면 좋은 글>>

6개월 7000만원 매출 ! 돈되는 워드프레스 강의 런칭

​23가지 온라인 강의 사이트 제작! 그리고 신규 서비스 런칭

구매전환율 3배 상승 랜딩페이지 제작 꿀팁

홈페이지 제작,어디서 부터 시작해야 되는 거죠?

댓글 달기

줌 세미나 녹확본

왜 홈페이지인가!
왜 워드프레스인가?