사이트의 이미지 최적화를 위한 팁: 성능 및 사용자 경험 향상

Google이 귀하의 웹사이트를 멸시하는 것을 원하지 않습니다. 저희를 믿으십시오. 다행히도 이미지를 최적화하여 사이트의 효율성을 높일 수 있습니다. 형식 지정과 관련된 한 가지 문제는 변경 사항이 품질에 영향을 미칠 수 있다는 것입니다(결과적으로 방문자가 귀하의 웹사이트를 싫어하게 만들 수 있음).

당신이 그들을 끔찍하게 보이게 하지 않는다면 그것은 끔찍한 일이 아닙니다. 웹사이트에 자랑스럽게 표시할 수 있을 만큼 충분히 매력적으로 유지하면서 이미지의 파일 크기를 줄일 수 있는 몇 가지 팁과 기술이 있습니다.

따라서 사진을 나쁘게 보이게 하지 않고 형식을 지정하는 방법과 웹 및 성능에 맞게 사진을 최적화하는 방법을 살펴보겠습니다.

이미지 최적화란 무엇을 의미합니까?

이미지가 크면 웹 페이지가 느리게 로드되어 사용자 경험이 저하됩니다. 플러그인이나 스크립트를 사용하여 파일 크기를 줄이는 것과 같은 이미지 최적화를 사용하면 품질을 유지할 뿐만 아니라 로딩 시간도 단축할 수 있습니다. 일반적으로 사용되는 두 가지 압축 방법은 손실 압축과 무손실 압축입니다.

이미지 포맷의 장점

처음에 사진 형식을 지정해야 하는 이유는 무엇입니까? 장점은 무엇입니까? 사진의 성능을 최적화하면 다양한 이점이 있습니다. HTTP 아카이브에 따르면 이미지는 2018년 11월 기준 웹페이지 전체 무게의 21%를 차지합니다.

따라서 최적화해야 하는 사이트의 두 번째로 중요한 부분이 바로 동영상입니다.

스크립트 및 글꼴보다 우선합니다. 적절한 이미지 최적화 절차가 설정하기 가장 간단한 것 중 하나임에도 불구하고 많은 웹사이트 소유자가 이를 놓치고 있습니다.

다음은 가장 중요한 이점 중 일부입니다.

• 스크립트 로딩을 획기적으로 개선할 것입니다. 페이지를 로드하는 데 시간이 너무 오래 걸리면 방문자가 좌절하여 다른 웹사이트로 이동할 수 있습니다.
• 좋은 WordPress 플러그인과 함께 사용하면 SEO에 큰 영향을 줄 수 있습니다. 검색 엔진 결과에서 귀하의 웹사이트는 더 높은 순위를 차지할 것입니다.
• 백업을 만드는 것이 더 쉬울 것입니다.
• 더 작은 파일은 더 적은 대역폭을 사용합니다. 이것은 네트워크와 브라우저 모두에서 높이 평가될 것입니다.
• 서버에 필요한 저장 공간의 양을 줄입니다(최적화하는 축소판 수에 따라 다름).

웹용 이미지 품질 및 성능을 개선하는 방법

이미지 포맷의 주요 목적은 품질과 파일 크기 사이의 균형을 찾는 것입니다. 이러한 최적화는 거의 모두 여러 가지 방법으로 수행할 수 있습니다. WordPress 사이트에 업로드하기 전에 압축하는 것은 가장 많이 사용되는 방법 중 하나입니다. 이것은 일반적으로 Adobe Photoshop 또는 Affinity Photo와 같은 프로그램에서 수행됩니다.

파일 형식과 압축 유형은 항상 고려해야 하는 두 가지 요소입니다. 각 이미지 또는 파일 유형에 가장 적합한 것이 무엇인지 알아내려면 탐색해야 합니다.

올바른 파일 형식 선택

사진 편집을 시작하기 전에 사진에 가장 적합한 파일 형식을 선택했는지 확인하십시오. 다음을 포함한 다양한 파일을 사용할 수 있습니다.

• PNG — 파일 크기는 더 크지만 품질은 거의 동일하게 유지됩니다. 무손실 이미지 형식으로 설계되었지만 손실이 발생할 수도 있습니다.
• 손실 및 무손실 최적화는 JPEG에서 사용됩니다. 품질과 파일 크기의 적절한 균형을 위해 품질 수준을 설정할 수 있습니다.
• GIF에는 256가지 색상만 사용됩니다. 애니메이션 그래픽의 경우 이상적인 옵션입니다. 무손실 압축만 사용됩니다.

