휴대 전화 웹 사이트 속도에 가장 적합한 이미지 크기를 보장하는 방법

당신은 당신의 휴대 전화에 있고, 당신이 주시하고있는 그 제품을 구매할 준비가되었고, 웹 사이트는 단지…. 갑자기, 당신은 당신의 인터넷이 파손되었는지 또는 사이트가 저주되는지 궁금해하고 참을성있게 두드리고 있습니다. 그리고 솔직히 말해, 아마도 당신은 아마 바운스입니다. 당신은 혼자가 아닙니다.

모바일 사용자의 53%가로드하는 데 3 초 이상이 걸리면 페이지를 포기한다는 것을 알고 있습니까? 이제 귀하의 웹 사이트와 관련하여 생각해보십시오. 그것은 잠재적 인 고객이 사라지는 많은 덩어리입니다. 로딩 시간이 느린 방문자에게는 실망스럽지 않습니다. 그들은 당신의 수익성을 상하게했습니다. 그들은 당신의 검색 엔진 순위 (SERP)에 영향을 미치며 사람들이 처음부터 당신을 찾기가 더 어려워집니다. 이 게시물에서는 이미지가 많은 페이지를 제어하고 휴대 전화 웹 사이트 속도에 가장 적합한 이미지 크기를 보장하는 방법을 보여줍니다. 또한 Divi와 같은 좋은 도구를 소개합니다.

모바일 속도가 중요한 이유는 무엇입니까?

느린 웹 사이트의 영향은 단순히 성가신 것 이상입니다. 사용자 경험 (UX), 검색 엔진 최적화 (SEO) 및 결론에 영향을 줄 수 있습니다.

새로운 여름 드레스 나 가장 인기있는 새로운 이어 버드를 탐색한다고 상상해보십시오. 당신은 웹 사이트를 탭하고 페인트 건조를보고있는 느낌이 듭니다. 좌절감이 시작되면 더 빠른 사이트를 가진 다른 소매 업체를 찾을 수 있습니다. 이것을 바운스라고하며 온라인 비즈니스에게는 나쁜 소식입니다. Databox에 따르면 평균 바운스 율은 약 44%입니다. 그보다 높은 것은 수익 손실과 참여 부족으로 이어지고 온라인 비즈니스를 죽일 수 있습니다.

모바일 SEO를 잊지 말자. Google은 빠른로드 모바일 사이트의 우선 순위를 포함하여 가능한 최상의 사용자 경험을 제공하는 것입니다. 모바일 우선 인덱싱을 사용하므로 검색 순위를 결정할 때 주로 사이트의 모바일 버전을 살펴 봅니다.

그러나 모바일 속도가 좋지 않은 영향은 좌절 된 사용자와 낮은 순위를 넘어선 것입니다. 그것은 당신의 수익을 맞출 수 있고 닿을 것입니다 . WordPress로 구축 된 느린로드 전자 상거래 웹 사이트를 상상해보십시오. 그 여분의 초 (1-2 이상이 너무 길다)는 판매 비용이들 수 있습니다. 모바일 장치에서 사이트를 빠르게 실행하는 것을 유지하는 데 필수적이므로 웹 사이트를로드하는 데 너무 오래 걸리기 때문에 고객을 잃지 않도록하십시오.

사이트 속도를 높이는 방법에는 여러 가지가 있지만, 낮은 금융 과일은 휴대 전화 웹 사이트 속도에 가장 적합한 이미지 크기를 결정하는 것입니다.

WordPress의 이미지 최적화 기본 사항

이미지는 웹 사이트를 멋지게 보이고 사용자를 참여시키는 데 중요합니다. 너무 큰 이미지는 웹 사이트를 실제로 느리게 할 수 있습니다. 우리가 배운 것처럼 연구에 따르면 대부분의 사람들은 영원히 기다리지 않을 것입니다. 그렇다면 속도를 희생하지 않고 이미지를 멋지게 유지할 수 있습니까? 사이트를 빠르고 매끄럽게 실행하기위한 몇 가지 기본 사항을 살펴 보겠습니다.

1. 올바른 이미지 형식을 선택하십시오

