웹용 이미지 크기를 조정하는 방법

이 게시물은 웹용 이미지 크기를 조정하는 방법에 대해 설명합니다. 먼저 픽셀 단위로 이미지가 웹 페이지에 올바르게 맞도록 합니다. 그런 다음 이미지를 너무 많이 저하시키지 않으면서 파일 크기를 줄이기 위해 킬로바이트 단위로 표시합니다.

웹용으로 이미지 크기를 조정하는 이유는 무엇입니까?

우리는 이미지를 화면에서 보기 좋게 만들고 웹사이트 방문자가 빠르게 다운로드할 수 있기를 원합니다.

빠른 로딩 이미지가 있는 웹사이트는 검색 엔진에서 더 높은 순위를 차지합니다.

검색 엔진은 사용자를 좋은 경험을 제공하는 웹사이트로 보내는 것을 선호하기 때문입니다.

빠른 로딩 이미지를 위한 두 단계:

• 첫 번째 단계는 이미지의 크기를 픽셀 단위 로 조정하는 것입니다.
  그것이 너비와 높이입니다. 웹사이트의 해당 지점에 딱 맞는 크기여야 합니다.
  반응형 웹사이트가 도입된 이후로 이미지 크기 조정에 몇 가지 이상한 점이 있습니다.
  이미지는 모바일, 태블릿, 데스크톱 및 나중에 설명할 TV에 적합한 크기여야 합니다.
• 두 번째 단계는 압축이라고 하는 이미지 크기를 킬로바이트 단위로 줄이는 것 입니다.
  압축은 이미지 내의 색상을 줄이거나 결합하여 크기(KB)를 줄입니다. 너무 많은 품질을 잃지 않고 이 작업을 수행할 수 있습니다.

크기 조정 및 압축이라는 두 가지 작업을 모두 수행하는 것을 웹용 이미지 최적화라고 합니다.

이미지 크기 조정에 대한 모범 사례와 방법을 보여 드리겠습니다.

반응형 이미지의 합병증

다양한 화면 크기에서 보기 좋게 크기가 조정되는 반응형 이미지부터 살펴보겠습니다.

우리는 모바일을 먼저 디자인하므로 웹 사이트의 모바일 버전을 참조하여 시작하겠습니다.

모바일 웹사이트에서 이미지는 일반적으로 화면의 전체 너비에 걸쳐 있습니다. 이미지는 텍스트 위에 쌓이고 사용자는 길고 모바일 친화적인 웹 페이지를 빠르게 스크롤하는 데 매우 익숙합니다.

모바일 장치의 경우 이미지에 적합한 너비는 640픽셀입니다. 높이는 당신이 원하는 무엇이든 될 수 있습니다.

그러나 이미지 크기 조정은 여기서 끝나지 않습니다. 하나의 크기가 모든 사람에게 맞지 않습니다.

다른 장치의 이미지

초대형 모니터나 TV 화면에서 동일한 이미지를 생각해 봅시다. 이제 스마트 TV를 통해 웹사이트에 액세스할 수 있습니다.

이미지는 텍스트 왼쪽의 열에 위치할 수 있습니다.

모바일 버전에서와 같이 화면 너비에 걸쳐 있을 수 있습니다. 우리는 이러한 영웅 이미지를 호출합니다.

그 이미지가 지금 얼마나 커야 하는지 상상해보십시오.

TV의 경우 완벽한 픽셀 이미지는 너비가 1920픽셀 이상입니다.

이미 모바일용으로 이미지를 640픽셀로 축소한 경우 1920픽셀로 확대하려고 하면 끔찍하게 보일 것입니다. 400% 이상 늘리면 됩니다.

이미지를 확대하면 보기 좋지 않습니다. 픽셀이 늘어나고 이미지가 흐릿하게 보입니다.

이미지를 1920픽셀로 유지하도록 설정해도 문제가 해결되지 않습니다. 특히 느린 인터넷 연결에서 매우 느리게 다운로드됩니다.

복잡함을 추가하려면: 이미지는 페이지에서 사용하기 위한 정확한 픽셀 크기여야 합니다. 검색 엔진은 치수로 알려진 너비와 높이에 대한 좋은 아이디어를 갖고 싶어합니다.

따라서 표준 크기가 없으며 모든 것이 매우 복잡해집니다. 우리가 할 수 있는 일은 최선을 다하는 것뿐입니다.

적응형 이미지용 WordPress 플러그인

적응형 이미지라고 하는 올바른 이미지 크기를 장치에 제공하는 데 도움이 되는 몇 가지 WordPress 플러그인이 있습니다.

기본적으로 크기나 해상도에 관계없이 작은 이미지가 먼저 다운로드됩니다.

화면 해상도가 크면 플러그인이 더 큰 버전을 제공합니다. 이것은 방문자의 대기 시간을 단축시킵니다.

큰 영웅 이미지를 사용하고 싶지만 다운로드 시간이 걱정되는 경우에 적합한 솔루션입니다.

다음은 내가 좋아하는 두 가지 적응형 이미지 플러그인입니다.

• Nevma의 WordPress용 적응형 이미지
  더 작은 버전의 이미지를 모바일 장치로 보내기만 하면 활성화 후 설정이 저장되면 작업을 수행하는 매우 기본적인 플러그인입니다.
