품질 손실없이 파일 크기 줄이기

11

Photoshop에 파일을 저장하고 있지만 가능한 작게 유지하고 싶습니다.

웹 및 장치 용으로 저장을 사용하고 JPEG로 저장합니다. 내가 사용한 설정은 다음과 같습니다.

텍스트를 사용하기 때문에 품질 설정을 낮추고 싶지 않으며 설정이 너무 낮 으면 인공물이 표시되는 경우가 있습니다.

이미지 크기에 따라 수백 킬로바이트의 파일 크기가 생성됩니다. 이것은 큰 문제는 아니지만 이러한 이미지는 웹에 사용되며 작을수록 좋습니다. 파일 크기를 줄이기 위해 품질을 저하시키지 않는 기술은 무엇입니까?

최신 정보:

여기에 정보를 더 추가하려면 다음을 수행하십시오.

내가 사용하고 만든 많은 이미지는 이메일을 통해 전송됩니다. 이미지 위에 HTML과 CSS를 사용하여 텍스트를 배치 할 때 수행 할 수있는 작업이 몇 가지로 제한됩니다.

또한 다양한 글꼴을 사용합니다. 일부는 CSS를 사용하여 웹에 사용할 @font-face수 있지만 큰 파일 크기가 발생할 수 있으며 경우에 따라 글꼴을 웹에 합법적으로 업로드 할 수 없습니다. Typekit 과 같은 서비스를 사용할 수는 있지만 Typekit 에서는 사용할 수없는 글꼴이 많이 있습니다.

다음은 이미지 예입니다.

이미지 예

— L84
소스

1

이것에 대한 몇 가지 대답이 있습니다. 이야기하는 이미지의 예가 도움이 될 것입니다.

— e100

1

@ e100-예제 이미지를 제공하고 추가 정보를 추가하기 위해 질문을 업데이트합니다.

— L84

비슷한 질문 : graphicdesign.stackexchange.com/q/3429/10419

— Kornel

웹 사이트 측을 제어하는 경우 코드 / 빌드 옵션을 살펴보십시오. 저는 프로 웹 팀의 디자이너이며 큰 타격없이 데스크톱 / 휴대폰에 전체 화면 비디오를 제공합니다. 엄격하게 요구되지 않는 이미지는 벡터 SVG이며 글꼴로로드됩니다. 페이지 KB 수를 대폭 줄입니다. 2000 픽셀 너비의 영웅 배너는 JPG가 85 %이며 백그라운드에서 사전로드됩니다. 최종 사용자 장치는 파일의 상대적 버전 (즉, 모바일 용 더 작은 버전)을 감지하여 전달합니다. 사용자가 홈 페이지를 통과하면 화면이 즉시로드됩니다. 그리고 우리는 최대 2 초의 홈페이지를 목표로합니다.

— Applefanboy

15

최상의 압축 방법의 선택은 이미지 내용에 따라 다릅니다. 많은 색상과 부드러운 전환으로 이미지를 저장하려는 경우 JPEG를 선택하는 것이 좋습니다. 그렇지 않으면 몇 가지 색상의 선화, 텍스트, 이미지가있는 경우 PNG를 대신 시도해야합니다.

구체적인 압축 방식, 매개 변수, 색상 감소 등은 특정 사례에 따라 다릅니다. 아티팩트를 뚜렷하게 만들지 않고 JPEG 압축 "슬라이더"를 30 또는 40으로 설정하여 안전하게 저장할 수있는 이미지가 있습니다. 다른 일부는 설정 80 이상이 필요합니다. 당신의 눈은 판사 여야합니다.

JPEG 압축에 대해 이야기 할 때 "프로그레시브"옵션을 사용하거나 "블러"를 0이 아닌 값으로 설정하는 것을 망설이지 마십시오 (미묘한 블러는 심각한 압축 아티팩트를 마스크 할 수 있음).

PNG의 경우 사용 된 색상의 양을 최대한 줄 이도록 노력해야합니다 (PNG-8 사용). "스무딩"이 필요한 경우 다른 디더링 알고리즘을 사용해보십시오.

다음은 몇 가지 예입니다.

JPEG, 프로그레시브, 품질 : 40, 흐림 : 0.18 JPEG, 최적화, 품질 : 60, 흐림 : 0 JPEG, 프로그레시브, 품질 : 60, 흐림 : 0 PNG-8, 디더링 : 확산, 256 색

왼쪽에서 오른쪽으로, 위에서 아래로, 매개 변수는 다음과 같습니다.

JPEG, 프로그레시브, 품질 : 40, 흐림 : 0.18, 크기 : 9,672 바이트
JPEG, 최적화, 품질 : 60, 흐림 : 0, 크기 : 16,898 바이트
JPEG, 프로그레시브, 품질 : 60, 흐림 : 0, 크기 : 11104 바이트
PNG-8, 디더링 : 확산, 색상 : 256, 크기 : 4528 바이트

