이미지 크기 조정 온라인: 망막 함정과 조용히 버리는 캔버스

약 6 개월 동안이 블로그의 모든 썸네일은 약간 부드럽습니다. 깨지지 않았습니다. 분명히 틀린 것은 아닙니다. 그냥... 퍼지, 눈가리개를 알아차리고 알아차리지 못한 채 스스로에게 말하는 방식입니다.

레이아웃은 썸네일 슬롯이 600 픽셀 너비라고 말했습니다. 그래서 저는 600 픽셀 너비의 썸네일을 내보냈습니다. 그것은 정확히 잘못된 일이며,왜 그런지 알아내는 데 당황스러울 정도로 오랜 시간이 걸렸습니다. 왜냐하면 제 모니터에서는 괜찮아 보였고 제 휴대폰에서는 복사본의 복사본처럼 보였기 때문입니다.

그 이유는 CSS 픽셀이 기기 픽셀이 아니기 때문입니다. 최신 휴대폰이나 망막 노트북은 모든 CSS 픽셀에 두세 개의 물리적 픽셀을 담습니다 - that's what window.devicePixelRatio 보고서. 그래서 제 600 픽셀 이미지는 1,200 개의 물리적 픽셀의 유리에 걸쳐 늘려지고 있었고,브라우저는 그 차이를 만들어내고 있었습니다. 파일에서 isn't 인 디테일을 발명할 수 없습니다. 수정 사항은 1,200으로 내보내고 CSS가 600으로 표시하도록 하는 것이었습니다.

That's 이 가이드는 크기 조정된 이미지를 필요한 것보다 더 나쁘게 보이게 만드는 다른 3~4개와 함께 만들어졌습니다. 그만큼 이미지 크기 조정 도구 on Toolz.dev 는 브라우저에서 작업을 수행합니다 - 파일은 결코 기계를 떠나지 않습니다 - 그러나 도구는 쉬운 부분입니다. 어떤 숫자를 입력해야하는지 아는 것이 실제로 중요한 부분입니다.

TL;DR: 내보내기 2× 디스플레이 크기 망막 스크린 (600px 슬롯은 1,200px 파일이 필요함) 의 경우, 절대 스케일링하지 마십시오 위로- you can't add detail that was never captured. 이미지를 진심으로 왜곡하고 싶지 않다면 화면 비율을 잠급니다. 크기 조정 전에 당신은 압축하지 후. 를 사용합니다 이미지 크기 조정 도구 치수를 설정하려면 종횡비 계산기 누락된 부분을 해결하기 위해 이미지 압축기 나중에 파일 크기를 낮추려면. 모든 것이 클라이언트 측에서 실행됩니다. 앞에서 알 가치가있는 한 가지주의 사항: 크기 조정은 이미지를 다시 인코딩합니다 모든 EXIF 메타데이터가 제거됩니다- 개인 정보 보호에 적합하며 때로는 놀랍습니다.

크기 조정 후 이미지가 흐릿해 보이는 이유는 무엇입니까?

10번 중 9번 it's는 세 가지 중 하나이며, they're all fixable입니다.

당신은 규모를 확대했습니다. 400×300 사진을 1600×1200 로 확대하면 소프트웨어가 가지고있는 모든 것에 대해 12 픽셀의 정보를 생성하도록 요청합니다. 그것은 보간하여이 작업을 수행합니다 - 이웃을 평균하여 그 사이에 속한 것을 추측합니다 - 그리고 그 결과는 부드럽습니다,왜냐하면 세부 사항은 진정으로 존재하지 않기 때문에 생성 모델만큼이나 짧은 것은 그것을 다시 발명하지 않습니다. 항상 가지고 있는 가장 큰 원본에서 시작하여 축소하십시오. Down은 거의 무손실입니다; 위쪽은 추측입니다.

픽셀 비율을 무시하셨습니다. 내가 위에서 설명한 실수. CSS 상자가 600×400 이고 user's 화면이 2×이면 브라우저는 1200×800 실제 픽셀이 필요하여 선명하게 렌더링합니다. 2×로 내보내고 브라우저가 축소되도록하십시오 - 브라우저에서 축소하면 멋지게 보입니다; 업 스케일링은 진흙처럼 보입니다.