• ShortPixel의 Shortpixel 적응형 이미지
  이 플러그인은 영리합니다. 활성화되는 즉시 다른 화면의 이미지를 자르고 압축하기 시작합니다. 필요한 경우 더 큰 제어 권한을 가질 수 있습니다. ShortPixel 문서도 포괄적입니다. 이미지 압축 테스트를 통해 압축 전후의 이미지를 비교할 수도 있습니다.
  

따라서 내가 할 일은 이러한 적응형 플러그인을 사용하는 것이지만 완전히 의존하지 않고 카메라에서 바로 WordPress 사이트에 사진을 덤프합니다. 미디어 라이브러리를 깨끗하게 유지하십시오.

먼저 이미지 크기를 조정하고 최소한으로 압축하여 KB를 낮춥니다. WordPress에 업로드하면 적응형 이미지 플러그인이 나머지 작업을 수행합니다.

웹용 이미지 크기 조정을 시작해 보겠습니다.

웹용 이미지 크기 조정 – 픽셀 단위

우리가 논의한 모든 것을 염두에 두고 이미지 너비를 선택하십시오.

• 사진가에게는 우수한 품질의 이미지가 필요합니다. 초대형 모니터에서 전체 화면 너비로 표시하려면 꽤 큰 이미지가 필요합니다. 사진 크기를 1920픽셀 이상으로 조정합니다.
• 다른 사람은 1200픽셀로 이동하는 것이 좋습니다. 이것은 좋은 균형입니다. 초대형 모니터를 사용하는 사람들은 전체 너비 이미지에서 픽셀화를 볼 수 있지만 빠른 로딩 이미지를 위한 절충안입니다.

내 웹사이트와 블로그의 경우 최대 1200픽셀 너비의 이미지를 사용하며 페이지에 있는 대부분은 800픽셀입니다. 그 이유는 다음과 같습니다.

• 전체 너비 이미지는 내 웹사이트에서 사용되지 않습니다. 나는 모든 것을 정말 빠르게 유지하는 것을 좋아합니다.
• 내 비즈니스는 특별히 시각적이지 않으며 사람들은 내 사진을 그렇게 고해상도로 볼 필요가 없습니다.
• 저는 Open Graph에 대해 별도의 정확한 크기 이미지를 사용하며 1200보다 큰 것은 필요하지 않습니다.
• Google Analytics를 통해 내 사이트를 방문하는 사람들이 휴대용 기기나 노트북을 사용한다는 사실을 알고 있습니다. 유용한 정보.

여러분의 재량에 맡깁니다.

무료 이미지 편집 소프트웨어

온라인에서 사용할 수 있는 무료 도구와 다운로드할 수 있는 이미지 편집 프로그램이 많이 있습니다.

사진의 경우 JPEG 파일 형식을 사용하며 여기에서 다룰 내용입니다.

벡터의 경우 PNG 또는 SVG로 이동합니다. 이는 향후 자습서용입니다.

김프 이미지 편집 소프트웨어

'GIMP'(GNU 이미지 조작 프로그램)는 완전 무료 이미지 편집기입니다.

웹 사이트에서 현재 안정 버전의 김프를 다운로드합니다.

김프는 이미지(스케일)의 크기(치수) 변경에 대한 튜토리얼을 제공합니다.

온라인 이미지 편집기

Google에서 '온라인 크기 조정 이미지'를 빠르게 검색하면 Jpeg를 업로드, 크기 조정, 압축 및 다운로드할 수 있는 전체 옵션이 제공됩니다.

내가 찾은 첫 번째 결과는 resizeimage.net이었습니다. 사용이 매우 간편합니다. 이미지를 자르고, 크기를 조정하고, 압축합니다.

이미지를 자르려면 옵션 번호 2를 사용하세요. 하지만 저는 이를 건너뛰고 픽셀 단위로 크기를 조정할 수 있는 옵션 번호 4로 바로 이동했습니다.

너비 필드에 1200을 입력하고 높이가 Nan이고 가로 세로 비율 유지 확인란을 선택합니다.

출력 이미지 형식은 JPG입니다.

압축 옵션을 선택합니다.

점진적 압축은 방문자가 페이지를 방문하는 즉시 JPEG의 픽셀화된 버전을 표시합니다. 나머지 정보는 최종 이미지를 빌드하기 위해 점진적으로 다운로드됩니다. 방문자가 기다릴 줄 알기 때문에 나는 이 옵션을 아주 좋아합니다.

당신이 얼마나 무자비하게 되고 싶은지에 따라 이미지의 품질을 약 75%까지 줄이십시오.

KB 단위로 이미지 크기 조정 – 압축

압축은 크기 조정과 매우 다릅니다. 적응형 이미지 플러그인을 사용하는 경우에도 업로드하기 전에 모든 이미지를 압축해야 합니다.

압축은 픽셀을 줄여 이미지의 파일 크기를 줄여서 더 빠르게 다운로드합니다.

압축 단계에서 이미지 품질을 너무 손상시키지 마십시오.

보기 좋은 이미지와 빠른 다운로드 사이의 균형을 유지하십시오.

김프 소프트웨어를 사용하여 이미지를 압축할 수도 있습니다.

Jpeg의 크기(FileSize) 변경에 대한 김프 자습서.