인공물을 도입하지 않고 .png 흐린 배경을 압축 된 .jpg로 변환하려면 어떻게합니까?

현재 웹 사이트 배경 이미지의 이미지 품질 문제를 처리하고 있습니다.

사용하려는 큰 흐린 배경 이미지가 있지만 웹 사이트의 크기가 최대한 작기를 원합니다.

최고 품질 (png)로 유지하려면 약 200kb입니다.

JPG로 약 100kb로 줄일 수 있지만 예상되는 품질이 떨어지지 만 선형 주위에는 끔찍한 모양의 선이있어 끔찍하게 보입니다.

이 png를 jpg로 변환하는 특수한 방법이 있지만 이미지에 이러한 결함이 없도록하는 방법이 있습니까?

이미지는 다음과 같습니다.

PNG :

JPG (100 %) 품질 :

JPEG는 무손실 압축이 아닙니다

JPEG 압축은 100 % 품질로 설정하더라도 일부 품질이 손실 되는 손실 압축으로 간주됩니다 . 따라서 UI 인터페이스 및 배경과 같은 간단한 그래픽의 경우 일반적으로 PNG와 같은 무손실 형식을 사용하는 것이 좋습니다.

2014/2015에는 200kb가 크지 않습니다.

배경 크기를 가능한 많이 줄이려면 200kb가 대부분의 광대역 연결에서 그렇게 크지 않다는 점을 명심해야합니다. CSS 미디어 쿼리를 사용하여 모바일 및 태블릿에 다른 버전을 제공 할 수 있습니다.

PNG 파일을 더 작게 만들기

Photoshop 및 기타 페인트 패키지는 표준 PNG 압축을 사용 하므로 PngOptimizer 또는 Yahoo의 Online Service Smush It을 사용하여 200kb 를 줄 이십시오 . 파일 크기를 훨씬 작게 줄이면 무손실 형식으로 품질이 저하되지 않습니다. 기본적으로 코드를 더 줄이며 ZIP 또는 RAR 파일과 비교하면 압축 파일이지만 내용의 품질은 저하되지 않습니다.

스트라이프 그라디언트 사용 고려

또 다른 가능한 해결책은 1px 너비의 얇은 PNG 그라디언트를 사용한 다음 페이지 높이를 사용하고을 사용하여 이것을 복제 background-repeat하는 것입니다. CSS를 사용 하여 그라디언트 를 생성하는 것도 고려할 수 있습니다. 그림자 및 기타 조정을 사용할 수 있습니다.

이것은 아마도 귀하의 질문에 대답하지 않을 것입니다. 가능한 대안 ...

CSS를 대신 고려해 보셨습니까?

background: linear-gradient(45deg, #3d667c, #1d283e);

또는 SVG base64 기술을 사용할 수 있습니다 ( 여기에서 생성기 도구 ).

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="g932" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%"><stop stop-color="#3D667C" offset="0"/><stop stop-color="#1D283E" offset="1"/></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#g932)" /></svg>

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzNENjY3QyIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzFEMjgzRSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzkzMikiIC8+Cjwvc3ZnPg==);

더 작은 PNG를 사용 하고 브라우저의 기본 업 스케일링 알고리즘으로 확대 할 수 있습니까? 이로 인해 파일 크기가 줄어들고 JPG 아티팩트가 제거 될 수 있습니다.

Kraken.io 를 확인하는 것이 좋습니다 . 이미지 최적화 프로그램이 있습니다. 주제의 이미지는 눈에 보이지 않고 크기가 45 % 감소합니다!

CSS를 사용할 수도 있습니다. colorzilla 에는 모든 브라우저에 적합한 CSS를 만드는 데 유용한 도구가 있습니다.

그라디언트 이미지로 편안하게 느껴지면 색상을 떨어 뜨리고 흑백으로 만든 다음 div / body / element에 다음과 같이 배경을 지정하십시오.

background: blue url('images/gradient.png')

김프와 같은 일부 이미지 편집기를 사용하면 JPEG를 저장할 때 스무딩을 적용하고 압축을 제어 할 수 있습니다.

스무딩 : 스무딩 옵션을 0이 아닌 값으로 설정하면 이미지가 약간 부드럽게됩니다. 이는 압축으로 인한 퍼지 아티팩트를 줄이고 압축에 도움이됩니다. 0.10-0.15로 설정하면 가장자리가 번지지 않고 아티팩트의 상당 부분이 제거됩니다.

http://en.wikibooks.org/wiki/GIMP/Saving_as_JPEG

서브 샘플링을 제어하여 아티팩트를 줄일 수도 있습니다

표준 서브 샘플링은 일반적으로 대부분의 이미지에 적합하지만 이미지 품질과 파일 크기간에 좋은 비율을 제공하지만 서브 샘플링 (4 : 4 : 4)을 사용하지 않으면 이미지 품질이 눈에 띄게 증가하는 상황이 있습니다. 파일 크기를 유지하려면 더 높은 압축률을 사용하십시오. 가장 눈에 띄는 경우는 이미지에 균일 한 배경 위에있는 텍스트와 같은 세부적인 부분이 거의 있고 색상이 거의 평평한 이미지입니다.

http://www.ampsoft.net/webdesign-l/jpeg-compression.html

밴딩을 최소화하기 위해 노이즈를 추가하십시오.

포토샵 :

1. 새 레이어를 만듭니다.
2. 로 이동하여 Image > Fill... >다음 값을 사용하십시오.

3. 레이어의 혼합 모드를 오버레이로 변경
4. 로 이동하십시오 Filter > Noise > Add Noise... >. 이 가치는 저에게 효과적이었습니다.

5. 원하는대로 레이어의 불투명도를 조정하십시오. 22 %는 괜찮 았으며 결과 JPG는 다음과 같습니다.

따라서 불쾌한 밴딩은없고 크기는 작지만 잡음이 발생합니다. 파일은 노이즈가없는 버전 (100kb 정도)과 비교할 때 너무 무겁지만 원본 PNG의 절반입니다. 사실 나는 당신의 PNG가이 크기에 놀랐습니다.

한 가지 더 제안 :

노이즈를 추가하지 않으려면 sRGB 색상 공간의 모든 곳에서 작업해야 모니터 화면에 가장 풍부한 색 영역을 제공 할 수 있습니다 (밴딩 감소).