모든 브라우저에서 지원되지는 않지만 JPEG XR 및 WebP와 같은 몇 가지 다른 것이 있습니다. 색상이 많은 사진의 경우 JPEG 또는 JPG를 사용하고 일반 이미지의 경우 PNG를 사용해야 합니다.

손실 대 무손실 최적화

두 가지 허용되는 이미지 압축 스타일이 있으며 손실 및 무손실이라고 합니다.

"손실"이라는 용어는 일부 데이터를 제거하는 필터를 나타냅니다. 이렇게 하면 이미지가 손상되므로 최소화할 때 주의해야 합니다. 이러한 유형의 최적화를 수행하려면 Adobe Photoshop, Affinity Photo 등과 같은 소프트웨어를 사용할 수 있습니다. 위의 예에서는 손실 압축을 사용합니다.

"무손실"이라는 용어는 데이터 압축 필터를 나타냅니다. 이것은 이미지 품질에 최소한의 영향을 미칩니다. PC에서 Photoshop, FileOptimizer 또는 ImageOptim과 같은 응용 프로그램을 사용하여 무손실 압축을 수행할 수 있습니다.

여러 압축 전략을 시도하여 각 이미지 또는 형식에 가장 적합한 압축 전략을 찾는 것이 가장 좋습니다.

이미지 최적화를 위한 도구 및 프로그램

사진을 최적화하는 데 도움이 되는 유료 및 무료 도구와 앱이 여러 개 있습니다. 일부 회사는 최적화를 수행할 수 있는 도구를 제공하지만 다른 회사는 대신 제공합니다.

Affinity Photo는 저렴하고 Adobe Photoshop과 거의 동일한 기능을 가지고 있기 때문에 Affinity Photo의 열렬한 지지자입니다.

다음은 조사해야 할 몇 가지 추가 리소스 및 이니셔티브입니다.

• 어도비 포토샵
• 단
• 페인트.NET
• GIFsicle
• JPEG트란
• JPEG 미니
• 옵티PNG

크기에 맞게 이미지 크기 조정

CSS가 크기를 조정하도록 하는 것보다 크기에 맞게 사진을 제출하는 것이 중요했습니다. 이제 WordPress 4.4가 반응형 이미지를 지원하므로 더 이상 문제가 되지 않습니다. 미디어 라이브러리에 추가된 각 이미지는 WordPress에 의해 자동으로 크기가 조정됩니다. 이미지의 모든 잠재적인 크기를 지정함으로써 브라우저는 이제 가장 적합한 크기를 선택하고 나머지는 무시할 수 있습니다.

미디어 라이브러리 정리

미디어 라이브러리를 정리하는 동시에 공간을 절약하려면 미디어 클리너를 사용하여 원하지 않는 미디어 파일을 찾을 수 있습니다. 플러그인은 모든 미디어 파일을 검색하고 보고 삭제할 수 있도록 Media Cleaner 대시보드에서 사용하지 않는 파일을 표시합니다.

사용할 수 있는 이미지 최적화 플러그인

고맙게도 WordPress를 사용하여 모든 형식 지정 또는 압축을 수동으로 처리할 필요가 없습니다. 플러그인을 활용하여 최소한 일부 작업을 자동화할 수 있습니다. 이미지 파일을 제출할 때 이미지 파일을 최적화할 수 있는 플러그인이 많이 있습니다. 이미 게시한 사진의 품질도 향상됩니다.

• 이미지 최적화 도구
• ShortPixel 이미지 최적화 도구
• 옵티몰
• EWWW 이미지 최적화 클라우드
• 옵티머스 이미지 옵티마이저
• WP 스무시
• 작은PNG
• 이미지 재활용

결론

귀하의 사이트는 검색 엔진, 브라우저 및 네트워크에서 더 좋아할 것이며 더 나은 성능을 위해 사진을 준비하고 모범 사례를 따르면 독자에게 더 빨리 로드됩니다.

사진을 더 빠르게 실행할 수 있도록 사진을 준비했습니까? 플러그인을 사용하여 수동으로 수행합니까, 아니면 둘 다 사용하여 수행합니까? 제안해주실 프로그램이나 플러그인이 있습니까? 더 하고 싶은 말씀이 있으신가요?

의견 섹션에서 전략 및 모범 사례에 대해 알려주십시오.