Một cách dễ dàng để tối ưu hóa hình ảnh để xuất bản trực tuyến. Nén dữ liệu lossy và lossless. Xóa và thay thế hình ảnh

Tối ưu hóa hình ảnh – một phần quan trọng khuyến mãi trang web. Hình ảnh được tối ưu hóa phù hợp sẽ góp phần mang lại thứ hạng cao nhất cho tài nguyên trong kết quả tìm kiếm và tăng tốc độ tải nội dung. Tối ưu hóa hình ảnh là gì và nó được thực hiện như thế nào?

Tối ưu hóa hình ảnh là quá trình giảm kích thước hình ảnh được sử dụng trong thiết kế website và bài viết mà không làm giảm chất lượng.

Trước khi bắt đầu quá trình “nén” hình ảnh, chúng tôi đánh giá tốc độ tải của trang web và hiểu những chỉ số nào ngăn cản chúng tôi cải thiện kết quả. Dịch vụ PageSpeed ​​Insights sẽ trợ giúp việc này. Nếu một trang đạt trên 85/100 điểm thì đây là kết quả tốt và đây là con số bạn nên phấn đấu.

Ví dụ, bây giờ kết quả là như thế này:

Và sau khi tối ưu hóa:

Kết quả này có được là nhờ sử dụng các đề xuất của Google:

định dạng PNG

Làm cách nào để tối ưu hóa hình ảnh nếu định dạng PNG được sử dụng để lưu chúng? Để thực hiện việc này, bạn có thể sử dụng các đề xuất của Google:

Nếu bạn chỉ định tối ưu hóa hình ảnh cơ bản, bạn có thể sử dụng bất kỳ chương trình chỉnh sửa hình ảnh nào: GIMP, Photoshop, v.v. Nhưng cái nào thì tốt hơn? Một thí nghiệm nhỏ sẽ giúp bạn tìm hiểu. Chúng tôi lấy một hình ảnh chưa được tối ưu hóa ở định dạng PNG nặng 293 KB:

Chúng tôi tạo hai thư mục: “GIMP” và “Photoshop” và đặt cùng một bức ảnh vào đó.

Làm cách nào để nén ảnh mà không làm giảm chất lượng bằng trình chỉnh sửa GIMP và Photoshop?

Kết quả trông như thế này:

Điểm mấu chốt: Photoshop đã thực hiện công việc tối ưu hóa hình ảnh tốt hơn GIMP.

Nhưng điều này không có nghĩa là bạn chỉ có thể sử dụng các tùy chọn này. Có những tiện ích khác không kém phần hiệu quả để nén hình ảnh ở định dạng PNG. Ví dụ: và PNGOUT. Kết quả công việc của họ như sau:

Mặc dù thực tế là OptiPNG thua Photoshop 1 KB nhưng bản thân chương trình này chỉ nặng 96 KB và đây là một điểm cộng lớn. Nhưng PNGOUT đã vượt qua “đối thủ” của mình về mọi mặt:

Làm việc với các chương trình

Trước hết, bạn cần tải xuống tiện ích OptiPNG hoặc PNGOUT (hoặc có thể cả hai) từ các trang web chính thức. Sau đó copy file .exe vào thư mục: C:\Windows.

Để “đơn giản hóa” tác vụ, chỉ cần sao chép các tệp này từ thư mục Windows và đặt lối tắt của chúng trên màn hình nền. Để thuận tiện, phím tắt OptiPNG có thể được gọi ngay là opting-o7 (tham số nén tối đa duy trì chất lượng). Tất cả những gì còn lại chỉ là chuyển những hình ảnh mong muốn sang phím tắt và đợi chương trình tối ưu hóa chúng.

Phương pháp này đơn giản nhưng không thuận tiện lắm. Đôi khi khi cố gắng tối ưu hóa một số lượng lớn hình ảnh có thể xảy ra lỗi "bật lên". Ngoài ra, không phải ai cũng thích kéo và thả tập tin liên tục.

Vì vậy, có một lựa chọn khác để làm việc với các tiện ích. Chúng tôi tạo một tài liệu kiểm tra, mở nó và viết mã vào đó (chỉ hoạt động chính xác trên hệ điều hành Windows):

Chúng tôi lưu tệp ở định dạng .reg và ở dạng mã hóa ANSI, chạy nó, đồng ý với tất cả các hành động và bạn đã hoàn tất. Các tiện ích được tích hợp vào Windows shell.

Việc tối ưu hóa hình ảnh được thực hiện như thế nào? Quá trình diễn ra như thế này: click chuột phải Nhấp vào thư mục chứa hình ảnh chưa được tối ưu hóa ở định dạng PNG (tiện ích không thay đổi tệp của các tiện ích mở rộng khác) và chọn chương trình mà chúng tôi sẽ nén hình ảnh. Bạn có thể làm điều này với hai tiện ích lần lượt.

Sau đó, dòng lệnh mở ra, thể hiện quá trình tối ưu hóa:

định dạng JPEG

Để nén ảnh JPEG, bạn cần có công cụ Jpegtran hoặc Jpegoptim. Tất nhiên bạn có thể sử dụng biên tập viên GIMP và Photoshop. Tuy nhiên, Jpegtran hoặc Jpegoptim xử lý tác vụ tối ưu hóa hiệu quả hơn, vì vậy chúng tôi tải xuống và cài đặt cả hai chương trình.

Thiết lập tiện ích Jpegtran

Kích hoạt chương trình Jpegtran bằng cách đưa nó vào Windows shell không phải là một lựa chọn phù hợp cho tiện ích này. Nó sẽ không hoạt động chính xác vì mã (jpegtran -copynone -optimize -outfile min.image.jpg image.jpg) được thiết kế để nén trọng lượng của chỉ một hình ảnh chứ không phải tất cả các tệp trong thư mục.

Điều này có nghĩa là bạn cần sử dụng một phương pháp khác để kích hoạt tiện ích. Jpegtran không nhất thiết phải được đặt trong thư mục C:\Windows, nhưng bạn có thể lưu một bản sao của nó tại đây. Đặt chương trình jpegtran.exe vào bất kỳ thư mục nào và đổi tên nó (để thuận tiện) thành!jpegtran.

Sau đó, bằng cách sử dụng Notepad++, chúng tôi tạo một tệp ở dạng mã hóa UTF-8 (không có BOM) với phần mở rộng .bat và tên!start. Chúng tôi đặt mã này vào đó:

Để tối ưu hóa hình ảnh, bạn cần đặt cả hai tệp jpegtran.exe và!start.bat vào cùng một thư mục và bắt đầu quá trình nén bằng tệp!start.bat:

Thiết lập chương trình Jpegoptim

Tiện ích Jpegoptim có thể được tích hợp vào Windows shell mà không gặp vấn đề gì. Để kích hoạt nó, bạn cần thêm mã vào cuối tệp PMGoptim.reg (nó đã được tạo trước đó cho các tiện ích cho hình ảnh PNG):

Quá trình tối ưu hóa hình ảnh bằng chương trình này rất đơn giản: nhấp chuột trái vào thư mục có hình ảnh và chọn “Run jpegoptim”.

Kết quả của Jpegtran và Jpegoptim:

Dịch vụ trực tuyến

Có rất nhiều dịch vụ trên Internet cho phép bạn tối ưu hóa hình ảnh một cách hiệu quả. Đôi khi kết quả công việc của họ còn tốt hơn những tiện ích đã thảo luận ở trên.

Tuy nhiên, các dịch vụ trực tuyến làm giảm chất lượng khi nén hình ảnh. Đôi khi chỉ cần một vài pixel nhưng độ biến dạng vẫn thấy rõ. Nghĩa là, kích thước của hình ảnh có thể phù hợp với chúng ta, nhưng chất lượng lại còn nhiều điều chưa được mong đợi.

Tốc độ tải trang web là một trong những yếu tố thể hiện “thái độ” của các công cụ tìm kiếm đối với trang web của bạn. Trang tải càng nhanh thì người dùng càng trung thành với trang - không ai thích phải chờ lâu và lãng phí nhiều lưu lượng truy cập.

Dịch vụ PageSpeed ​​​​Insights (dường như đã đóng) của Google được biết đến rộng rãi, cho phép bạn kiểm tra tốc độ tải của bất kỳ trang web đã xuất bản nào và dựa trên kết quả kiểm tra, đưa ra xếp hạng theo thang điểm hàng trăm điểm và đề xuất. Thông thường các đề xuất bao gồm tối ưu hóa và giảm thiểu Mã chương trình, nén hình ảnh, thiết lập bộ đệm máy chủ và trình duyệt, v.v.

Đối với tài nguyên nội dung trung bình trên và CMS miễn phí giống như WordPress (vâng, tôi đang nói về trang của tôi và hàng nghìn trang tương tự), các tùy chọn tối ưu hóa bị giới hạn trong việc cài đặt plugin bộ nhớ đệm và làm việc với hình ảnh. “Phím tắt” chủ đề và rút ngắn HTML, CSS và Mã JavaScript Không phải ai cũng có thể làm được, và những hành động như vậy thường dẫn đến nhiều lỗi khác nhau và mất chức năng.

Để làm việc với hình ảnh trong WordPress, có một số plugin chuyển đổi và nén hình ảnh có hoặc không bị mất, nhanh chóng hoặc theo yêu cầu. Theo tôi, plugin tốt nhất trong số này là EWWW Image Optimizer.

Thay vào đó, bạn có thể kết nối một số loại dịch vụ CDN để nội dung tĩnh, cụ thể là đồ họa, được phân phối từ máy chủ của bên thứ ba, giúp giảm nhẹ máy chủ lưu trữ tệp và tăng tốc độ tải trang bằng cách phân phối các nguồn. Trong trường hợp của tôi, điều này được thực hiện bởi mô-đun Photon như một phần của plugin JetPack cực kỳ phổ biến và bị chỉ trích định kỳ.