JPG, PNG 및 Webp를 포함하여 WordPress 웹 사이트에서 여러 이미지 유형을 사용할 수 있습니다. 사용하기에 가장 좋은 것은 무엇입니까? 각 이미지 유형을 더 깊이 파고 사용하는 상황이 가장 적합한 상황을 사용해 보겠습니다.

• JPG : 이들은 일상적인 사진과 같습니다. 풍경이나 인물 사진과 같은 넓은 색상 변화와 부드러운 전환이있는 이미지에 적합합니다. 이들은 영웅 배경, 팀 사진, 블로그 게시물 특집 이미지 등과 같은 대부분의 상황에 적합합니다.
• PNG : PNG는 로고 나 텍스트가있는 그래픽과 같은 날카로운 모서리가있는 이미지에 적합합니다. 또한 색상을 바삭하고 깨끗하게 유지하기 때문에 단색의 큰 이미지가있는 이미지에 좋습니다. 그러나 PNG는 파일 크기가 큰 경향이 있으므로 디자인의 작은 영역에 PNG 파일을 사용하여 크기를 줄입니다.
• Webp : Google의 Brainchild, Webp는 종종 최상의 압축을 제공하여 큰 이미지를 사용할 때에도 파일 크기가 훨씬 작습니다 (예 : 1920px x 1080px). 이미지 품질은 JPG만큼 좋지 않지만 둘 사이의 크기 차이는 중요합니다.

2. 이미지를 크기로 조정하십시오

이미지 크기가 중요합니다. 크기를 낮추려면 웹 사이트에서 필요한 만큼 큰 이미지를 업로드하십시오. 거대한 이미지를 업로드 한 다음 축소 할 필요가 없습니다. 그것은 당신을 위해 추가 작업을 만들고 귀하의 웹 사이트를 늦출 것입니다 .

하나의 크기가 이미지와 관련하여 모든 크기에 맞지 않는다는 것을 기억하는 것이 중요합니다. 스마트 폰의 방문자에게는 더 큰 데스크탑 화면을 위해 설계된 거대한 이미지가 필요합니까? 그들은하지 않습니다. 가능한 경우 반응 형 이미지를 사용하여 모든 화면 크기에 대해 완벽하게 크기의 이미지를 제공하십시오. 나중에 더 나중에 갈 것입니다. 그러나 이미지가 WordPress에 반응하는지 확인하는 가장 좋은 방법 중 하나는 Divi와 같은 WordPress 테마를 사용하여 모든 브라우저 브레이크 포인트에 대한 이미지를 업로드하여 파일 크기를 낮추는 것입니다.

3. 불필요한 것을 짜십시오

이미지 크기에 관해서는 더 작습니다. WordPress에서 이미지를 사용할 때는 품질을 희생하지 않고 가능한 한 작은 이미지를 만들고 싶습니다. 이미지 최적화 플러그인과 같은 압축 도구를 사용하여 무거운 리프팅을 수행 할 수 있습니다. ewww 이미지 최적화기와 같은 도구는 좋지만이 게시물의 뒷부분에서 도구를 더 깊이 파악할 것입니다.

많은 WordPress 플러그인 및 온라인 이미지 크기 조정 도구는 이미지 크기를 줄이기 위해 손실 또는 무손실 압축을 사용합니다. 무손실 압축은 종이 한 장을주의 깊게 접는 것과 같습니다. 필요한 경우 완벽하게 펼치고 원본을 되 찾을 수 있습니다. 가장자리가 날카로운 이미지에 적합하지만 파일 크기가 가장 큰 것은 아닙니다.

반면에, 무손실 압축은 조금 더 공격적입니다. 그것은 같은 종이 조각을 구부리는 것과 같습니다. 약간의 세부 사항을 잃을 수도 있지만 파일 크기가 훨씬 작아집니다.

4. 이미지를 볼 준비가되었을 때를로드하십시오