다른 것이 당신을 따라 압축했습니다. 크기를 신중하게 조정한 다음 이미지를 자체 품질 설정으로 다시 인코딩하는 플랫폼에 업로드합니다. 모든 소셜 플랫폼은 이를 수행합니다. 중지할 수 있지만 줄일 수 있습니다: 플랫폼에 가깝게 업로드's 대상 차원으로 가능한 한 적은 작업을 수행하고 수정해야 하는 파일이 아닌 이미 정리된 파일인 파일을 건네줍니다.

이미지 크기를 조정하면 실제로 어떤 일이 발생합니까?

이해할 가치가 있는, 왜냐하면 대부분의 놀라움을 설명해 주기 때문이다.

래스터 이미지는 픽셀의 격자입니다. 그 격자를 작게 만드는 것은 a 가 무엇인지 결정하는 것을 의미합니다 새로운 픽셀은 여러 오래된 것들 사이에 위치 할 때이어야한다. 그 결정은 호출됩니다 리샘플링그리고 알고리즘은 중요합니다:

• 가장 가까운 이웃- 가장 가까운 원본 픽셀을 잡습니다. 빠르고,덩어리지고, 들쭉날쭉한 가장자리. 막힘이 포인트인 픽셀 아트에 대해서만 수정합니다.
• 이중선형- 가장 가까운 4 개의 픽셀을 평균화하십시오. 부드럽고 약간 부드럽습니다.
• 쌍입방체- 입방 곡선으로 주변 픽셀 16개의 무게를 측정합니다. 이중선형보다 더 날카롭습니다; 대부분의 데스크탑 소프트웨어에서 합리적인 기본값입니다.
• 란초스- 더 큰 이웃에 창 sinc 필터. downscaling 에 대한 최고의 품질,가장 느린,높은 대비 가장자리에서 희미한 울림을 생성 할 수 있습니다.

브라우저 캔버스 크기 조정은 이중선형에서 쌍입방 범위에 위치하며 does't를 사용하면 정확하게 선택할 수 있습니다. 평활화 품질만 요청할 수 있으며 해당 힌트의 HTML spec's 기본값은 다음과 같습니다 "low". That's 는 웹 일의 절대 다수를 위해 벌금이고 it's 는 왜 Toolz.dev 공구가 즉시 느끼는지.

알만한 가치가있는 하나의 파워 유저 트릭이 있습니다. 한 단계에서 큰 요소로 다운 스케일링 할 때 - 예를 들어 4000px 에서 400px 로,10× 감소 - 일부 브라우저 구현은 너무 희박하게 샘플링하고 앨리어싱을 얻습니다: 반짝이는 가장자리,직물 또는 벽돌의 무아레 패턴,미세한 세부 사항 손실 해결 방법은 축소 단계: 반복적으로 반으로 (4000 → 2000 → 1000 → 500 → 400) 그래서 각 단계는 이제까지 픽셀의 절반만 버립니다. 큰 감소가 이제까지 당신이 예상했던 것보다 더 바삭하게 나오는 경우에,that's 이유,그리고 2 개의 통행에서 그것을 하는 것은 그것을 고칠 것입니다.

Toolz.dev 크기 조정 도구는 실제로 무엇을 합니까?

I'd 차라리 나중에 알게 되는 것보다 정확하게 말해라. It's a canvas based resizer:

1. 귀하의 파일은 개체 URL 을 통해 브라우저로 읽혀집니다. 그것은 업로드한 적이 없습니다- there's 업로드할 서버가 없습니다.
2. It's 는 대상 차원에서 HTML 캔버스에 그려집니다.
3. 캔버스가 다시 인코딩됩니다 PNG, JPEG 또는 웹P (손실 형식의 경우 품질 기본값은 0.9입니다).
4. 당신은 결과를 다운로드합니다.

그것에서 세 가지 결과 다음, 그리고 그들 중 하나만 대부분의 도구에 있습니다' 마케팅 사본:

EXIF 메타데이터가 제거되었습니다. 캔버스를 다시 인코딩하면 아주 새로운 파일이 생성됩니다. 카메라 모델,렌즈, 캡처 시간,그리고 - 중요한 것은 - GPS 좌표 살아남지 마십시오. 아무것도 you're 출판,that's 개인 정보 보호 기능,그리고 실제 하나: 휴대 전화에서 바로 사진은 일상적으로 촬영 된 곳의 정확한 좌표를 수행. 만약 당신이 필요 EXIF (예를 들어 사진 포트폴리오의 경우), 명시적으로 보존하는 도구로 크기를 조정합니다. 소스가 카메라 롤에서 바로 나온 경우 게시하기 전에 출력 방향을 살펴보세요.