Tất cả điều này hoạt động ở những mức độ khác nhau, nhưng có phương pháp phổ quát tối ưu hóa hình ảnh cho bất kỳ trang web nào không chỉ chạy trên WordPress - tất cả những gì bạn cần là tài khoản Google để bắt đầu.

Thật kỳ lạ, chúng ta đang nói về Google Photos - một dịch vụ được thiết kế để lưu trữ ảnh chụp trên điện thoại thông minh Android và sao lưu hình ảnh, video của người dùng máy tính đã cài đặt một tiện ích đặc biệt.

Được giới thiệu bởi các chuyên gia trong trợ giúp PageSpeed ​​Insights quy trình của Google tối ưu hóa hình ảnh được mô tả như sau:

Tối ưu hóa hình ảnh của bạn

Quy tắc này được kích hoạt khi PageSpeed ​​Insights phát hiện ra rằng kích thước của hình ảnh trên trang có thể giảm xuống mà không làm giảm nhiều về chất lượng.

thông tin chung

Cố gắng giữ kích thước hình ảnh ở mức tối thiểu: điều này sẽ tăng tốc độ tải tài nguyên. Định dạng đúng và nén hình ảnh cho phép bạn giảm kích thước của chúng. Nhờ đó, người dùng có thể tiết kiệm thời gian và tiền bạc.

Tối ưu hóa cơ bản và nâng cao nên được thực hiện trên tất cả các hình ảnh. Là một phần của tối ưu hóa cơ bản, các trường không cần thiết, độ sâu màu bị giảm (đến giá trị tối thiểu có thể chấp nhận được), các nhận xét sẽ bị xóa và hình ảnh được lưu ở định dạng phù hợp. Tối ưu hóa cơ bản có thể được thực hiện bằng bất kỳ chương trình chỉnh sửa hình ảnh nào, chẳng hạn như GIMP. Tối ưu hóa nâng cao nén các tệp JPEG và PNG (không mất dữ liệu).

Sử dụng công cụ nén ảnh

Có những công cụ thực hiện nén bổ sung trên các tệp JPEG và PNG mà không làm giảm hoặc giảm chất lượng. Đối với các tệp JPEG, nên sử dụng jpegtran hoặc jpegoptim (chỉ có trên Linux, chạy với tùy chọn --strip-all). Đối với PNG, tốt hơn nên sử dụng OptiPNG hoặc PNGOUT.

Đoạn cuối dường như mô tả các công cụ mà máy chủ của Google sử dụng để tự động tối ưu hóa hình ảnh của người dùng được tải lên Photos. Nhân tiện, các tệp video có trong dịch vụ cũng được tối ưu hóa, nhưng điều này hoàn toàn không quan trọng do YouTube vẫn tiếp tục tồn tại.

Hãy xem một ví dụ. Hôm nay tôi đã chụp một con dao gấp cho lần xuất bản tiếp theo và chạy các bức ảnh thu được thông qua ứng dụng FastStone Xem ảnh"cắt xén" nghệ thuật + thay đổi kích thước chiều rộng lên tới 1280 pixel). Kết quả là một thư mục có tám tệp nặng hơn 3 (! megabyte).

Rõ ràng, một trình xem mới được cài đặt Hình ảnh FastStone Theo mặc định, trình xem sẽ lưu các ảnh đã chỉnh sửa ở chất lượng gần như tối đa, điều này dẫn đến “trọng lượng” tệp lớn một cách vô lý. Nhưng cách thiết lập như vậy trong trường hợp của chúng tôi là hoàn toàn hợp lý, bởi vì Thuật toán của Google họ nén ảnh mà không làm giảm chất lượng rõ ràng với tỷ lệ 100%, điều đó có nghĩa là hình ảnh có chất lượng tốt sẽ vẫn được giữ nguyên ngay cả sau khi tải lên Google Photos.

Để thuận tiện, tốt hơn nên đặt các ảnh đã tải lên vào album mới, có thể tải xuống toàn bộ gần như ngay lập tức sau khi tạo dưới dạng kho lưu trữ ZIP:

Nếu bạn so sánh ảnh được nén trong Google Photos với ảnh gốc, bạn sẽ tiết kiệm được đáng kể.

816 KB so với 3,27 MB. Đồng thời, theo tôi, chất lượng của các bức ảnh không hề bị ảnh hưởng chút nào. Facebook và VKontakte nên học hỏi Google cách tối ưu hóa ảnh. Hơn nữa, GPhotos còn được trang bị các công cụ chỉnh sửa ảnh tốt - từ việc áp dụng các bộ lọc cho đến cài đặt thủ côngđộ tương phản, độ sáng, độ bão hòa, v.v.

Do đó, Google Photos không chỉ là một đám mây tuyệt vời để lưu trữ và xuất bản ảnh mà còn công cụ đắc lực tối ưu hóa hình ảnh để xuất bản trên web. Chỉ trong trường hợp của WordPress, đừng quên tắt các plugin tối ưu hóa và mô-đun Photon jetpack tương tự, nếu không các bức ảnh đã được chuẩn bị để xuất bản sẽ bị nén thêm, điều này sẽ dẫn đến mất mát đáng chú ý chất lượng (ví dụ: xem ảnh chụp màn hình được chuyển qua Google Photos và sau đó là Photon trong bài đăng này).

Mô-đun của chúng tôi làm gì? Chức năng chính là tối ưu hóa hình ảnh nhiều nhất có thể mà hầu như không làm giảm chất lượng. Tại sao điều này lại cần thiết? Có một số lý do: Tiết kiệm không gian trông về lưu trữ, bởi vì theo quy định, hình ảnh sẽ “ăn” phần lớn nội dung đó. Việc tuân thủ các yêu cầu của PageSpeed ​​​​Insights - yêu cầu tối ưu hóa trang web, để tăng thứ hạng tối đa trong công cụ tìm kiếm. Ngoài ra: Vào tháng 7, Google sẽ ra mắt thuật toán Cập nhật tốc độ và sẽ cập nhật chỉ mục ưu tiên thiết bị di động. Là một phần của những cập nhật này, tốc độ tải trang web và tính di động sẽ trở thành một yếu tố xếp hạng quan trọng. Bạn có thể kiểm tra xem trang web của mình có vấn đề với kích thước hình ảnh hay không: tại đây và tại đây mô-đun OptiImg của chúng tôi cho phép bạn giảm kích thước hình ảnh trên trang web của mình xuống tối đa. đến 99% mà không có bất kỳ sự giảm chất lượng nào có thể nhìn thấy được. Hình ảnh nén tự động sẽ giúp bạn không phải lưu lại lâu và tẻ nhạt trong các ứng dụng của bên thứ ba. Không có hạn ngạch hoặc hạn chế, hãy mua giấy phép và chuyển đổi bao nhiêu tệp tùy thích mà không cần nạp thêm số dư hoặc. bất kỳ khoản thanh toán bổ sung nào! mã bản quyền giúp bạn có thể sử dụng dịch vụ của chúng tôi mà không bị hạn chế; sau khi khóa cấp phép hết hạn, bạn sẽ có thể truy cập vào dịch vụ nhưng bạn sẽ không thể nhận được các bản cập nhật cho mô-đun của chúng tôi. Ngoài ra, xin lưu ý rằng khi mua tiện ích mở rộng, bạn không cần thay đổi tên câu lạc bộ trong cài đặt mô-đun. Mô-đun này hoạt động theo nguyên tắc “đặt rồi quên nó đi”. Bất kỳ hình ảnh nào được tải lên khối thông tin sẽ được tự động nén! Tất cả hình ảnh được tối ưu hóa chỉ trong 1 cú nhấp chuột, tất cả hình ảnh được tải lên khối thông tin, thư viện phương tiện hoặc khi trao đổi với 1C sẽ được nén tự động. khoảnh khắc này Các định dạng JPEG và PNG được hỗ trợ. HTTPS - hỗ trợ giao thức. PHP7 - được hỗ trợ. Thời gian demo cho phép bạn xử lý 1000 hình ảnh mỗi ngày, sử dụng mô-đun của chúng tôi cho 1C - Bitrix, bạn có thể kiểm tra mức độ nén lên tới 500 nghìn hình ảnh! trên trang web của mô-đun. Xin lưu ý rằng mô-đun này gần như được viết hoàn toàn bằng D7, trên các phiên bản 1C - Bitrix dưới 16 tuổi - nó có thể hoạt động không chính xác. Làm thế nào để bắt đầu sử dụng nó? Để giúp cuộc sống của bạn dễ dàng hơn, nhóm của chúng tôi luôn sẵn sàng cài đặt một mô-đun chạy 1C - Bitrix trên trang web của bạn và tự mình thực hiện tối ưu hóa, để thực hiện việc này, sau khi mua, hãy gửi yêu cầu đến e-mail của chúng tôi - [email được bảo vệ] với chủ đề "Cài đặt", trong phần nội dung thư hãy ghi rõ mã phiếu giảm giá và quyền truy cập vào trang web mà bạn muốn thực hiện công việc. Khách hàng thân mến! viết trong các cuộc thảo luận và trên địa chỉ email - [email được bảo vệ], chúng tôi luôn sẵn lòng giúp đỡ bạn và nhận nhận xét!

Từ Tập đoàn Alfa

Mua: 2.000 1.800 chà.

Ảnh chụp màn hình

Sự miêu tả

Thông số kỹ thuật

Xuất bản: 17/10/2015 Cập nhật: 28/03/2019 Phiên bản: 1.3.6 Đã cài đặt: Hơn 1000 lần Phiên bản phù hợp: “Trang web đầu tiên”, “Bắt đầu”, “Tiêu chuẩn”, “Doanh nghiệp nhỏ”, “Chuyên gia”, “Doanh nghiệp”, “ Cổng thông tin doanh nghiệp ", "Doanh nghiệp" Khả năng thích ứng: Không Hỗ trợ tổng hợp: Không