시각적으로 비교 한 다음 각 데이터 크기를 잘 살펴보십시오. 첫 번째 쌍은 약 9.7 kB 대 16.9 kB입니다. 두 번째는 11.1kB vs. 4.5kB입니다. 이 모든 것은 (IMHO) 무시할만한 시각적 차이입니다.

— 테 보지 오
소스

진보적 인 옵션에 대한 나의 가장 큰 관심사는 이메일 클라이언트에 대한 지원입니다. 이것을 설명하기 위해 질문에 더 많은 정보를 추가했습니다.

— L84

1

“프로그레시브”는 JPEG 표준의 일부이며 이국적인 것이 아니기 때문에 지원은 거의 100 %가되어야합니다. 그러나“나는 생각한다”는 것이 아니라“나는 생각한다”:)

— thebodzio

동의합니다 . 그렇습니다. 웹 마스터 SE 에서이 질문 을 했습니다. 최악의 경우 이미지가 완전히로드 될 때까지 표시되지는 않습니다.

— L84

1

이것이 바로 "진보적 인"작동 방식입니다. 더 많은 데이터를 사용할 수있게되면 이미지의 더 자세한 버전이 연속적으로 표시되어야합니다.

— thebodzio

죄송합니다. 이미지가로드 될 때까지 스캔하여 스캔을로드 할 때까지 아무것도 표시되지 않았습니다.

— L84

10

몇 가지 옵션이 있습니다.

JPEG (PNG 또는 GIF) 이외의 다른 형식을 사용하십시오. 파일 크기와 이미지 품질 모두의 결과는 이미지의 내용에 따라 다릅니다. 각각은 특정 종류의 콘텐츠에서 더 좋습니다
이미지를 픽셀 단위로 더 작게 만드십시오. 이것은 매우 중요한 효과가 있으며 전체 레이아웃을 제어 할 경우 반드시 고려해야합니다.
가능하면 이미지가 아닌 요소를 사용하십시오. 예를 들어 이미지의 텍스트를 HTML 텍스트로 바꾸십시오. 색상 블록을 HTML 요소로 바꾸십시오.

마지막 두 지점을 확장하면 기존 이미지의 파일 크기를 줄이는 데 시간을 보내기 전에 레이아웃의 이미지 범위를 최소화해야합니다.

— e100
소스

2

나는 지금까지 답변되지 않은 몇 가지 질문에 대답하려고 노력할 것입니다.

내가 사용하고 만든 많은 이미지는 이메일을 통해 전송됩니다. 이미지 위에 HTML과 CSS를 사용하여 텍스트를 배치 할 때 수행 할 수있는 작업이 몇 가지로 제한됩니다.

html 이메일을 보낼 수 있습니다 (뉴스 레터 작성 방식). html 및 인라인 CSS (호환성을 위해) 이미지는 서버에 있어야하며 전체 URL을 스타일링 / img- 태그에 넣어야합니다. Here'sa의 목록 다른 전자 메일 클라이언트에서 작동하는 무슨이의.

또한 다양한 글꼴을 사용합니다. 일부는 CSS의 @ font-face를 사용하여 웹에 사용할 수 있지만 파일 크기가 크거나 글꼴을 웹에 합법적으로 업로드 할 수없는 경우가 있습니다.

지금까지 최고의 웹 폰트 소스 인 Google 웹 폰트를 사용해보십시오 . 모두 무료로 사용할 수 있습니다. 다른 하나는 Font Squirrel 입니다. (@ font-face도 사용합니다).

— 자 니크 루프
소스

링크 주셔서 감사합니다. 일부 Campaign Monitors 웹 사이트를 탐색했지만 CSS 페이지를 보지 못했습니다. 매우 유용한 정보가 있습니다.

— L84

-1

이렇게 할 수있는 방법이 없습니다. JPEG는 손실 형식입니다. 품질과 파일 크기 사이에는 항상 거래가 있습니다.

— 원하는 252
소스

JPEG 이외의 다른 권장 사항. PNG는 어떻습니까?

— L84

1

PNG는 무손실이지만 상당히 큽니다. 이 이미지는 어디에 사용합니까? 웹용이라면 항상 텍스트를 코딩하는 것이 좋습니다.

— Jannik Ruf

JPEG 및 GIF는 웹보기에 적합합니다 (PNG는 거의 사용되지 않음). 그러나 그것은 당신이하고 싶은 일에 많이 의존합니다 : 배경, 이미지 슬라이드 쇼, 썸네일 또는 아이콘 등 ...

— wanting252

효과가없는 텍스트 (예 : 검은 색 바탕에 흰색 텍스트) 만있는 경우 Gif는 크기가 작고 크기가 작습니다.

— Jannik Ruf

4

이것은 실제로 좋은 대답이 아닙니다. 파일 크기를 줄이는 몇 가지 방법이 있습니다. 웹에서 PNG가 거의 사용되지 않는다고 말하는 것은 잘못입니다.

— e100