당신이 취할 수있는 또 다른 단계는 WordPress의 게으른 부하 이미지를 만드는 것입니다. 긴 페이지를 스크롤한다고 상상해보십시오. 한 번에 모든 사진을 실제로 로드해야합니까? 아마. 게으른로드는 페이지를 보는 데 필요한 이미지 만로드하여 페이지를 더 멀리 아래로 내려 놓으면로드하기를 기다립니다. WP 로켓과 같은 플러그인은 WordPress 웹 사이트에 게으른로드를 쉽게 추가 할 수 있습니다. 초기 페이지로드 시간 속도를 높이고 방문자를 행복하게 유지하고 페이지 크기를 낮추는 데 필수적입니다.

이미지 차원 모범 사례

이미지 크기와 관련하여 웹 사이트를 빠르게로드하고 모든 장치에서 멋지게 보이도록 명심해야 할 몇 가지 주요 관행이 있습니다.

반응 형 이미지 크기를 사용하십시오

장치마다 화면 크기와 해상도가 다르므로 한 가지 크기의 접근 방식은 작동하지 않습니다. 예를 들어, 데스크탑의 폭은 1920px의 이미지가 필요할 수 있지만 모바일 장치의 너비는 600px 만 있으면됩니다. 반응 형 이미지를 사용하여 각 장치에 적합한 크기를 제공 할 수 있습니다. HTML의 비밀 속성 또는 반응 형 WordPress 테마와 같은 도구는 DIV 내에 포함 된 사진을 유지하여 사용자의 장치를 기반으로 적절한 이미지 크기를 제공 할 수 있습니다.

종횡비가 중요합니다

이미지에서 일관된 측면 배신자를 유지하면 왜곡이나 이상한 자르기를 피할 수 있습니다. 예를 들어, 데스크탑 이미지에 16 : 9 종횡비가있는 경우 모바일 버전은 이미지가 작은 경우에도 동일한 비율을 유지해야합니다. 이를 통해 이미지가 모든 화면 크기에 비례하고 전문적으로 보이도록합니다.

과도한 크기를 피하십시오

필요한 이미지보다 크게 업로드하는 것은 웹 사이트 속도를 늦출 수있는 일반적인 실수입니다. 예를 들어, 웹 사이트의 컨텐츠 영역이 1080px 너비에 불과한 경우 2000px 와이드 이미지를 업로드하는 것은 불필요합니다. 대형 이미지는 대역폭과 저장을 소비하여 페이지로드 시간이 느려집니다. 항상 사이트에 표시된 최대 치수와 일치하도록 이미지를 크기로 조정하십시오.

장치 전체에 걸쳐 테스트

올바른 차원에서도 이미지는 다양한 장치와 브라우저에서 다르게 행동 할 수 있습니다. 데스크탑, 태블릿 및 스마트 폰 (데스크톱, 태블릿 및 스마트 폰)에서 이미지가 항상 날카 로워지고 빠르게로드 할 수 있도록 이미지를 테스트하십시오. Google의 모바일 친화적 인 테스트 또는 브라우저 개발자 도구와 같은 도구를 사용하면 모든 화면 크기의 이미지 문제를 찾고 수정하는 데 도움이됩니다.

이미지 압축을 고려하십시오

올바른 크기의 경우에도 이미지는 여전히 너무 클 수 있습니다. 압축 도구는 품질을 희생하지 않고 파일 크기를 줄일 수 있습니다. 예를 들어, 고품질의 JPG 또는 Webp 이미지를 압축하여 여전히 멋지게 보이면서 더 빨리로드 할 수 있습니다. 적절한 치수를 압축과 결합하면 이미지가 좋아 보이고 페이지 크기를 최소화 할 수 있습니다.

WordPress에서 이미지 크기를 줄이는 가장 좋은 도구는 무엇입니까?

WordPress의 이미지를 쉽게 조정하는 몇 가지 방법이 있습니다 : 플러그인, Divi와 같은 프리미엄 테마의 내장 기능 또는 Divi AI. 그들이 무엇을하는지 더 잘 이해할 수 있도록 이것들을 더 탐색합시다.

1. WordPress 플러그인

이미지 최적화 플러그인을 사용하는 것은 이미지를 조정하는 가장 좋은 방법 중 하나입니다. 일반적으로 WordPress 미디어 갤러리에 업로드 될 때 이미지의 대량 최적화 또는 이미지 크기 조정과 같은 작업을 수행 할 수 있습니다. 많은 사람들은 또한 웹 전환, 게으른로드 및 다양한 수준의 이미지 압축과 같은 고급 기능을 제공합니다.