Sự miêu tả

Mô-đun của chúng tôi làm gì?

Chức năng chính là tối ưu hóa hình ảnh nhiều nhất có thể mà hầu như không làm giảm chất lượng.

Nó dùng để làm gì?

Có một số lý do:

1. Tiết kiệm dung lượng trống trên hosting, vì... Theo quy định, chính những hình ảnh đó mới “ăn” phần lớn.
2. Tuân thủ các yêu cầu Thông tin chi tiết về tốc độ trang - yêu cầu tối ưu hóa trang web, để có thứ hạng tối đa trong công cụ tìm kiếm.
3. Tăng tốc độ tải trang bằng cách giảm lưu lượng tải xuống

Bên cạnh đó:

Bạn có thể kiểm tra xem trang web của mình có vấn đề về kích thước hình ảnh hay không:

Mô-đun của chúng tôi OptiImg cho phép bạn giảm kích thước hình ảnh trên trang web lên tới 99% mà không làm giảm chất lượng.

Nén ảnh tự động sẽ lưu lại giúp bạn khỏi việc lưu lại lâu dài và tẻ nhạt trong các ứng dụng của bên thứ ba.

Không có hạn ngạch hoặc hạn chế, hãy mua giấy phép và chuyển đổi bao nhiêu tệp bạn cần mà không cần nạp số dư hoặc bất kỳ khoản thanh toán bổ sung nào!

Kính gửi khách hàng, xin lưu ý rằng mã cấp phép cho phép bạn sử dụng dịch vụ của chúng tôi mà không bị hạn chế; sau khi mã cấp phép hết hạn, bạn sẽ có thể truy cập vào dịch vụ nhưng bạn sẽ không thể nhận được các bản cập nhật cho mô-đun của chúng tôi.

Ngoài ra, xin lưu ý rằng khi mua tiện ích mở rộng, không cần thay đổi tên câu lạc bộ trong cài đặt mô-đun.

Mô-đun này hoạt động theo nguyên tắc “đặt rồi quên”. Mọi hình ảnh được tải lên khối thông tin sẽ được tự động nén!

Tất cả hình ảnh đều được tối ưu chỉ trong 1 click, mọi hình ảnh tải lên khối thông tin, thư viện media hoặc khi trao đổi với 1C sẽ được nén tự động.

Hiện tại các định dạng JPEG và PNG được hỗ trợ.

HTTPS - giao thức được hỗ trợ.

PHP7 - được hỗ trợ.

Thời gian demo cho phép bạn xử lý 1000 hình ảnh.

Mỗi ngày với sự giúp đỡ của chúng tôi mô-đun cho 1C - Bitrix, xử lý lên tới 500 nghìn hình ảnh!

Bạn có thể kiểm tra mức độ nén trên trang web của mô-đun.

Xin lưu ý rằng mô-đun gần như hoàn toàn viết bằng D7, trên các phiên bản 1C - Bitrix dưới 16 tuổi - có thể không hoạt động chính xác.

Làm thế nào để bắt đầu sử dụng nó?

Để giúp cuộc sống của bạn dễ dàng hơn, nhóm của chúng tôi luôn sẵn sàng cài đặt một mô-đun chạy 1C - Bitrix trên trang web của bạn và tự mình thực hiện tối ưu hóa, để thực hiện việc này, sau khi mua, hãy gửi yêu cầu đến e-mail của chúng tôi - [email được bảo vệ] với chủ đề "Cài đặt", phần nội dung của bức thư cho biết mã phiếu giảm giá và quyền truy cập vào trang web mà bạn muốn thực hiện công việc.

Kính gửi Quý khách hàng!

Đừng quên chia sẻ trải nghiệm của bạn khi sử dụng sản phẩm của chúng tôi, để lại đánh giá, viết thư cho các cuộc thảo luận và gửi tới địa chỉ email của chúng tôi - [email được bảo vệ], chúng tôi luôn sẵn lòng trợ giúp bạn và nhận phản hồi!

Đánh giá (10)

Đánh giá chung: Tổng số đánh giá: 10

Một giải pháp tốt để tối ưu hóa hình ảnh

Kể từ ngày 25 tháng 2 năm 2019, giải pháp hoàn toàn không hoạt động, ngay cả trên trang web http://www.optiimg.ru/ của họ, bạn không thể nén trực tiếp hình ảnh, nó sẽ bị treo sau khi tải.

Chúng tôi xin lỗi, giải pháp đang hoạt động, nhưng nó không hoạt động trên dịch vụ lưu trữ của chúng tôi, vấn đề không nằm ở giải pháp mà là một người từ bộ phận hỗ trợ kỹ thuật đã làm rõ, “vấn đề nằm ở cấp độ truyền thông mạng của các trung tâm lưu trữ. ” Bản thân bộ phận hỗ trợ kỹ thuật tỏ ra rất tích cực trong việc giải quyết vấn đề của chúng tôi và đã đích thân đàm phán với nhà cung cấp dịch vụ lưu trữ trang web của chúng tôi.

Mô-đun này thật tuyệt vời!!!

Như họ đã viết bên dưới, tôi đồng ý, nhưng đây là quyết định duy nhất mà tôi không hối hận! Mô-đun hoạt động nhanh chóng và không bị treo. Tôi đã làm sạch trang web thêm 3 GB. Đó là 5 GB và trở thành 2 GB.
Siêu mô-đun, làm tốt lắm!) Tôi khuyên bạn nên)

Hỗ trợ kỹ thuật tuyệt vời và mô-đun tuyệt vời

Tôi rất ngạc nhiên trước sự trợ giúp ngay lập tức từ bộ phận hỗ trợ kỹ thuật; họ đã phản hồi ngay lập tức vào tối Chủ nhật.
Mô-đun này rất tuyệt, tôi đã tìm kiếm một giải pháp tương tự từ lâu. Tôi khuyên bạn nên!

Xin chào

Bộ phận hỗ trợ kỹ thuật hoạt động ngay lập tức, trong vòng 10 giây họ đã phản hồi trong cuộc trò chuyện trực tuyến và trả lời các câu hỏi! Chương trình cháy lửa, nhất là khi có nhiều hình ảnh! Tôi giới thiệu cho mọi người!

Hỗ trợ kỹ thuật tuyệt vời

Có vấn đề với hoạt động của mô-đun, tôi đã liên hệ với bộ phận hỗ trợ kỹ thuật. support đã giải quyết vấn đề rất nhanh chóng, cảm ơn bạn.

Quyết định tốt

Giải pháp hoàn hảo! Các anh chàng đã tự mình cài đặt mọi thứ và nén hình ảnh xuống 40%. Cảm ơn!

Cho đến nay quyết định mua hàng duy nhất chúng tôi không hối hận

Cho đến nay đây là quyết định mua hàng duy nhất mà chúng tôi không hối hận. Đã xóa 5 GB.

Mô-đun rất hữu ích và hỗ trợ kỹ thuật tuyệt vời!

Nhờ mô-đun này, tốc độ của trang web có thể tăng gấp đôi, điều này rất quan trọng đối với một cửa hàng trực tuyến có số lượng hình ảnh lớn. Hỗ trợ kỹ thuật đã giúp giải quyết nhanh chóng mọi vấn đề phát sinh và kiên nhẫn giải thích mọi chi tiết.

Mô-đun tuyệt vời, hỗ trợ tuyệt vời.

Chúng tôi đã mua mô-đun, bộ phận hỗ trợ ngay lập tức tham gia và thiết lập mọi thứ. Nhờ tối ưu hóa hình ảnh, Tốc độ trang của Google mang lại cho trang web số điểm hơn 80 trên hầu hết các trang. Tôi giới thiệu giải pháp này cho mọi người.

Mô-đun tuyệt vời

Tôi đã thử nghiệm trang web trên Google và hóa ra nó có những bức ảnh lớn. Tôi đang suy nghĩ về cách tối ưu hóa nó. Một giải pháp đơn giản và rẻ tiền đã được tìm ra. Mấy anh bên support tự cài, ghi ra hết, giờ tải ảnh nó tự động chạy và nén mọi thứ thành kích thước tối ưu. Tôi ngay lập tức cài đặt nó trên trang thứ hai và rất hài lòng. Tôi khuyên bạn nên.

Thảo luận (76)

Thảo luận (76)

Tôi đã mua, trả tiền, tối ưu hóa hình ảnh. Mọi thứ đều ổn, ngoại trừ một trục trặc mà mô-đun này gây ra. Cụ thể là khi tôi cố gắng chỉnh sửa một sản phẩm từ phía trước trang web, một lỗi nghiêm trọng đã xuất hiện

Hình ảnh chi tiết:
Truy cập vào thuộc tính tĩnh không được khai báo: Alfa1c\Optiimg\OptiImg::$_1260989302 (0)
/home/bitrix/www/bitrix/modules/alfa1c.optiimg/include.php:1
#0: OptiImgEvents::CompressOnResize(mảng, mảng, NULL, chuỗi, chuỗi, boolean)
/home/bitrix/www/bitrix/modules/main/classes/general/module.php:490
#1: Thực thiModuleEventEx(mảng, mảng)
/home/bitrix/www/bitrix/modules/main/classes/general/file.php:1705
#2: CAllFile::ResizeImageGet(mảng, mảng, số nguyên, boolean)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinputunclouder.php:40
#3: Bitrix\Main\UI\FileInputUnclouder::getSrcWithResize(mảng, mảng)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinput.php:477
#4: Bitrix\Main\UI\FileInput->getFile(chuỗi, chuỗi, boolean)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinput.php:283
#5: Bitrix\Main\UI\FileInput->show(array, boolean)
/home/bitrix/www/bitrix/modules/iblock/admin/iblock_element_edit.php:2539
#6: bao gồm(chuỗi)
/home/bitrix/www/bitrix/admin/cat_product_edit.php:3

