Làm cách nào để chuyển đổi một nền mờ .png thành một .jpg được nén mà không giới thiệu các tạo tác?

Tôi hiện đang xử lý một vấn đề về chất lượng hình ảnh cho hình nền trang web của mình.

Tôi có một hình nền mờ lớn tôi muốn sử dụng nhưng muốn nó có kích thước nhỏ nhất có thể cho trang web.

Để có chất lượng cao nhất (png), khoảng 200kb.

Tôi có thể giảm xuống còn khoảng 100kb dưới dạng JPG nhưng chất lượng bị giảm đi, nhưng có những đường nhìn khủng khiếp xung quanh tuyến tính khiến nó trông rất tệ.

Có cách nào để chuyển đổi png này thành jpg đặc biệt nhưng giữ cho hình ảnh không có những khiếm khuyết này không?

Dưới đây là những hình ảnh:

PNG:

Chất lượng JPG (100%):

JPEG không phải là nén không mất dữ liệu

Nén JPEG được coi là nén mất mát ngay cả khi được đặt ở chất lượng 100%, bạn sẽ mất một số chất lượng. Đó là lý do tại sao đối với đồ họa đơn giản như giao diện UI và nền thường tốt hơn để sử dụng định dạng lossless như PNG.

200kb không phải là lớn trong năm 2014/2015

Mặc dù nên giảm kích thước nền càng nhiều càng tốt, điều quan trọng cần lưu ý là 200kb không phải là lớn đối với hầu hết các kết nối băng thông rộng. Bạn có thể phục vụ một phiên bản khác cho điện thoại di động và máy tính bảng bằng cách sử dụng truy vấn phương tiện css .

Tạo một tệp png thậm chí nhỏ hơn

Photoshop và các gói sơn khác sử dụng nén PNG tiêu chuẩn, bạn có thể phải giảm 200kb xuống còn ít hơn bằng cách sử dụng PngOptimizer hoặc Dịch vụ trực tuyến của Yahoo Smush It . Giảm kích thước tệp thậm chí thấp hơn sẽ không làm giảm chất lượng vì định dạng không mất dữ liệu ... nó cơ bản tối ưu hóa mã giảm hơn nữa, so sánh với tệp ZIP hoặc RAR, các tệp nén này nhưng không làm giảm chất lượng nội dung.

Xem xét sử dụng một dải sọc

Một giải pháp khả thi khác có thể là bạn sử dụng một gradient PNG mỏng có chiều ngang 1px và sau đó là chiều cao của trang, sau đó bạn nhân đôi điều này bằng cách sử dụng background-repeat, thậm chí bạn có thể xem xét sử dụng CSS để tạo Gradient cho bạn, nhưng tất nhiên là bạn bị giới hạn bởi có thể sử dụng bóng và các tinh chỉnh khác.

Điều này có lẽ không trả lời câu hỏi của bạn. Một số lựa chọn thay thế có thể ...

Bạn đã xem xét CSS thay thế:

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

Hoặc có lẽ bạn có thể sử dụng kỹ thuật SVG base64 ( công cụ tạo tại đây ):

<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==);

Bạn đã thử sử dụng một PNG thậm chí nhỏ hơn và cho phép thuật toán mở rộng tự nhiên của trình duyệt để phóng to nó chưa? Điều này có thể làm giảm kích thước tệp cũng như loại bỏ các tạo phẩm JPG.

Tôi khuyên bạn nên kiểm tra Kraken.io , họ có trình tối ưu hóa hình ảnh. Các hình ảnh trong chủ đề của bạn giảm 45% kích thước, mà không thể nhìn thấy bằng mắt!

Bạn cũng có thể chỉ cần sử dụng css, colorzilla có một công cụ tuyệt vời để tạo css phù hợp cho tất cả các trình duyệt.

Nếu bạn cảm thấy thoải mái với một hình ảnh gradient, hãy thả màu, làm cho nó thành màu đen và trắng, sau đó cung cấp cho div / body / phần tử nền như sau:

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

Một số trình chỉnh sửa hình ảnh như GIMP cho phép bạn áp dụng làm mịn cũng như kiểm soát nén khi lưu jpeg.

Làm mịn: Đặt tùy chọn làm mịn thành giá trị khác không sẽ làm mịn hình ảnh một chút. Điều này làm giảm các tạo phẩm mờ từ nén và giúp nén. Cài đặt 0.10-0.15 sẽ loại bỏ một phần tốt của các vật phẩm mà không làm mờ các cạnh.

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

Bạn cũng có thể giảm hiện vật bằng cách kiểm soát mẫu phụ

Mặc dù mẫu phụ tiêu chuẩn thường phù hợp với hầu hết các hình ảnh, cung cấp tỷ lệ tốt giữa chất lượng hình ảnh và kích thước tệp, có một số trường hợp không sử dụng mẫu phụ (4: 4: 4) làm tăng đáng kể chất lượng hình ảnh, ngay cả khi bạn sử dụng tỷ lệ nén cao hơn để duy trì kích thước tệp. Các trường hợp đáng chú ý nhất là khi hình ảnh chứa một số phần có chi tiết tốt, như văn bản trên nền đồng nhất và hình ảnh có màu gần như phẳng.

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

Cố gắng thêm tiếng ồn để giảm thiểu dải:

Photoshop:

1. Tạo lớp mới.
2. Truy cập: Image > Fill... >và sử dụng các giá trị sau:

3. Thay đổi chế độ hòa trộn của lớp thành Lớp phủ
4. Đi tới : Filter > Noise > Add Noise... >. Những giá trị này hoạt động tốt với tôi:

5. Điều chỉnh độ mờ của lớp theo ý thích của bạn. 22% là loại OK và kết quả JPG là:

Vì vậy, không có dải khó chịu, kích thước nhỏ hơn nhưng chi phí của tiếng ồn. Các tệp nặng hơn đáng kể so với phiên bản không gây ồn (khoảng 100kb), nhưng chỉ bằng một nửa so với PNG gốc. Trên thực tế tôi hơi ngạc nhiên khi PNG của bạn lớn như vậy.

Thêm một gợi ý:

Nếu bạn không muốn thêm nhiễu, hãy cố gắng đảm bảo rằng bạn đang làm việc ở mọi nơi trong không gian màu sRGB, nơi cung cấp gam màu phong phú nhất cho màn hình theo dõi (ít tạo dải).