Làm việc với một số chủ đề wordpress Tôi đã sửa đổi một số tệp hình ảnh và nhận thấy rằng các phiên bản đã chỉnh sửa của tôi đôi khi lớn hơn 3-4 lần so với bản gốc (được lưu bằng cùng định dạng). Tôi không muốn làm giảm chất lượng - một số cách để làm cho kích thước tệp nhỏ hơn để nó tải nhanh hơn?
Ngay bây giờ, ví dụ, tôi sử dụng Photoshop và đặt thanh trượt chất lượng hình ảnh thành '8' (trong số 10).
Câu trả lời:
Tạp chí Smashing đã làm 2 bài viết tuyệt vời về Tối ưu hóa PNG và tối ưu hóa JPG .
Chúng khá sâu sắc, giải thích rất chi tiết một số điều bạn có thể không biết về các định dạng và cách triển khai của chúng. Ví dụ, bài viết JPEG: "Hãy nhớ rằng khi bạn đặt Chất lượng dưới 50 trong Photoshop, nó sẽ chạy một thuật toán tối ưu hóa bổ sung gọi là lấy mẫu màu, lấy trung bình màu trong các khối tám pixel lân cận".
Cả hai bài viết đều đi vào các kỹ thuật cụ thể mà bạn có thể sử dụng trong Photoshop để chuẩn bị các tệp của mình để nén nhiều hơn. Hiệu quả cao hơn nhiều so với các kỹ thuật được sử dụng sau khi tệp được lưu.
Sau khi bạn đã lưu các tệp này hoặc trên các tệp mà bạn không đủ may mắn để sắp xếp các tệp nguồn để chỉnh sửa trong Photoshop, vẫn còn nhiều nén hơn để loại bỏ các tệp này.
Tôi sử dụng ứng dụng Mac có tên ImageOptim . Từ trang web của họ:
ImageOptim tối ưu hóa hình ảnh - để chúng chiếm ít dung lượng đĩa hơn và tải nhanh hơn - bằng cách tìm các tham số nén tốt nhất và bằng cách xóa các nhận xét và cấu hình màu không cần thiết. Nó xử lý các hình ảnh động PNG, JPEG và GIF.
ImageOptim cung cấp GUI cho các công cụ tối ưu hóa khác nhau: AdvPNG từ AdvanceCOMP, OptiPNG , PngCrush , JpegOptim , jpegtran từ libjpeg, Gifsicle và tùy chọn PNGOUT .
Thật tuyệt vời khi xuất bản hình ảnh trên web (dễ dàng thu nhỏ hình ảnh được lưu cho Web Web trong Photoshop) và cũng hữu ích để làm cho các ứng dụng Mac và iPhone nhỏ hơn.
Miếng bánh. Kéo hình ảnh của bạn (hoặc thư mục hình ảnh) vào cửa sổ, nó chạy qua tất cả các công cụ này để điều chỉnh các lược đồ nén và xóa thông tin cấu hình meta và dữ liệu màu không cần thiết (dù sao không được hỗ trợ rộng rãi - bạn nên sửa cấu hình màu trước khi lưu, không lưu và nhúng chúng).
Tất cả các công cụ được liên kết trong trích dẫn đó đều có phiên bản Windows / Linux / Mac ngoại trừ PNGOUT, nhưng rất may có ai đó đã chuyển PNGOUT sang OS X và linux vì chúng rất chu đáo. Nếu bạn chọn sử dụng ImageOptim, nó sẽ bao gồm tất cả trừ PNGOUT trong .app, vì vậy hãy lấy cổng PNGOUT, thả nó vào / usr / local / bin (hoặc bất cứ nơi nào) và nói với ImageOptim ở đâu.
Nó không phải là hiếm đối với tôi, đặc biệt là với hình ảnh PNG, để thấy kích thước tệp giảm hơn 30% ngay cả sau khi lưu thông qua "Save For Web & Devices" của Photoshop.
Protip: Sau khi chạy tối ưu hóa, sắp xếp theo cột biểu tượng ở bên trái và chọn tất cả các hàng có biểu tượng (X) - các tệp không bị giảm thêm nữa. Xóa chúng khỏi danh sách và chạy lại trên tất cả các hình ảnh có biểu tượng dấu kiểm. Tôi gần như có thể hứa với bạn rằng bạn sẽ có hình ảnh vẫn mất kích thước tệp. Lặp lại việc sắp xếp, chọn, xóa, chạy lại cho đến khi bạn nhận được tất cả các biểu tượng (X) và gọi nó là một ngày.
Khi lưu ảnh trong Photoshop tôi khuyên bạn nên sử dụng File > Save for Web and Devices. Nó sẽ cho phép bạn chơi với các mức nén và xem kết quả trực quan trong thời gian thực. Trên ảnh bạn thường có thể lưu nó thấp hơn cấp 8 và vẫn nhận được kết quả tuyệt vời.
Bạn có thể muốn kiểm tra Smush.it của Yahoo . Tôi đã tìm thấy nó hoạt động rất tốt.
Đối với hình ảnh PNG, bạn có thể giảm số lượng màu trong bản màu và lưu dưới dạng PNG được lập chỉ mục. Chẳng hạn, hãy xem xét một logo có kích thước 128x128 pixel (không nén). Hãy tưởng tượng rằng chỉ có 16 màu mà nó thực sự sử dụng.
Bạn có thể thấy rằng không làm giảm chất lượng của hình ảnh (điều này chỉ áp dụng cho một số loại hình ảnh nhất định), bạn có thể giảm kích thước đáng kể.
Đối với các nút và biểu tượng trang web, bạn cũng có thể xem xét tổng hợp chúng thành một hình ảnh và sử dụng CSS hoặc JavaScript để điều khiển màn hình của chúng (các họa tiết). Điều này tiết kiệm số lượng yêu cầu HTTP được thực hiện cho mỗi hình ảnh.
Hãy thử các định dạng khác.
Về cơ bản, hãy thử lưu hình ảnh của bạn ở các định dạng khác nhau và sau đó xem kích thước tệp.
Nếu bạn đang sử dụng JPEG, bạn sẽ có thể điều chỉnh chất lượng hình ảnh lên xuống trong trình chỉnh sửa đồ họa như paint.net. 50% chất lượng hình ảnh thường đủ tốt cho web và làm cho hình ảnh nhỏ hơn nhiều.
Với PNG bạn không thể làm điều này nhưng điều đáng chú ý là đôi khi PNG lớn hơn nhiều và đôi khi nhỏ hơn nhiều so với JPEG. PNG là nhỏ hơn nhiều đối với hình ảnh đen trắng, ví dụ, chẳng hạn như bản vẽ đường kẻ đen và trắng.
Lời khuyên được đưa ra trong những ngày này là sử dụng các họa tiết CSS để tăng tốc thời gian tải bằng cách giảm yêu cầu, nhưng một lần nữa bạn cần thực sự nhìn vào kích thước hình ảnh bạn nhận được. Rất có thể hình ảnh sprite CSS sẽ lớn hơn nhiều so với hình ảnh thành phần, ví dụ, nếu bạn kết hợp một số PNG đen trắng với một màu.
Bạn cũng muốn đảm bảo rằng bạn đang loại bỏ tất cả dữ liệu EXIF - hầu như tất cả những điều này không liên quan đến người dùng trên web, họ có thực sự cần biết rằng bạn đã sử dụng Canon 5D để chụp ảnh và bạn đã sử dụng F-Stop là 2,8, phơi sáng trong 0,5 giây, với ISO là 160, không có độ lệch phơi sáng và tiêu cự 9mm?
Tất cả các siêu dữ liệu này làm tăng thêm trọng lượng cho hình ảnh của bạn và nói chung nên được loại bỏ.
Như jessegavin chỉ ra, hầu hết các ứng dụng hình ảnh sẽ hiển thị cho bạn bản xem trước về các hiệu ứng của việc nén - sử dụng chúng, vì cài đặt chăn của "8" hiếm khi mang lại cho bạn sự đánh đổi tốt nhất có thể.
Cuối cùng, plugin Google Page Speed Firefox / Fireorms có thể cho bạn ý tưởng tốt về mức độ bạn có thể giảm kích thước hình ảnh (bao gồm cho phép bạn xem và lưu các phiên bản nhỏ hơn).
Khi bạn đã thực hiện tất cả các đề xuất khác để đảm bảo rằng hình ảnh của bạn càng nhỏ càng tốt trong khi vẫn giữ được mức chất lượng mong muốn, bạn cũng sẽ muốn định cấu hình trang web của mình để nó phục vụ hình ảnh với tiêu đề HTTP tối thiểu và đảm bảo rằng các tiêu đề bạn đang phục vụ cho phép các hình ảnh được lưu trữ một cách thích hợp bằng cách lưu trữ các máy chủ proxy và trình duyệt web.
Để giảm kích thước của các yêu cầu, đảm bảo rằng máy chủ web của bạn được định cấu hình không gửi các tiêu đề vô dụng như X-Powered-By. Ngoài ra, đảm bảo rằng bạn đang phục vụ những thứ như hình ảnh, CSS và các thành phần tĩnh khác từ máy chủ không đặt cookie (ví dụ: static.example.com).
Đối với hình ảnh tĩnh, đặt tiêu đề Hết hạn của chúng thành một ngày trong tương lai xa. Điều này đảm bảo rằng trình duyệt web và mọi proxy lưu trữ ở giữa sẽ giữ hình ảnh càng lâu càng tốt. Nhược điểm duy nhất của điều này là nếu bạn muốn hiển thị một hình ảnh khác, bạn sẽ cần phải sử dụng một tên tệp khác và liên kết đến đó để thay thế. Đánh số phiên bản trong tên tệp (ví dụ: myimage_1.png hoặc /images/3/logo.png) có thể là một cách hiệu quả để thực hiện việc này. Đối với các trang ít tĩnh hơn, hãy đặt tiêu đề Hết hạn thực tế (truy cập cộng với X giờ) và đảm bảo rằng bạn đang đặt tiêu đề Sửa đổi lần cuối hoặc tiêu đề eTag (không phải cả hai) để các trình duyệt đã tải xuống các tệp trước đó có thể kiểm tra nhanh cho dù họ có phiên bản hiện tại bằng cách so sánh các tiêu đề thay vì kéo xuống toàn bộ hình ảnh.
Mặc dù có nhiều tài nguyên có sẵn để thảo luận về các kỹ thuật này, Yahoo đã thực hiện một công việc tuyệt vời mang lại nhiều mẹo để cải thiện hiệu suất phân phối nội dung cùng một nơi.