애니메이션 GIF는 단일 프레임으로 나옵니다. 캔버스는 하나의 프레임을 그립니다. 이것을 제한 이외의 다른 것으로 설명하는 정직한 방법은 없습니다. 애니메이션의 크기를 조정하고 계속 움직여야하는 경우이 도구가 아닙니다. (I & # 39;d 차라리 다운로드 한 후에 발견하게하는 것보다 분명히 말하십시오.)

종횡비를 잠그면 "fit inside"가 아니라 "stretch to fill"를 의미합니다. 비율이 잠긴 상태에서 너비와 높이를 모두 입력하면 이미지가 맞게 조정됩니다 이내에 그 비율을 유지하면서 그 상자. 그래서 1000×1000 타겟이있는 16:9 사진이 1000×1000 이 아닌 1000×563 으로 나옵니다. 그것은 결코 당신의 이미지를 왜곡하지 않을 것입니다 - 그러나 그것은 또한 won't 자르기를 사각형을 채우기 위해 자릅니다. 직사각형에서 정확한 사각형이 필요하면 크기가 아닌 작물이 필요합니다. 그 구별은 사람들을 끊임없이 혼란스럽게하고 it's 에 대해 정확하게 말할 가치가 있습니다.

종횡비는 실제로 어떻게 작동합니까?

종횡비는 그냥 너비 ÷ 높이,한 쌍으로 표현됩니다. 수학은 간단하며 머릿속에서 할 수 있어야 합니다. 왜냐하면 가장 일반적인 크기 조정 오류를 방지하기 때문입니다: 스쿼시.

빠진 변을 찾으려면 비율을 일정하게 유지하십시오:

new_height = new_width × (original_height ÷ original_width)

1200 와이드로 크기가 조정된 4000×3000 사진 (4:3) 은 1200 × (3000/4000) =이 됩니다 900 키 큰. 대신 1200 및 800 을 입력하고 you've 는 4:3 이미지를 3:2 로 스쿼시 - 얼굴이 좁아지고 원이 타원이되며 모두가 무언가를 말할 수 있습니다's 꺼짐 그들은 can't 가 무엇을 말하더라도. The 종횡비 계산기 당신을 위해 이것을하고 당신을 위해 비율을 역시 감소시킵니다.

다음은 복사되지 않고 확인되는 수학을 사용하여 계속 나타나는 비율입니다:

그 "1.91:1"에 1 개의 정직한 주, 매번 저를 벌레로 만들기 때문에 행: 1200×628 는 실제로 1.91:1 이 아닙니다. 제대로 감소 it's 300:157, 또는 1.911. 산업은 그것을 둥글게 하고 모두는 어깨를 으쓱합니다. 그것은 does't 사정 실제로 - 그러나 만약에 you'1200×628 does't 가 아무것도로 분할하는 까 왜 이제까지 경이한 경우에,that's 왜.

플랫폼 픽셀 사양 변경; 비율은 거의 없습니다. 오히려 블로그 포스트에 있는 차원 테이블을 신뢰하기 보다는 (이 것을 포함하여) 중요한 캠페인을 위해 platform's 자신의 현재 spec 를 검사하고 그 후에 그것을 명중하기 위하여 위 비율을 이용하십시오. 모양은 숫자가 편류할 때라도 안정되어 있습니다.

웹 이미지는 실제로 어떤 크기여야 합니까?

당신이 통제하는 웹 사이트의 경우 - 다른 사람보다 가장 큰 내용의 페인트에 대해 you're 최적화's 업로더 - 추론은 다르고 더 좋습니다.

이미지가 아닌 CSS 상자에서 시작하십시오. 이미지가 실제로 레이아웃에서 얼마나 넓게 렌더링되는지 찾습니다. Not the container's max width - the 이미지's 너비,당신이 걱정하는 중단점에서. 그런 다음 망막에 대해 두 배로. That's 당신의 수출 크기. 그 이상의 모든 것은 바이트 you're 배송에 지불하고 사용자가 다운로드에 지불하고 있습니다,영 표시 혜택.

하나 이상의 크기를 제공하십시오. 단일 2400px 파일은 380 CSS 픽셀로 렌더링 할 전화기에 낭비입니다. srcset 정확하게 이것을 위해 존재합니다:

<img
  src="hero-1200.webp"
  srcset="hero-600.webp 600w, hero-1200.webp 1200w, hero-2400.webp 2400w"
  sizes="(max-width: 768px) 100vw, 1200px"
  width="1200" height="675"
  alt="..."
/>

브라우저는 해당 장치에서 여전히 선명하게 보일 가장 작은 파일을 선택합니다. 그리고 항상 설정합니다 width 그리고 height 속성 - 이미지를 로드하기 전에 브라우저가 공간을 예약할 수 있도록 하여 페이지가 점프하여 누적 레이아웃 이동 점수를 손상시키는 것을 방지합니다.

먼저 크기를 조정하고 두 번째로 압축합니다. 사람들이 거꾸로 받는 순서입니다. 4000px 이미지를 압축하고 그럼 800px로 크기를 조정한다는 것은 버리려고 했던 픽셀을 최적화하는 데 노력을 기울였다는 것을 의미합니다. 압축 아티팩트를 보관한 픽셀에 구웠을 가능성이 높습니다. 먼저 치수를 잘라낸 다음 남은 항목을 압축하세요. 이미지 압축기. 차원은 거의 항상 더 큰 승리 어쨌든: 이미지의 양쪽을 반으로 줄이면 제거됩니다 75% 압축기가 닿기 전의 픽셀입니다. 나는 그것에 대해 더 깊이 설명합니다 이미지 압축 가이드.

그런 다음 올바른 형식을 선택하십시오. 대략: 사진에 대한 JPEG,투명도 또는 선명한 텍스트와 선이 필요할 때 PNG,동등한 품질에서 두 가지를 모두 능가하기 때문에 웹의 기본적으로 모든 것에 대한 WebP. The 이미지 포맷 변환기 해당 단계를 처리합니다 이미지 도구 개요 조각들이 어떻게 서로 맞는지 다룹니다.

Toolz.dev에서 이미지 크기를 어떻게 조정하나요?

1. 열다 이미지 크기 조정 도구. 계정도 없고 설치할 것도 없습니다.
2. 이미지를 넣으세요. 브라우저로 바로 로드됩니다. 어디든 전송되는 증명 nothing's - that's 개인 사진을 붙여넣는 모든 이미지 도구에서 실행할 가치가 있는 검사를 원한다면 네트워크 탭을 시청하세요.
3. 대상 치수를 입력합니다. 폭을 타자를 치십시오; 비율이 잠긴 상태에서, 고도는 따릅니다. 이것이 스크린을 위한 것인 경우에 망막을 위해 두배로 하는 것을 기억하십시오.
4. 출력 형식을 선택하세요- PNG, JPEG 또는 WebP.
5. 다운로드. 브라우저에서 생성되어 디스크로 바로 연결됩니다.

만약 you're 몇몇 크기에서 동일한 심상을 생성하는 경우에,가장 큰 원본에서 매 1 회마다 일하십시오. Don't 는 600px 에 아래로 1200px 수출을 크기를 조정합니다 - 원본에 돌아가서 그것에서 600 를 수출하십시오. 이미 분실된 파일의 각 재부호화는,사진 사본의 사본이 타락하는 동일한 방법 손상을 합성합니다. It's 마지막 결과에서 나타나는 작은 분야.

자주 묻는 질문

품질을 잃지 않고 이미지 크기를 조정할 수 있습니까?

다운스케일링은 거의 아무것도 감지할 수 없게 됩니다 - you're는 더 이상 필요하지 않은 픽셀 데이터를 폐기하고 화면의 결과는 선명해 보입니다. 업스케일링은 항상 품질을 잃습니다. 왜냐하면 소프트웨어는 결코 캡처되지 않은 픽셀을 보간해야 하므로 부드러움이나 눈에 보이는 아티팩트가 생성되기 때문입니다. 항상 작은 원본에서 위로 올라가는 대신 가지고 있는 가장 큰 원본에서 크기를 줄입니다.

망막 스크린 용 이미지를 내보내려면 어떤 크기를 사용해야합니까?

이미지가 표시되는 크기를 2×로 내보냅니다. 레이아웃이 600×400 상자에 이미지를 렌더링하는 경우 1200×800 으로 내보내므로 a 가 있는 장치에서 선명하게 유지됩니다 devicePixelRatio 2 의. 2×를 넘어가는 것은 3× 디스플레이에서도 눈에 보이는 이점이 최소이기 때문에 여분의 바이트의 가치가 거의 없습니다.

이미지 크기를 조정하면 EXIF 데이터가 제거됩니까?

예,HTML 캔버스를 통해 크기 조정이 발생할 때 - Toolz.dev 에서와 마찬가지로 - 도구는 이미지를 새 파일로 다시 인코딩하고 EXIF 메타데이터는 이월되지 않습니다. 즉,카메라 세부 정보,캡처 시간 및 GPS 좌표가 모두 제거됩니다. 게시의 경우 이는 개인 정보 보호 혜택입니다; EXIF 보존이 필요한 경우 명시적으로 지원하는 도구를 사용하십시오.

애니메이션 GIF 크기를 조정하고 애니메이션을 유지할 수 있습니까?

캔버스 기반 리사이저가 아닙니다. 캔버스는 단일 프레임을 캡처하므로 출력은 PNG,JPEG 또는 WebP 형식의 정지 이미지입니다. 모든 프레임을 보존하면서 애니메이션 크기를 조정하려면 전용 GIF 처리 도구가 필요합니다.

KB에서 특정 파일 크기로 이미지 크기를 조정하려면 어떻게 해야 합니까?

파일 크기는 직접 설정하는 것이 아닙니다 - 치수,포맷, 압축 품질에서 벗어납니다. 거꾸로 작업: 치수를 이미지가 실제로 표시되는 것으로 줄이고 사진의 경우 PNG 가 아닌 WebP 또는 JPEG 로 내보낸 다음 품질을 낮추고 출력 크기를 다시 확인합니다. "under 100 KB" 같은 하드 타겟을 치는 것은 일반적으로 하나가 아닌 해당 루프의 두세 패스입니다.

이미지를 자르지 않고 크기를 조정하려면 어떻게 해야 합니까?

종횡비를 잠그십시오. 너비와 높이가 원래 비율로 유지되면 프레임의 모든 픽셀이 보존되고 스케일 만 변경됩니다. 대상 모양이 소스 모양과 다를 때만 자르기가 불가피해집니다. 3:2 사진을 1:1 아바타 슬롯에 피팅한다는 것은 빈 공간을 레터박스로 만들거나 이미지의 일부를 잘라내는 것을 의미합니다.

먼저 이미지의 크기를 조정하거나 압축해야 합니까?

크기를 먼저 조정한 다음 압축합니다. 치수를 줄이면 픽셀이 완전히 제거됩니다. 너비와 높이를 모두 절반으로 줄이면 픽셀의 75%가 제거됩니다. 이는 압축만 사용하는 것보다 거의 항상 파일 크기의 승리입니다. 크기를 조정하기 전에 압축하면 폐기하려는 픽셀에 대한 노력이 낭비되고 보관하는 픽셀에 아티팩트가 구워질 수 있습니다.

크기 조정과 자르기의 차이점은 무엇입니까?

크기 조정은 전체 이미지의 크기를 변경하여 모든 내용을 유지합니다. 자르기는 이미지의 일부를 잘라내어 프레임 또는 종횡비를 변경합니다. 직사각형 사진에서 사각형이 필요한 경우 종횡비를 잠근 상태로 크기를 조정하면 이미지를 채우는 대신 사각형 내부에 맞습니다. 프레임을 채우려면 자르기가 필요합니다.

브라우저에서 이미지 크기를 조정하기 위한 파일 크기 제한이 있습니까?

아무 것도 업로드되지 않기 때문에 서버에 부과 된 제한이 없습니다 - 실용적인 천장은 장치 & # 39;s 사용 가능한 메모리입니다. 큰 카메라 파일을 포함한 일반적인 사진은 즉시 크기를 조정합니다. 매우 큰 이미지 (예를 들어 매우 고해상도 스캔) 는 잠시 시간이 걸리거나 메모리가 제한된 전화에서로드하지 못할 수 있습니다.

올바른 치수로 크기를 조정한 후에도 이미지가 여전히 흐릿해 보이는 이유는 무엇입니까?

순서대로 세 가지를 확인: 당신은 작은 원본에서 확장 여부 (고칠 수없는 - 더 큰 소스를 찾을 수), 당신은 장치 픽셀 비율에 대한 계정 여부 (2× 화면에 600px 파일은 1200px이어야), 그리고 당신이 업로드 한 플랫폼이 나중에 이미지를 다시 압축 여부 소셜 미디어에 일반적이며 platform's 권장 차원에서 업로드하여 가장 완화된다.