Nó không phải lúc nào cũng xuất hiện, nhưng rất thường xuyên. Đồng thời, đôi khi trên cùng một sản phẩm lúc đầu có trục trặc, nhưng lần thứ hai hoặc thứ ba thì không có trục trặc.

Sergey Zabotin, xét thấy tên hàm bị xáo trộn, bạn tiếp tục sử dụng phiên bản demo, gỡ bỏ hoàn toàn mô-đun và cài đặt lại, nếu lỗi vẫn còn, hãy viết thư cho chúng tôi theo địa chỉ [email được bảo vệ] chúng tôi sẽ giúp bạn.

Mô-đun này có những khả năng gì nếu hình ảnh được lưu trữ trên đám mây? Ví dụ, nếu đó là Selectel thì sao?
Theo tôi hiểu, mô-đun nén cả trong quá trình tải và thay đổi kích thước, nhưng không nén nếu hình ảnh đã ở trên “đám mây”?
Kế hoạch của bạn theo hướng này là gì?

Gavril Scriabin, CMS tải tệp trực tiếp lên đám mây của bên thứ ba; vì lý do rõ ràng, mô-đun của chúng tôi không thể hoạt động trên đám mây, chỉ khi bạn xử lý tệp trước rồi chuyển chúng sang đám mây;

Nó sẽ hoạt động với đám mây Bitrix, bởi vì... Các tệp Bitrix trên đám mây được cập nhật theo thời gian.

Chào buổi chiều
Khóa cấp phép có hiệu lực trong khoảng thời gian nào? (cập nhật)

Ivan Prilepin, Bản cập nhật có sẵn trong 1 năm, quyền truy cập vào máy chủ không bị giới hạn về thời gian.

Phiên bản 1.2.8.

Roman Petrov, Hãy viết thư cho chúng tôi qua email, chúng tôi sẽ giải quyết vấn đề.

Mình mua bộ tối ưu hóa cách đây 1 năm, sau đó rất ít sử dụng, giờ muốn dùng lại nhưng lại bị lỗi ủy quyền?! Tôi có nên mua lại không?
Tại sao tôi nên mua nó mỗi năm cho 100 bức ảnh?

Roman Petrov, Bạn có thể mua tiện ích mở rộng nếu muốn cập nhật mô-đun; nếu phiên bản mô-đun cũ hơn 1.2.2 thì bạn sẽ phải thực hiện cập nhật, vì Trong phiên bản này đã có một sự tái cấu trúc lớn; máy chủ mà mô-đun của chúng tôi truy cập đã được thay đổi. Nếu là của bạn Phiên bản hiện tại mới hơn, sau đó viết thư cho chúng tôi qua email, [email được bảo vệ]- hãy tìm hiểu tại sao xảy ra lỗi.

Có gì mới

1.3.6 (28.03.2019)	Đã sửa lỗi nhỏ trong các sự kiện
1.3.5 (15.03.2019)	Đã thêm tùy chọn để thay thế tập tin an toàn hơn Lớp viết lại để làm việc với các sự kiện
1.3.4 (20.01.2019)	Đã thêm hoạt ảnh vào thanh tiến trình Đã xóa các phương thức không dùng nữa
1.3.3 (12.06.2018)	Kiểm tra GPSI đã được chuyển sang trang phân tích
1.3.2 (06.06.2018)	Sửa lỗi nhỏ
1.3.1 (05.06.2018)	Đã thêm khả năng kiểm tra trang trong GPSI Tùy chọn nén ImageJpeg được đánh dấu là không dùng nữa, tùy chọn bật đã bị xóa
1.3.0 (24.04.2018)	Đã sửa lỗi với thư mục Cyrillic. Cải tiến giao diện nhỏ
1.2.9 (22.02.2018)	Đã thêm cách xử lý chính xác tình huống khi thư viện cURL không được cài đặt trên máy chủ.
1.2.8 (24.01.2017)	Đã sửa lỗi với quyền truy cập mô-đun
1.2.7 (14.12.2017)	Đã khắc phục lỗi khiến các tệp tạm thời bị tràn.
1.2.6 (04.12.2017)	Cải thiện sự ổn định
1.2.5 (15.11.2017)	Đã thay đổi cách lấy file nén
1.2.4 (30.10.2017)	Đã sửa lỗi sự kiện nén
1.2.3 (25.10.2017)	Đã sửa lỗi trong tệp ngôn ngữ
1.2.2 (24.10.2017)	Thay đổi cấu trúc mô-đun Tái cấu trúc cho D7
1.2.1 (22.10.2017)	Đã thêm khả năng thiết lập cổng Đã thêm bộ lọc lỗi và khả năng xóa nhật ký xử lý
1.2.0 (20.10.2017)	Phương pháp viết lại Cải thiện hiệu suất Đã thêm đa luồng
1.1.9 (17.10.2017)	Cải thiện hiệu suất ổn định Lỗi cố định
1.1.8 (03.10.2017)	Đã sửa lỗi lưu vị trí Đã sửa lỗi gửi số liệu thống kê
1.1.7 (01.10.2017)	Tái cấu trúc mô-đun chính Mô-đun đã được viết lại cho D7 Cấu trúc lớp đã thay đổi Cải thiện sự ổn định Cải thiện hiệu suất Đã xóa chế độ quản lý tệp cũ Đã thêm hiển thị lỗi chính xác Đã sửa lỗi nhỏ
1.1.6 (22.04.2017)	Tái cấu trúc mã nhỏ cho D7 Đã khắc phục lỗi khiến quá trình nén nhanh chóng có thể không hoạt động trong một số điều kiện nhất định. Đã thêm khả năng loại trừ các thư mục
1.1.5 (13.04.2017)	Lỗi cố định Giờ đây, bạn có thể bật/tắt tính năng nén nhanh chóng trong cài đặt mô-đun. CẢNH BÁO: nếu bạn đang sử dụng các sự kiện nén trong init.php, trước khi cài đặt bản cập nhật này họ cần phải được loại bỏ!.
1.1.4 (21.03.2017)	Đã loại bỏ nhu cầu sử dụng allow_fopen
1.1.3 (19.02.2017)	Đã thêm khả năng đăng nhập Đã thêm khả năng phân tích trang web trước khi bắt đầu tối ưu hóa.
1.1.2 (14.02.2017)	Đã sửa lỗi dẫn đến thay thế hình ảnh khi hộp kiểm trong khối thông tin được chọn, tạo hình ảnh từ hình ảnh chi tiết ngay cả khi nó đã được tạo.
1.1.1 (30.01.2017)	Đã thêm khả năng chỉ định thư mục cụ thểở chế độ đơn giản hóa Đã khắc phục lỗi khiến số liệu thống kê không được gửi đến máy chủ
1.1.0 (30.01.2017)	Đã sửa lỗi gửi tệp không dừng nếu thiếu khóa. Đã khắc phục lỗi trong đó các tệp nằm trong thư mục bao gồm các thư mục con trống, không trống không được nén. Đã thêm khả năng tiếp tục quá trình từ tệp được xử lý cuối cùng. Cải thiện hiệu suất. Số liệu thống kê hiện được gửi khi trang mô-đun được tải.
1.0.9 (20.01.2017)	đã sửa lỗi nghiêm trọngở chế độ quản lý tập tin. Đã sửa lỗi thư mục tải lên bị tắc khi xử lý không thành công. Đã thêm khả năng không lưu giữ số liệu thống kê.
1.0.8 (15.12.2016)	Đã thêm hỗ trợ cho sự kiện OnAfterResizeImage để nén hình ảnh được sửa đổi bằng phương pháp ResizeImageGet.
1.0.7 (14.12.2016)	Đã sửa lỗi với mẫu điều hướng trang
1.0.6 (19.10.2016)	Đã sửa lỗi làm việc với phần mở rộng chữ hoa. Đã thêm khả năng bỏ qua tập tin bị hỏngở chế độ đơn giản hóa.
1.0.5 (25.04.2016)	Giao diện mới
1.0.4 (16.02.2016)	Đã khắc phục sự cố với lỗi hiển thị
1.0.3 (14.02.2016)	Giao diện được thiết kế lại Đã thêm khả năng nén bằng chức năng imagejpeg Lỗi cố định Một số chức năng đã được cải thiện và những chức năng mới đã được thêm vào.
1.0.2 (02.02.2016)	Đã thêm điều hướng trang cho các phần

Cài đặt

Việc cài đặt là tiêu chuẩn từ Marketplace.

Mô-đun được truy cập thông qua phần

Dịch vụ -> Tối ưu hóa hình ảnh hoặc theo liên kết:
/bitrix/admin/optiimg_admin.php

Cài đặt mô-đun:
/bitrix/admin/settings.php?lang=ru&mid=alfa1c.optiimg&mid_menu=1

Xin lưu ý rằng để mô-đun hoạt động, bạn phải nhập khóa nhận được qua email sau khi mua vào trường “Khóa”.

Giải pháp sử dụng thư viện cURL, theo quy tắc, thư viện này được bật theo mặc định; nếu không, hãy liên hệ với nhà cung cấp dịch vụ lưu trữ hoặc quản trị viên hệ thống của bạn để được trợ giúp.

Chúng tôi cũng lưu ý bạn rằng tốc độ hoạt động phụ thuộc trực tiếp vào tốc độ của hệ thống con tệp của máy chủ và kênh liên lạc.

Mô-đun này cũng có thể nén hình ảnh một cách nhanh chóng, chẳng hạn như những hình ảnh được thêm vào phần tử khối thông tin. Để thực hiện việc này, trong cài đặt mô-đun, hãy chọn các hộp bên cạnh Và Nén hình ảnh khi thay đổi kích thước.

Ủng hộ