• EWWW Image Optimizer : 대량 최적화, 백그라운드 최적화 및 Webp 형식으로 변환과 같은 기능이있는 강력한 옵션. EWWW Image Optimizer는 한 달에 8 달러부터 제한된 사용 및 유료 계획을 가진 무료 계획을 제공합니다.
• ShortPixel : 우수한 압축 알고리즘과 품질을 유지하면서 이미지 파일 크기를 크게 줄이는 기능으로 유명합니다. ShortPixel은 매월 $ 9.99부터 시작하여 제한된 사용 및 월별 요금제를 갖춘 무료 계획을 제공합니다.
• Optimole : 속도와 성능을 강조합니다. 이미지 최적화 및 전달을 위해 클라우드 기반 시스템을 사용합니다. Optimole은 매월 22.99 달러부터 시작하여 제한된 사용 및 유료 계획을 가진 무료 계획을 제공합니다.
• WP Smush : 인기 있고 고급 옵션. SMUSH는 자동 최적화, 손실/손자없는 압축, 게으른로드 및 웹 전환과 같은 기능을 갖춘 무료 및 유료 계획 (한 달에 3 달러부터 시작)을 제공합니다.
• Imagify : 최소한의 손실로 고품질 압축에 중점을 둔 AI 구동 플러그인. Imagify는 한 달에 $ 11.99부터 시작하여 제한된 사용 및 유료 계획을 가진 무료 계획을 제공합니다.

2. Divi (WordPress 테마 및 페이지 빌더)

Divi는 단순한 WordPress 테마 이상입니다. 반응 형 웹 사이트를 구축하기위한 완벽한 프레임 워크입니다. 휴대 전화 웹 사이트 속도에 가장 적합한 이미지 크기를 사용할 수있는 반응 형 컨트롤이있는 강력한 프론트 엔드 비주얼 빌더를 제공합니다.

Divi는 반응 형 편집 시스템 및 설계 설정을 통해 모바일 이미지 크기를 처리합니다. Divi에서 이미지를 추가하면 데스크탑, 태블릿 및 모바일보기에 대한 다른 이미지를 설정할 수 있습니다. 이것은 Divi의 반응 형 디자인 기능의 일부로 각 장치 유형의 이미지를 최적화 할 수 있습니다. 특히 모바일 장치의 크기, 위치, 수평 오프셋 등과 같은 설정을 조정하여 이미지가 모든 화면 크기에 완벽하게 보이도록 할 수 있습니다.

작은 화면에 대한 이미지 변경

이미지가 포함 된 모든 디자인 모듈 내에서 Divi의 반응 형 컨트롤을 사용하면 데스크탑에 대한 하나의 배경 이미지를 표시 할 수 있으며 태블릿 및 모바일 장치에는 다른 이미지가 표시됩니다. 예를 들어, Divi 웹 사이트에서 영웅 섹션을 편집하는 동안 1920px x 1080px를 측정하는 배경 이미지를 추가 할 수 있습니다. 이는 큰 화면에 완벽한 크기입니다. 사용 된 이미지에 따라 모바일 장치에서 동일한 이미지를 보는 것이 좋지 않을 수 있습니다. 따라서 Divi에는 작은 화면에 대한 작은 배경 이미지 (또는 완전히 다른 이미지)를 추가 할 수있는 설정이 포함되어 있습니다.

배경 포지셔닝

Divi를 사용하면 배경 이미지가 다른 화면 크기에 위치하는 방법을 제어 할 수 있습니다. 모든 모듈, 열, 행 및 섹션에는 이러한 컨트롤이있어 방문자가 사용하는 장치에 관계없이 이미지가 쉽게 보일 수 있습니다.

예를 들어, 데스크탑을 중심으로 한 배경 이미지를 설정하지만 모바일 장치의 상단 또는 하단으로 재배치 할 수 있습니다. 이것은 화면 크기에 관계없이 이미지의 가장 중요한 부분이 항상 보이도록합니다. 이것은 하나의 이미지를 사용하고 페이지 크기를 최소로 유지하는 좋은 방법입니다.