Cách sử dụng mô-đun của chúng tôi một cách chính xác:

1. Cài đặt mô-đun từ thị trường.
2. Đi tới /bitrix/admin/settings.php?lang=ru&mid=alfa1c.optiimg&mid_menu=1
3. Đặt chất lượng nén, chọn các hộp Nén hình ảnh khi tải lên Và Nén hình ảnh khi thay đổi kích thước, nếu trang web của bạn hoạt động trên giao thức https sau đó nhập 443 vào trường cổng hoặc để trống.
4. Đi đến quản lý tập tin và xóa thư mục /upload/resize_cache/
5. Đi đến giao diện làm việc với mô-đun /bitrix/admin/optiimg_admin.php
6. Nhấn nút Tối ưu hóa

Phân phối số liệu xếp hạng không phải từ khóa theo thang điểm từ 0 đến 9, trong đó 0 nghĩa là yếu tố không có tác động đến thứ hạng trang và 9 nghĩa là yếu tố có tác động mạnh:

Hãy tưởng tượng thứ hạng tìm kiếm trên trang web của bạn sẽ được cải thiện như thế nào nếu bạn giảm thời gian tải mỗi trang xuống ít nhất 10%. Điều này có thể đưa bạn đến trang đầu tiên của công cụ tìm kiếm hoặc thậm chí là ba kết quả hàng đầu - điều này sẽ làm tăng đáng kể thu nhập của bạn.

Tại sao chi phí hosting phụ thuộc vào kích thước hình ảnh?

Hình ảnh lớn cũng ảnh hưởng thông lượng lưu trữ. Vì vậy, nếu bạn có lưu lượng truy cập cao, khi đó hình ảnh nặng sẽ phải chịu thêm chi phí. Có một chuyện khi 50 người mỗi ngày tải lên những bức ảnh có dung lượng 1 MB, nhưng nếu có 5.000 bức ảnh như vậy thì sao?

Vì vậy, việc giảm khối lượng hình ảnh sẽ giúp bạn tiết kiệm tiền. Sử dụng bộ nhớ đệm trang web hoặc mạng phân phối nội dung. Nhưng việc cài đặt chúng sẽ cần đến sự trợ giúp của các nhà phát triển web, điều này chỉ có thể thực hiện được ở một mức độ nhất định. Do đó, hãy tự học cách giảm trọng lượng của tệp hình ảnh - nó rất hữu ích và có lợi. Đọc phần dưới đây để biết thông tin về cách thực hiện việc này.

Các định dạng hình ảnh cơ bản

Không có nhiều định dạng hình ảnh được sử dụng trên tài nguyên web. Hãy xem xét 5 cái chính:

• .jpg;
• .png;
• .gif;
• .svg;
• .bmp.

Hầu hết hình ảnh trên Internet đều có một trong năm định dạng này. Bằng cách truy cập bất kỳ trang nào và nhấp chuột phải vào hình ảnh, bạn có thể mở nó trong tab mới:

Bằng cách này, bạn có thể dễ dàng xác định định dạng:

Đôi khi việc tìm ra định dạng ảnh từ máy tính không phải là điều dễ dàng vì hệ điều hành thường ẩn phần mở rộng của file theo mặc định. Sau đó bạn vào cài đặt máy tính và bật hiển thị chế độ mở rộng file.

Trên máy Mac, đi tới Finder > Tùy chọn > Nâng cao rồi chọn hộp bên cạnh “Hiển thị tất cả phần mở rộng tên tệp”:

Trên Windows 10, mở Bắt đầu, sau đó mở File Explorer > Xem > Tùy chọn > Xem, bỏ chọn Ẩn phần mở rộng của các loại tệp đã biết và chọn nút radio Hiển thị. Các tệp ẩn, thư mục và đĩa." Sau đó nhấp vào “OK”:

Tính năng hiển thị đuôi file sẽ hữu ích nếu bạn định tối ưu hóa nhiều hình ảnh. Ngoài ra, điều này sẽ làm giảm khả năng xảy ra lỗi.

Ví dụ: nếu bạn quyết định chuyển đổi ảnh từ .jpg sang .png, chức năng hiển thị tiện ích mở rộng sẽ giúp bạn không bị nhầm lẫn giữa các tệp nằm cạnh nhau trong một thư mục.

Bây giờ hãy nói về cách xác định trọng lượng của hình ảnh và kích thước tổng thể của nó. Trên máy Mac, chỉ cần nhấp chuột phải vào hình ảnh và chọn Get Info:

Hãy thảo luận về những ưu điểm và nhược điểm của từng định dạng. Các loại tệp khác nhau có chất lượng tối ưu cho một số dự án chứ không phải cho các dự án khác.

.JPG

Tên đầy đủ: Nhóm chuyên gia nhiếp ảnh chung (theo tên tổ chức phát triển).

Năm phát hành: 1992.

Loại tệp hình ảnh phổ biến nhất. Hầu hết điện thoại thông minh và máy ảnh kĩ thuật số Họ chụp ảnh trong đó. Tất nhiên, .JPG sẽ tốt hơn nếu bạn cần giảm trọng lượng tệp trong khi vẫn duy trì chất lượng hình ảnh.

Nhân tiện, bạn có thể thay đổi phần cuối của tên tệp từ .JPEG thành .JPG và sẽ không có thảm họa nào xảy ra.

Tuy nhiên, nếu bạn chỉ tải một bức ảnh lên từ điện thoại hoặc máy ảnh của mình và cố gắng chèn nó vào một trang web mà không tối ưu hóa, bạn sẽ gặp phải một bất ngờ khó chịu. Hình ảnh JPG không nén từ điện thoại của bạn hoặc máy ảnh kỹ thuật số nặng rất nhiều. Khi nói “nhiều”, chúng tôi muốn nói đến trọng lượng từ 1 đến 10 MB (đôi khi nhiều hơn).

Dưới đây là một ví dụ.JPG:

Đây là bức ảnh chụp bức tranh "Irises" của Vincent van Gogh. Một ví dụ điển hình về When.JPG là sự lựa chọn tối ưu. Bức tranh đầy màu sắc, không có khoảng trống nào cả, không có đường thẳng. Chỉ JPG mới giúp bạn lưu giữ được vẻ đẹp lộng lẫy này trong một tệp có dung lượng nhẹ.

• nếu nghi ngờ nên sử dụng định dạng nào, hãy sử dụng .JPG;
• Đây là định dạng tốt nhất để lưu trữ ảnh;
• Kích thước của tệp như vậy được giảm mà không làm giảm chất lượng.

.PNG

Tên đầy đủ: Đồ họa mạng di động.

Năm phát hành: 1996.

Định dạng .PNG vừa là một lời nguyền vừa là một điều may mắn. Đối với các nhà thiết kế web, nó cung cấp một giải pháp thay thế tuyệt vời cho .GIF.

Định dạng này phù hợp với những hình ảnh có kích thước lớn, nhưng không phù hợp với những bức ảnh hoặc hình ảnh có nhiều màu sắc và chi tiết (như bức tranh của Van Gogh).

PNG hiển thị tốt các đồ thị, hình vẽ và sơ đồ đơn giản. Ở định dạng này, hình ảnh trên chỉ có kích thước 34 KB. Xin lưu ý rằng đồ họa thông tin trông đẹp hơn và nhẹ hơn khi được lưu ở định dạng .PNG.

Hình ảnh PNG có tỷ lệ tốt. GIF có các tham số tương tự như PNG nhưng không có tỷ lệ tốt: những hình minh họa như vậy chứa đầy đồ tạo tác và chúng làm hỏng hình thức thẩm mỹ của trang.

• lý tưởng cho các đồ thị, bản vẽ và sơ đồ đơn giản;
• tốt cho đồ họa thông tin;
• quy mô tốt;
• không phù hợp lắm với ảnh màu có nhiều chi tiết;
• Máy tính Mac chụp ảnh màn hình ở định dạng .PNG theo mặc định.

.GIF

Tên đầy đủ: Graphics Interchange Format (định dạng trao đổi hình ảnh).

Năm phát hành: 1987.

GIF - rất định dạng cũ, được phát triển trước sự ra đời của Internet công cộng. Anh ấy đã làm tốt công việc của mình khi Mạng toàn cầuđã tương đối mới.

Today.GIF lý tưởng cho các hình ảnh nhỏ: biểu tượng, hình ảnh nút, hinh nên, hình minh họa trang trí - vì nó cung cấp kích thước tệp cực kỳ nhỏ. Số lượng không tính bằng megabyte hoặc kilobyte mà tính bằng byte. Thực tế là không có gì.

Bên trái là ví dụ về đường viền cửa sổ trang trí được làm từ các hình vuông .GIF nhỏ. Mỗi ô vuông chỉ nặng 54 byte

Vấn đề với định dạng là những hình ảnh như vậy không có tỷ lệ tốt. Những gì xảy ra với chúng được gọi là pixel hóa. Với sự ra đời của .PNG, ngày nay việc lưu hình ảnh dưới dạng .GIF chẳng còn ý nghĩa gì nữa. Nhưng còn hình ảnh hoạt hình thì sao?

Tất cả chúng ta đều yêu thích cái gọi là ảnh động GIF. Tuy nhiên, theo quy luật, chúng nặng rất nhiều - khoảng 2 MB trở lên. Các blogger có xu hướng sử dụng hình ảnh động trong bài viết, hy sinh thời gian tải cho việc này. Nhưng nếu nó đáng thì tại sao không!

• định dạng lỗi thời, được thay thế bằng .PNG;
• sử dụng ảnh động GIF như là phương sách cuối cùng - chúng rất nặng;
• GIF hoàn hảo cho những người nhỏ bé yếu tố trang trí các trang không được thiết kế để mở rộng quy mô.

.SVG

Tên đầy đủ: Đồ họa Vector có thể mở rộng.

Năm phát hành: 2001.

Các tệp .SVG thật đáng kinh ngạc. Như tên cho thấy, những hình ảnh này rất tốt cho việc chia tỷ lệ và có thể nặng rất ít.

Tuy nhiên, có một nhược điểm đáng kể - ảnh không thể là vector. Nhưng bất kỳ hình ảnh vector nào khác đều có thể được lưu ở định dạng này (nếu nó được tạo ở định dạng chương trình adobe Illustrator hoặc Corel Draw, sau đó có thể xuất sang .SVG).

Định dạng này tốt cho mạch đơn giản, đồ thị và biểu đồ. Logo và biểu tượng cũng thường được lưu dưới dạng .SVG. Thông thường, chúng phải đơn giản và/hoặc có thiết kế trừu tượng.

Logo của NASA được lưu ở định dạng .SVG và chỉ nặng 14 KB. Mặc dù, như bạn có thể thấy, bản thân hình ảnh đã lớn và khá rõ ràng. Đó là vẻ đẹp của đồ họa vector. Sẽ không có pixel cho dù bạn thay đổi kích thước hình ảnh bao nhiêu.

Vấn đề chính với định dạng này là những hình ảnh này hầu như luôn được tạo ra bởi các nghệ sĩ có kinh nghiệm (tất nhiên trừ khi bạn tải xuống một tệp như vậy từ một số trang web). Nhưng nếu bạn đang làm việc trên một trang web có nhiều lưu lượng truy cập, bạn nên đầu tư nguồn lực vào việc tạo tệp SVG nếu bạn thực sự cần chúng.

• kích thước nhỏ;
• phù hợp với các trang web đáp ứng yêu cầu hình ảnh có thể thu nhỏ mà không làm giảm chất lượng;
• không phù hợp để chụp ảnh;
• đòi hỏi kỹ năng thiết kế phát triển để sử dụng đúng.

.BMP

Tên đầy đủ: Windows Bitmap, Bitmap Picture.

Năm phát hành: 1985

BMP - định dạng lưu trữ hình ảnh raster, đã phát triển bởi Microsoft. Đây là định dạng tệp lâu đời nhất trên Internet.

Nếu bạn đã từng sử dụng chương trình Microsoft Paint, sau đó tạo các tệp có phần mở rộng .BMP. Số đông trình duyệt hiện đại hiển thị các tệp có định dạng này mà không gặp vấn đề gì, nhưng chúng hiếm khi được sử dụng. Các tệp này nặng và dễ bị tạo pixel khi thu nhỏ tỷ lệ.

Kết luận: Không nên sử dụng định dạng này.

Giảm trọng lượng của hình ảnh mà không làm giảm chất lượng

Các công cụ sau đây sẽ giúp bạn ở đây.

Adobe Photoshop là tiêu chuẩn công nghiệp để chỉnh sửa hình ảnh. Cái này chương trình trả phí, có giá 19,99 USD hàng tháng. Nếu bạn không muốn trả tiền, bạn có thể tìm Adobe CS6 trực tuyến, phiên bản mới nhất chương trình không yêu cầu phí đăng ký.

Một trong những cách hữu ích nhất để tối ưu hóa hình ảnh Tính năng của Photoshop— lưu hình ảnh ở một trong các định dạng web (“Save for Web”). Cho phép bạn nhanh chóng chuyển đổi trọng lượng và chất lượng hình ảnh cho nhiều loại khác nhau các tập tin.

Đầu tiên, hãy mở hình ảnh bạn định tối ưu hóa trong chương trình:

Nếu bạn sử dụng hình ảnh trên blog của mình, việc thay đổi kích thước chúng hầu như luôn có ý nghĩa. Hầu như tất cả các mạng xã hội đều có yêu cầu riêng về kích thước của hình ảnh được xuất bản. Bằng cách đưa tham số này phù hợp với tham số được yêu cầu, bạn sẽ đạt được hiệu suất tối đa trang.

Hãy xem một ví dụ. Giả sử bạn muốn chèn một hình ảnh vào blog và bắt đầu thay đổi kích thước của nó.

Độ rộng trường nội dung: 800 pixel

Hãy tưởng tượng rằng bạn muốn đăng ảnh của một người bạn lên blog của mình. Chiều rộng hình ảnh là 4.000 pixel. Rõ ràng, kích thước lớn hơn nhiều lần so với yêu cầu. Và khả năng trọng lượng tập tin sẽ nhỏ là cực kỳ nhỏ.

Bạn có thể thay đổi kích thước thành rộng 800 pixel - nhưng đôi khi, ngược lại, đáng để chia tỷ lệ thành 1000 pixel. TRÊN Màn hình võng mạc cài đặt trên Mac, khá dễ nhận dạng hình ảnh Chất lượng thấp. Vì vậy, hầu hết các nhà thiết kế đều có một quy tắc bắt buộc: chiều rộng của hình ảnh ít nhất phải gấp đôi chiều rộng của trường nội dung. Điều này được thực hiện để đảm bảo hình ảnh trông rõ nét ngay cả trên màn hình Apple.

Vấn đề duy nhất là trọng lượng của hình ảnh như vậy sẽ rất lớn, điều này chắc chắn sẽ làm tăng thời gian tải và giảm chuyển đổi.

Trong trường hợp của chúng tôi, chiều rộng hình ảnh là 8.000 pixel.

Để thay đổi kích thước của nó, trên máy Mac, bạn cần nhấp vào tab “Hình ảnh”, sau đó chọn “Kích thước hình ảnh”:

Tại đây bạn có thể chọn định dạng tệp cuối cùng và xác định các đặc điểm khác của hình ảnh, tối ưu hóa nó tốt hơn cho mạng. Bước đầu tiên là xác định loại tệp nào phù hợp nhất với nhu cầu của bạn.

Hãy thử từng định dạng, chỉ định kích thước của hình ảnh đã lưu để xem trọng lượng tệp cuối cùng. Bằng cách chọn JPEG, bạn có thể chỉ định chất lượng của hình ảnh cuối cùng:

Sau khi thử tất cả các định dạng, hãy chọn định dạng có kích thước tệp nhỏ nhất và chất lượng cao như nhau. Trong ví dụ, định dạng này hóa ra là .JPG. Chính trong đó đã quyết định lưu hình ảnh:

Xin lưu ý rằng kích thước tệp ở định dạng .PNG là 731 KB!

Các định dạng khác có thể thích hợp hơn. Nhưng nếu bạn đang tối ưu hóa đồ họa và hình vẽ thì .PNG sẽ là lựa chọn tối ưu.

Với những người không có Photoshop thì dịch vụ trực tuyến miễn phí TinyPNG là phù hợp. Tất nhiên, tối ưu hóa hoàn hảo sẽ không hiệu quả, nhưng bạn có thể giảm trọng lượng tệp ở đây. Hạn chế chính là tài nguyên không cho phép bạn thay đổi kích thước hình ảnh:

Để bắt đầu, hãy di chuyển hình ảnh vào giữa trang chính của dịch vụ, đến khu vực được viền bằng đường chấm - trọng lượng của hình ảnh sẽ tự động giảm ngay lập tức:

Bây giờ - chỉ cần tải tệp mới xuống máy tính của bạn.

Nếu nó đủ lớn (hơn 350 KB), trước tiên hãy giảm kích thước hình ảnh, sau đó chuyển sang TinyPNG. Nếu bạn tải ảnh lên từ iPhone, bạn có thể gửi chúng qua thư, trước đó đã chỉ định kích thước khác với kích thước ban đầu. Thông thường lớn và Kích thước trung bìnhưa thích nhất.

GIMP

GIMP là một công cụ đáng kinh ngạc. Đây là một giải pháp thay thế máy tính để bàn miễn phí cho Photoshop phổ biến. Đồng thời, GIMP có thể làm được mọi thứ mà đứa con tinh thần của Adobe có khả năng làm được. Vì vậy, nếu bạn đang có ngân sách tiết kiệm, hãy chú ý đến chương trình này. Nó có sẵn cho Windows, Mac OS và Linux.

Kích thước tập tin nào là thích hợp hơn?

Trọng lượng tối ưu của một tập tin phụ thuộc vào vị trí và mục đích bạn sẽ sử dụng nó. Nhưng nguyên tắc cơ bản là: cố gắng giảm trọng lượng của hình ảnh càng nhiều càng tốt trong khi vẫn duy trì chất lượng cao.

Nếu ảnh của bạn bị mất nét, nổi hạt hoặc mờ, hãy tối ưu hóa lại chúng để cải thiện chất lượng tệp của bạn. Nếu bạn đang sử dụng Photoshop và lưu hình ảnh dưới dạng .JPG, hãy thử di chuyển thanh trượt Chất lượng Hình ảnh lên 80% trở lên. Nếu bạn đang lưu hình ảnh dưới dạng .PNG, hãy thử sử dụng .PNG-24 thay vì .PNG-8.

Hãy xác định các chỉ số âm lượng tệp lý tưởng cho các loại tài nguyên chính.

Cửa hàng trực tuyến

Một cửa hàng trực tuyến trung bình chứa hàng trăm đến hàng nghìn hình ảnh sản phẩm trên các trang của nó. Vì vậy, việc tối ưu hóa nội dung trực quan là vô cùng quan trọng đối với các trang web Thương mại điện tử.

Theo quy định, trọng lượng của hình ảnh sản phẩm giảm xuống còn 75 KB trở xuống. Nếu hình ảnh trên trang web được thu nhỏ lại, bạn sẽ cần kích thước lớn hơn. Sau đó trọng lượng có thể tăng lên 150 KB.

Blog

Theo quy định, trọng lượng hình ảnh cho blog không vượt quá 100 KB. Nhưng nhiệm vụ của bạn là đạt được khối lượng tối thiểu trong khi vẫn duy trì chất lượng. Tránh hoạt ảnh GIF nếu nó không thực tế.