Divi에는 게으른로드가 내장되어 있습니다

Divi를 사용하여 이미지 나 배경을 추가하면 테마는 게으른 하중을 자동으로 적용하여 무거운 리프팅을 처리합니다. 사용자가 해당 섹션으로 스크롤 할 때까지 이미지가로드되지 않아 페이지가 칙칙하고 반응을 유지합니다. Divi는 최신 브라우저에서 지원하는 HTML 속성을 활용하여 이미지가 최소 처리 오버 헤드로 지연되도록합니다. 결과는 더 빠른 페이지 속도와 더 부드러운 사용자 경험입니다. Divi는 선불로드 된 이미지의 수를 줄임으로써 LCP (Last Concentful Paint)와 같은 주요 메트릭을 개선하고 핵심 웹 생명력을 향상시킵니다.

Divi 내에서 이미지 사용에 대한 자세한 내용은 Divi 내에서 이미지 사용에 대한 Ultimate Guide를 확인하십시오.

divi를 얻으십시오

3. Divi ai

Divi를 사용하여 휴대 전화 웹 사이트 속도에 가장 적합한 이미지 크기를 보장 할 수있는 또 다른 방법은 Divi AI를 사용하여 완벽하게 크기의 이미지를 생성하는 것입니다. Divi AI는 귀하의 웹 사이트의 개인 디자인 어시스턴트와 같습니다. 텍스트 프롬프트는 텍스트, 코드, 웹 페이지, 전체 웹 사이트 및 픽셀 완벽한 사진을 생성 할 수 있습니다.

예를 들어, 스노우 보드 임대 사업을위한 장엄한 눈 덮인 산맥의 이미지가 필요합니다. 로열티가없는 재고 이미지 사이트를 닦았지만 원하는 것을 찾을 수 없습니다. Divi ai는 지정한 크기로 해당 이미지를 생성 할 수 있습니다.

Divi의 반응 형 제어 덕분에 Divi AI를 사용하여 작은 화면에 대한 이미지를 생성 할 수도 있습니다.

Divi AI는 단지 아름다운 이미지를 만들지 않습니다. 스마트 이미지를 만듭니다. Divi AI에게 필요한 크기를 정확히 알 수 있으며 제공합니다.

divi ai를 얻으십시오

Divi는 모바일 웹 사이트의 이미지 크기를 산들 바람으로 만듭니다

휴대 전화 웹 사이트 속도에 가장 적합한 이미지 크기를 찾는 것은 어려운 일이 아닙니다. Divi로 웹 사이트를 구축하기로 선택하면 느린로드 이미지를 다루기가 잘 갖추어져 있습니다. 반응 형 크기 조정 및 게으른로드를 포함한 Divi의 내장 이미지 최적화 기능은 장면 뒤에서 이미지가 화면 크기에 완벽하게 표시되도록합니다. 그러나 Divi의 이점은 거기서 멈추지 않습니다. Divi AI를 사용하면 필요한 정확한 크기의 고품질 이미지를 생성하여 부피가 크고 느리게로드되는 웹 페이지를 제거 할 수 있습니다.

더 많은 제어를 위해 EWWW 이미지 최적화기와 같은 플러그인의 성능을 활용하여 이미지를 추가로 압축하고 웹 사이트 속도를 미세 조정하십시오. Divi의 강점을 강력한 도구와 결합하면 놀라운 것처럼 보이고 빠르게로드되는 웹 사이트를 만들 수 있으며 방문자를 행복하게하고 비즈니스 번성 할 수 있습니다.

웹 사이트 속도를 높이는 것에 대해 더 배우고 싶습니까? 블로그 에서이 게시물을 확인하십시오.

• WordPress의 Google Pagespeed Insights 점수를 높이는 방법
• 12 최고의 WordPress 속도 최적화 플러그인 (순위)
• Divi 속도 최적화 : 궁극적 인 가이드
• 5 개의 가장 빠른 WordPress 호스팅 회사 (테스트)