Cổng SaaS

Có ba loại hình ảnh chính trên các tài nguyên này: trang chủ(anh hùng bắn), biểu tượng và ảnh chụp màn hình. Trang quan trọng nhất của dịch vụ là trang chính nên mọi công việc tối ưu hóa đều phải bắt đầu từ đây.

Hình ảnh chính

Thông thường đây là những hình ảnh khổng lồ lấp đầy toàn bộ màn hình. Nhưng kích thước mục tiêu của bạn là 250 KB trở xuống. Nó sẽ không dễ dàng. Nhưng cực kỳ hiệu quả. Nhiều người không tăng cân đặc biệt chú ý, nhưng chỉ tối ưu hóa cái này thôi cũng sẽ tăng hiệu suất tài nguyên rồi.

Biểu tượng

Trên nhiều trang web, các biểu tượng thể hiện rõ ràng chức năng hoặc tính năng của sản phẩm. Định dạng của những hình ảnh như vậy thường là .PNG và trọng lượng không vượt quá 15 KB.

Ảnh chụp màn hình

Nếu ảnh chụp màn hình rộng bằng hình ảnh chính, hãy cố gắng giảm trọng lượng của chúng xuống 250 KB, nếu không thì 100 KB trở xuống. Định dạng tốt nhấtđể chụp ảnh màn hình - .JPG.

Công cụ chỉnh sửa hình ảnh miễn phí

Dịch vụ trực tuyến miễn phí

• TinyPNG. Giá trị chính của tài nguyên là tính đơn giản của nó. Chỉ cần chuyển hình ảnh sang màn hình chính cân nặng của anh ấy giảm như thế nào;
• Pixlr. Giao diện dịch vụ tương tự như Photoshop. Nó cũng hiển thị trọng lượng của tập tin đối với chất lượng hình ảnh nhất định;
• Picmonkey. Các chức năng cần thiết có sẵn và giao diện trực quan.

Công cụ máy tính để bàn miễn phí

• GIMP;
• Sơn.net. Tốt nhất Phiên bản Microsoft Sơn. Một trong chức năng hữu ích- lịch sử không giới hạn. Bạn có thể hoàn tác bao nhiêu hành động nếu cần;
• Bờ biển. Ứng dụng đang mở mã nguồn cho Mac. Được biết đến với nhiều lỗi nhưng vẫn có thể hữu ích.

Một vài lời khuyên cuối cùng về tối ưu hóa công cụ tìm kiếm. Tên tệp phải mang tính mô tả. Ví dụ: bạn không cần đặt tên như 324q345q345.png cho hình ảnh trong cửa hàng trực tuyến. Phản ánh sản phẩm hiển thị trong hình trong tên tệp. Ngoài ra hãy đảm bảo mỗi hình ảnh có một hình ảnh tương ứng Thẻ Alt trong mã hình ảnh:

Thông tin này sẽ cho phép hình ảnh tham gia tìm kiếm hình ảnh trên Google hoặc Yandex.

Bí quyết tối ưu hóa tiêu đề và hình ảnh từ các nguồn nội dung hàng đầu

Phần kết luận

Các chuyên gia CRO và SEO thường quên tối ưu hóa hình ảnh, đánh giá thấp tác động của quá trình này đến lợi nhuận. Nhưng bằng cách dành đủ thời gian và sự chú ý cho việc tối ưu hóa, bạn sẽ mở ra được một tiềm năng khác để phát triển kinh doanh. Chúng tôi hy vọng hướng dẫn của chúng tôi sẽ giúp với điều này.

Từ tác giả: Mọi nhà phát triển đều biết rằng mọi hình ảnh đều quan trọng khi nói đến hiệu suất web và trải nghiệm người dùng. Hình ảnh là thành quả dễ dàng của việc tối ưu hóa hiệu suất. Việc nén mà không làm giảm chất lượng hình ảnh có thể mang lại lợi ích cho các tổ chức bằng cách giảm trọng lượng của trang mà không ảnh hưởng đến trải nghiệm người dùng, cải thiện năng suất và tiếp cận nhiều đối tượng hơn. Có nhiều kỹ thuật để xác định hình ảnh nào sẽ tải lên, nhưng những “hình ảnh phù hợp” đó vẫn cần phải được tạo. Mục tiêu của các nhà phát triển web và dịch vụ hiệu suất là cung cấp hình ảnh tối ưu cho tất cả người dùng, trên tất cả các loại thiết bị và trong tất cả các trình duyệt. (Một mục tiêu khác là khả năng tiếp cận, nhưng đó là chủ đề của một bài viết khác!).

Xác định hình ảnh bạn cần

Có một số phương pháp giao diện người dùng để cung cấp hình ảnh chính xác, trong số đó có truy vấn phương tiện cho hình ảnh nền và thẻ có thuộc tính srcset cho hình ảnh nền trước.

Bằng cách sử dụng @ truy vấn phương tiện truyền thông bạn có thể đặt hình nền nào sẽ sử dụng cho độ phân giải cụ thể màn hình và mật độ màn hình. Ví dụ: bạn có thể gửi hình ảnh Lowers.jpg tới máy tính xách tay cũ và Hires.jpeg tới iPad Pro:

tiêu đề ( hình nền: url(img/hires_header.jpg); ) Màn hình chỉ @media và (tỷ lệ pixel-thiết bị tối thiểu: 2) và (chiều rộng tối thiểu: 1024px) ( tiêu đề ( hình nền: url(img /hires_header.jpg);

tiêu đề ( @media chỉ màn hình và (min - thiết bị - pixel - tỷ lệ: 2) và (min - width: 1024px) ( tiêu đề ( nền - hình ảnh: url (img/rents_header. jpg);

Còn hình ảnh tiền cảnh thì sao?

Kỹ thuật xe hề năm 2013 hoạt động dựa trên thực tế là SVG trong truy vấn phương tiện sử dụng chiều rộng và chiều cao của vùng chứa làm kích thước cửa sổ chứ không phải trình duyệt. May mắn thay, trình duyệt hiện tại hỗ trợ thẻ hình ảnh và thuộc tính srcset làm cho thủ thuật này và tính năng chèn hình ảnh trở nên lỗi thời.

Vấn đề chính với hình ảnh nền trước là trình duyệt có quyền truy cập vào kích thước cửa sổ và mật độ màn hình, nhưng cho đến khi trang tải xong, trình duyệt không biết kích thước hình ảnh liên quan đến cửa sổ hoặc kích thước tập tin nguồn. Tuy nhiên, nhà phát triển biết chúng và có thể kích hoạt chúng.

Làm việc với ảnh, nguồn và thuộc tính srcset tương tự như truy vấn phương tiện. Bạn chỉ định hình ảnh nền trước nào sẽ được sử dụng cho kích thước cửa sổ và mật độ màn hình cụ thể:

< picture > < source srcset = "small_lowres.jpg, small_highres.jpg 2x" media = "(độ rộng tối đa: 768px)"> < source srcset = "default.jpg, default_highres.jpg 2x"> < source srcset = "large_lowres.jpg, big_highres.jpg 2x" media = "(chiều rộng tối thiểu: 1024px)"> < img src = "default.jpg" alt = "mô tả hình ảnh" > < / picture >

Xin lưu ý: Luôn chèn tiêu chuẩn thẻ img trong ảnh, bao gồm thuộc tính alt với mô tả về hình ảnh.

Bạn có thể làm cho nó trở thành một thẻ đơn giản nhặt lên bức tranh đẹp nhất không có thẻ ảnh gốc và thẻ nguồn liền kề. Để làm điều này, bạn cần sử dụng thuộc tính srcset và size.

< img src = "default.jpg" srcset = "large.jpg 1024w, Medium.jpg 768w, Mặc định.jpg 420w" size = "(min-width: 1024px) 1024px, (chiều rộng tối thiểu: 768px) 90vw, 100vw" alt = "mô tả hình ảnh" / > !}

Sử dụng thuộc tính type, bạn có thể tải lên hình ảnh ở các định dạng khác nhau:

< picture > < source srcset = "photo.jxr" type = "image/vnd.ms-photo" > < source srcset = "photo.jp2" type = "image/jp2" > < source srcset = "photo.webp" type = "image/webp" > < img srcset = "photo.jpg" alt = "Khuôn mặt xinh đẹp của tôi" > < / picture >

Nếu đoạn mã trên là mới đối với bạn thì JPEG-XR và loại MIME image/vnd.ms-photo cũ sẽ được sử dụng cho cửa sổ truyền thông tin Photo, định dạng hình ảnh độc quyền của Microsoft. Được hỗ trợ trong IE8+ và Microsoft Edge. JPEG 2000 là jp2, sẽ được hiển thị trong Trình duyệt Safari khi sử dụng đánh dấu ở trên. WebP là định dạng hình ảnh nén mà không làm giảm chất lượng, hoạt động trong Opera và Chrome. Firefox sẽ chọn định dạng mặc định là PNG-A, SVG, GIF hoặc JPEG.

Trong Firefox và IE8, bạn phải chỉ định dự phòng JPEG hoặc PNG. Firefox và Safari đang thử nghiệm hỗ trợ hình ảnh WebP, nhưng theo CanIUse.com thì không có dấu hiệu hỗ trợ ngay lập tức.

Nếu bạn muốn hiểu những tính năng mới nhưng được hỗ trợ tốt này và tìm hiểu cách sử dụng chúng, có một số hướng dẫn tuyệt vời về truy vấn phương tiện, hình ảnh và srcset.

Tùy biến gần như vô hạn

Một trong những vấn đề chính với mã trong phần trên là chúng tôi chỉ đưa vào một phần nhỏ hình ảnh có thể phù hợp với loại phương tiện, kích thước và mật độ pixel. Có thể, nhưng khó, để đăng ký tất cả các điểm dừng, độ phân giải và loại phương tiện cho tất cả hình ảnh. Tôi không muốn viết mọi thứ bằng tay. May mắn thay, nhiệm vụ tạo ra tất cả hình ảnh cần thiết có thể được tự động hóa cho tất cả các trường hợp có thể.

Sự lựa chọn tốt nhất– viết về phía máy chủ yêu cầu về hình ảnh tối ưu nhất dựa trên ba trong bốn tiêu chí: kích thước cửa sổ, mật độ pixel trên thiết bị, loại phương tiện được hỗ trợ trong trình duyệt và kích thước hình ảnh so với cửa sổ. Tại sao lại dựa trên ba trong số bốn? Bởi vì bạn có thể sử dụng thực tế là trình duyệt đã hiểu các nguồn nên bạn không cần đưa vào tất cả các kết hợp có thể có mà chỉ cần một vài kết hợp.

Nếu DOM được ghi vào trình duyệt chỉ thông qua JS phía máy khách, như trường hợp của hầu hết các ứng dụng React, thì trình duyệt có thể được gửi yêu cầu về một hình ảnh hợp lệ, nhưng trong khi mã đang được phân tích cú pháp, người dùng có thể thấy một phần đã tải màn hình không tương tác (ảnh chụp màn hình). Trong một kịch bản tổng quát hơn, khi trang web có phía máy chủ, việc viết lại yêu cầu hình ảnh trong JS không phải là một lựa chọn tối ưu: trước tiên trình duyệt sẽ tải bản gốc khi phân tích cú pháp DOM, sau đó tải hình ảnh thứ hai, đã được tối ưu hóa sau khi cập nhật DOM .

Nếu bạn sử dụng kỹ thuật nâng cao lũy tiến và nên làm như vậy, bạn cần hiểu rõ rằng ngay sau khi mã HTML của hình ảnh được phân tích cú pháp, bản gốc sẽ được tải.

Thật không may, thông số kỹ thuật Gợi ý ứng dụng khách bổ sung thông tin về tỷ lệ pixel của thiết bị và độ rộng cửa sổ vào trường tiêu đề Yêu cầu HTTP, chỉ được triển khai trong trình duyệt Blink (Chrome và Opera). Bằng cách biết trình duyệt, độ phân giải và kích thước cửa sổ của người dùng, việc cập nhật tất cả các yêu cầu hình ảnh có thể được tự động hóa, từ đó tận dụng các kỹ thuật nâng cao lũy tiến cho các yêu cầu phía máy chủ. Bằng cách sử dụng Gợi ý ứng dụng khách, bạn có thể xác nhận hỗ trợ cho định dạng webP (Chrome và Opera hỗ trợ cả gợi ý ứng dụng khách và webP), độ phân giải và kích thước cửa sổ. Có một tập lệnh Nanovisor trên trang web Instart Logic thực hiện điều tương tự đối với Gợi ý khách hàng. Nó cho phép bạn gửi hình ảnh được tối ưu hóa ở định dạng được tối ưu hóa ngay cả khi Gợi ý ứng dụng khách không được hỗ trợ.

Kỹ thuật phát hiện trình duyệt không thông minh lắm, vì vậy bạn có thể lấy chuỗi trình duyệt từ tiêu đề HTTP và bảng tra cứu rồi sử dụng chúng để xác định loại phương tiện được trả về dựa trên các tiêu đề đó. Bạn có thể viết lại tiện ích mở rộng hình ảnh hoặc bạn có thể trả về loại hình ảnh “đúng” cho tất cả các trình duyệt, nhưng với tiện ích mở rộng “sai” cho mỗi lệnh gọi hình ảnh. Ví dụ: nếu hình ảnh được yêu cầu là foo.jpg, hãy trả về loại phương tiện tốt nhất cho trình duyệt, nhưng gọi foo.jpg, loại phương tiện không quan trọng. Trên trang web Instart Logic, chúng tôi quay lại định dạng webP cho trình duyệt Chrome và Opera, JPEG-XR cho Edge, v.v…. chúng tôi không viết lại đường dẫn hình ảnh. Chúng tôi chỉ cần sử dụng phần mở rộng ban đầu trong tên tệp, đối với chúng tôi đó là jpg. Chúng tôi lợi dụng thực tế là các trình duyệt hiển thị hình ảnh của loại phương tiện mà chúng nhận ra và không xem phần mở rộng (hoặc thiếu phần mở rộng) trong tên tệp. Trong trường hợp này, bạn không thể thay đổi đánh dấu và DOM trong JS, đồng thời chỉ tải một hình ảnh cho mỗi yêu cầu.

Nếu bạn định quay lại phương tiện truyền thông khác nhau dựa trên sự hỗ trợ của trình duyệt nhưng có cùng độ phân giải trong tên tệp, bạn sẽ phải lưu trữ hình ảnh chính xác ở phía máy chủ trong cơ sở dữ liệu vì bạn sẽ cần xử lý phiên bản khác nhau hình ảnh có cùng tên. Về phía khách hàng, cần phải yêu cầu phần mở rộng chính xác(nếu bạn biết cách tốt hơn hoặc chỉ cách khác, hãy cho tôi biết).

Tự động hóa quá trình tạo tập tin

Tốt nhất là cung cấp cho người dùng hình ảnh tùy chỉnh cho quảng cáo hình ảnh tùy chỉnh được trình duyệt hỗ trợ. Trong phần trước, chúng ta đã học cách yêu cầu trình duyệt sử dụng một kích thước và loại hình ảnh nhất định dựa trên các tính năng của nó. Tuy nhiên, chúng ta vẫn cần tạo hình ảnh ở mọi kích cỡ cho mọi loại phương tiện với mức độ tốt nhất nén cho từng hình ảnh riêng lẻ. Câu hỏi là làm thế nào để tạo ra tất cả các hình ảnh?

Chúng ta cần tự động hóa việc nén và thay đổi kích thước hình ảnh thành nhiều định dạng được hỗ trợ các trình duyệt khác nhau, thiết bị và các hệ điều hành. Tốt nhất là nên xác định mức độ và mức độ nén tốt nhất cho từng hình ảnh riêng lẻ.

Việc tối ưu hóa hình ảnh có thể mất nhiều thời gian trên các trang web không tĩnh, nơi có thể có hàng nghìn, hàng chục nghìn hoặc thậm chí hàng triệu hình ảnh, tất cả đều có kích thước, độ phân giải và loại phương tiện khác nhau. ImageMagick có thể chuyển đổi hình ảnh sang PNG, JPEG, JPEG-2000, GIF, WebP và hầu hết mọi định dạng thông qua dòng lệnh:

Internet rộng khắp để xác định chất lượng tốt nhất Tất cả các hình ảnh đều cần một đội quân nhân dân. Hầu hết các bộ chuyển đổi và dịch vụ đều giảm kích thước tệp bằng cách giảm chất lượng hình ảnh ở cùng tỷ lệ hoặc mức nén. Ví dụ: khi trang web của tôi có ít hình ảnh, tôi có thể nén chúng theo cách thủ công. Chất lượng dao động từ thấp 35% đến cao 88%. Đối với các phòng trưng bày và các dự án nặng về hình ảnh khác, tôi đã sử dụng Adobe Fireworks để tự động nén và xuất, lưu mọi thứ dưới dạng JPEG với chất lượng 78%. Giống như tôi, hầu hết các công cụ tự động nén đều sử dụng cùng cài đặt chất lượng, thường là khoảng 80%. Tôi chọn 78% hoàn toàn tình cờ (dựa trên một chút kinh nghiệm). Không có giá trị chất lượng kỳ diệu nào phù hợp với tất cả hình ảnh. Không có mức nén thần kỳ nào có thể nén tất cả hình ảnh mà không làm giảm chất lượng.

Mức độ nén "chính xác" tùy thuộc vào nội dung và cách sử dụng hình ảnh. Mức chất lượng của bản xuất thường phụ thuộc vào chi tiết trong ảnh. Tùy theo nội dung mà mỗi hình ảnh sẽ được lựa chọn mức độ khác nhau. Thông thường, hình ảnh càng chi tiết thì chất lượng càng thấp: phong cảnh đòi hỏi Chất lượng cao dưới 90 và hình ảnh có nhiều chi tiết sẽ trông đẹp ngay cả ở mức dưới 50.

Vẫn có thể tự động hóa cài đặt chất lượng cho từng hình ảnh. Trang Instart Logic sử dụng thị giác máy tính, máy học và bộ chuyển đổi để tối ưu hóa hình ảnh dựa trên nội dung, tự động hóa quy trình tạo hình ảnh được tối ưu hóa cho thiết bị, trình duyệt và độ phân giải web, đồng thời tính toán tỷ lệ nén tối ưu mà không ảnh hưởng đến trải nghiệm người dùng. SmartVision là một phương pháp tiếp cận thuật toán sử dụng công nghệ máy học để tự động hóa các điều chỉnh thích ứng cho từng hình ảnh, nén hình ảnh nhiều nhất có thể mà không làm giảm chất lượng (ngoại trừ một số hình ảnh đầu tiên đã được hiệu chỉnh thuật toán máy học). Các thuật toán thị giác máy tính tiên tiến xem xét nội dung hình ảnh và tối đa hóa mức độ nén mà không ảnh hưởng đến trí thông minh của người dùng. Parviz Ahammad đã giải thích các thuật toán của anh ấy cho SmartVision tốt hơn nhiều so với những gì tôi đã giải thích vào năm 2014.

Các trình duyệt đã đi được một chặng đường dài trong 6 năm qua và trọng lượng trung bình của các trang web cũng tăng lên. Hình ảnh là thủ phạm chính. tải chậm và hình ảnh hiện đại chỉ là một phần của giải pháp. Thời gian dành cho việc tối ưu hóa hình ảnh được sử dụng hiệu quả.