Tối ưu hoá ảnh cho web một số điều nên biết không rõ

Khơng rõ Tối ưu hố ảnh cho Web: Một số điều nên biết Khơng rõ Tối ưu hố ảnh cho Web: Một số điều nên biết Chào mừng bạn đón đọc đầu sách từ dự án sách cho thiết bị di động Nguồn: http://vnthuquan.net/ Tạo ebook: Nguyễn Kim Vỹ MỤC LỤC Tối ưu hoá ảnh cho Web: Một số điều nên biết Khơng rõ Tối ưu hố ảnh cho Web: Một số điều nên biết Web môi trường thị giác, cho dù văn tạo nên phần lớn nội dung hình ảnh đóng vai trò quan trọng Chỉ cần duyệt qua số trang Web hữu mạng, thấy nhiều vấn đề cần bàn tới Ngay người thiết kế Web rành nghề mắc lỗi việc xử lý ảnh để đưa lên mạng Đối với người thiết kế nghiệp dư, thiếu kinh nghiệm, lỗi lại dễ mắc phải Bài viết nhằm mục đích giúp bạn nắm nguyên lý liên quan tới xử lý ảnh cho Web để giảm tới mức tối đa lỗi khơng mong muốn Có câu nói ngành thiết kế:” rác rưởi lại phải vứt vào thùng rác” Câu nói đặc biệt lựa chọn ảnh để xử lý đưa lên mạng Các ảnh trang Web thường nén có chất lượng tương đối thấp Một đưa lên mạng, chất lượng ảnh cải thiện, lựa chọn ảnh gốc, bạn phải chọn ảnh có chất lượng cao tốt Nếu ảnh gốc ảnh số mà ảnh in (ảnh chụp máy ảnh thông thường hay ảnh lấy từ tạp chí), bạn cần quan tâm tới nhiều thứ Thứ nhất, độ phân giải ảnh in khác độ phân giải xác ảnh sử dụng cho Web 72 pdi Tuy nhiên, Tạo Ebook: Nguyễn Kim Vỹ Nguồn truyện: vnthuquan.net Tối ưu hoá ảnh cho Web: Một số điều nên biết Không rõ quét ảnh in để số hoá, bạn cần lưu ý không quét độ phân giải thấp Cái xảy sau bạn cần tăng kích thước ảnh cho trang Web hay nhận cắt bớt đi, ảnh phù hợp Đó điều khó thực bạn quét ảnh độ phân giải thấp Nếu bạn quét ảnh độ phân giải cao, chẳng hạn 300 pdi, bạn có nhiều lựa chọn cho việc xử lý sau Còn có nhiều vấn đề khác xảy quét ảnh in Nếu bạn sở hữu máy quét có cấu hình tương đối thấp, màu ảnh qt khác xa so với ảnh gốc, cải tiến gần phần mềm đồ họa giúp bạn chỉnh sửa lại nhanh chóng Ví dụ, trình đơn “Enhance” Adobe Photoshop Elements có số lựa chọn mà bạn cần thao tác với lần kích chuột để xử lý độ tương phản hay chỉnh màu; hay trình đơn “Adjust” Jasc Paint Shop Pro cung cấp tính tương tự Thường gặp quét ảnh từ tạp chí tượng ảnh quét bị rạn xương cá, mức độ phụ thuộc vào loại giấy in tạp chí Tuy nhiên, quét ảnh độ phân giải 300dpi áp dụng hiệu ứng Gaussian Blur nhẹ nhàng, tượng rạn xương cá giảm khơng bạn giảm độ phân giải hay kích thước ảnh Web Các chi tiết ảnh rõ ràng trở lại bạn sử dụng cẩn thận lọc “Unsharp Mask” Nếu sử dụng Photoshop hay Photoshop Elements, bạn có kết tương tự hay chí tốt dùng lọc “Despeckle” (Filter -> Noise -> Despeckle) ảnh gốc Kỷ nguyên số Một nguồn tài nguyên dồi cho đồ họa Web ảnh số Vấn đề thường gặp nằm thiết bị phần cứng sử dụng để chụp ảnh gốc Nếu bạn có máy ảnh số cấu hình thấp, bị nén nhiều nên có khoảng thô JPG ảnh bạn Màu sắc ảnh không rõ ràng, trừ bạn chọn góc sáng tốt cho vật thể cần chụp Trong trường hợp lời khuyên xử lý ảnh quét có tác dụng: Hãy sử dụng tính tăng cường chất lượng cho ảnh gốc ứng dụng đồ họa để cải thiện màu sắc ảnh số áp dụng hiệu ứng Gaussian Blur cách nhẹ nhàng để giảm khoảng thô JPG Có điều bạn ln ln phải nhớ chọn ảnh gốc Thứ nhất, bạn nên sử dụng ảnh bạn quyền sử dụng (nếu khơng sau gặp vấn đề rắc rối quyền) Thứ hai, bạn thường xuyên lưu (Save) lại tệp ảnh gốc, sau làm việc để đề phòng trường hợp bạn muốn lấy lại ảnh gốc ban đầu Nếu bạn thực nhiều thay đổi ảnh xử lý, chẳng hạn cắt gọn ảnh, tăng giảm độ phân giải hay kích thước, lưu ảnh lại thành tệp khác sau bước thay đổi lớn để bạn quay lại bước trước có trục trặc xảy Cuối cùng, lưu ảnh bước trung gian này, bạn nên sử dụng định dạng tệp không nén (hoặc định dạng JPEG có độ nén đặt thành 0%) Cũng ln ln phải nhớ bạn làm việc môi trường số có nhiều khía cạnh khác liên quan tới Hãy cân nhắc kỹ bạn lấy phần từ ảnh gốc để tạo ảnh Web, Tạo Ebook: Nguyễn Kim Vỹ Nguồn truyện: vnthuquan.net Tối ưu hố ảnh cho Web: Một số điều nên biết Khơng rõ phần ảnh đẹp ấn tượng so với toàn Một điều lưu ý phải sử dụng lọc cẩn thận Vào tay người thiết kế chuyên nghiệp, lọc phát huy tác dụng rõ ràng bạn sử dụng không liều lượng, ảnh bạn trơng nghiệp dư Vì tự chỉnh sửa ảnh mình, bạn thực số thao tác, chẳng hạn loại bỏ yếu tố không mong muốn từ ảnh gốc Làm thực dễ, cần thời gian sử dụng khéo léo công cụ cắt gọn (cloning) Phần lớn người đồng ý cách tốt thực thao tác độ phân giải ảnh quét vào, với số thay đổi nhỏ số trường hợp hiệu bạn thực độ phân giải 72 dpi Đó độ phân giải đó, số điểm ảnh bạn cần thao tác đi, thời gian thực tiết kiệm đáng kể Giải thích thêm định dạng tệp Khi bạn thực xong công việc chỉnh sửa ảnh gốc, lưu ảnh chỉnh sửa lên đĩa để dùng cho Web bạn cần lựa chọn định dạng phù hợp Có hai loại định dạng sử dụng nhiều cho ảnh Web loại định dạng có qui tắc định bạn cần nắm rõ JPEG định dạng phù hợp với ảnh chụp, với tính chất tơng màu chuyển biến đặn Đó định dạng JPEC hỗ trợ tới hàng triệu màu ảnh trơng đẹp chí bị nén JPEC định dạng nén có mát, có nghĩa chi tiết màu sắc ảnh gốc bị giảm tỉ lệ nén tăng lên thuật tốn nén “cố tình” loại bỏ thông tin mà mắt thường không cảm nhận Trong trường hợp ảnh sử dụng cho Web, bạn nén tới 50% mà ảnh trơng rõ nét Nếu tăng thêm tỉ lệ nén, bạn thấy vùng ảnh JPEG ảnh gốc lên với màu sắc bị nhoà vào Khi tỉ lệ nén mức cực đại, ảnh gốc ban đầu trông giống tạo thành từ khối thực tế, gần khơng có lý để bạn buộc phải nén với tỉ lệ Nếu tệp lớn, giảm bớt kích thước ảnh hay sử dụng ảnh khác bạn không muốn trang Web sau trở nên nặng Phần lớn ứng dụng cho phép bạn lưu ảnh định dạng JPEG cải tiến (progressive JPEC) So với định dạng JPEC chuẩn (standard JPEC), kích thước tệp lưu định dạng lớn lại ảnh tải theo nhiều bước Trước tiên, phiên ảnh với độ phân giải thấp xuất gần tức cửa sổ trình duyệt chi tiết bổ sung để “lắp ghép” thành ảnh chất lượng ban đầu Một định dạng phổ biến khác GIF Đây định dạng nén khơng mát, có nghĩa bạn khơng thấy suy giảm chi tiết màu sắc tăng tỉ lệ nén định dạng JPEG Khi lưu ảnh dạng GIF, màu “khóa” cách cho hiệu nhất, có điều định dạng cho phép tối đa 256 màu Như vậy, định dạng GIF không phù hợp với ảnh chụp, ảnh lưu bị bớt màu chất lượng khơng ảnh gốc Tuy nhiên, tính chất khơng Tạo Ebook: Nguyễn Kim Vỹ Nguồn truyện: vnthuquan.net Khơng rõ Tối ưu hố ảnh cho Web: Một số điều nên biết “mất mát” thuật toán nén làm cho định dạng thích hợp với ảnh có màu đặc biệt ảnh với vùng màu đồng Chính bạn thường lấy logo công ty hay ảnh line-art thường lưu định dạng GIF GIF định dạng thích hợp để tạo ảnh chứa nội dung văn Các máy PC MAC có số font chia sẻ với nhau, gây nên nhiều khó khăn cho nhà thiết kế Web Văn đồ hoạ giải pháp Mặc dù bạn khơng nên sử dụng hình GIF để thể toàn nội dung văn cần hiển thị, font mĩ thuật thường khó đọc văn ảnh GIF phóng to, thu nhỏ hay copy sang ứng dụng khác, trường hợp đoạn văn ngắn, lại yêu cầu cao tính mỹ thuật, định dạng lại phù hợp GIF có số lựa chọn cho bạn lưu ảnh Interlaced GIF, giống progressive JPEG, cho phép việc download ảnh trang Web diễn nhiều giai đoạn Bảng màu giảm thiểu từ số màu mặc định 256 kích thức tệp nhẹ thêm tới hàng kilobyte mà không ảnh hưởng tới chất lượng ảnh Nếu muốn thử, bạn sử dụng bảng màu “Web-safe”, thực tế khơng nên sử dụng, bảng màu hạn chế phần lớn máy tính ngày có khả hiển thị tới hàng triệu màu Một lựa chọn thú vị khác lưu ảnh GIF lưu ảnh với suốt Tuy nhiên, cần nói thêm khơng phải suốt hồn toàn Chẳng hạn, bạn tạo ảnh gồm đoạn chữ xanh (với hiệu ứng chống cưa anti-aliased) sau bỏ ảnh lưu tệp dạng ảnh GIF suốt Sau bạn đưa ảnh vào trang Web có màu đỏ kết thấy màu trang Web vùng ảnh không ban đầu Đây lỗi thường gặp nhiều trang Web, bạn nên ý phải đặt màu ảnh GIF giống với màu trang Web Việc loại bỏ màu ảnh GIF thường ý tưởng tốt màu giá trị màu tương ứng định nghĩa trang HTML khác chút Ngồi hai định dạng nói trên, có nên sử dụng định dạng cho ảnh Web không? Câu trả lời không nên Mặc dù môi trường hệ điều hành định, trình duyệt Web xử lý tốt định dạng tệp khác thường định dạng khơng tương thích với mơi trường hệ điều hành khác Nếu bạn cố gắng sử dụng ảnh với định dạng TIF không nén hay BMP trang Web, chắn thấy điều khơng thể Trong số định dạng khác xây dựng để hiển thị ảnh trực tuyến, loại không hỗ trợ đầy đủ môi trường khác định dạng lại thích hợp với số điều kiện “đặc biệt” Định dạng thứ nhất, PNG (Portable Network Graphic), kết hợp đặc tính tốt JPEG GIF, suốt hồn tồn, khơng phải suốt cách hạn chế GIF86 Nhưng vấn đề chỗ trình duyệt Internet Explorer lại không hỗ trợ khả phiên trình duyệt IE hỗ trợ phần lớn người sử dụng quen với trình duyệt cũ vậy, ưu Tạo Ebook: Nguyễn Kim Vỹ Nguồn truyện: vnthuquan.net Khơng rõ Tối ưu hố ảnh cho Web: Một số điều nên biết điểm định dạng PNG chưa có nhiều ý nghĩa thời điểm Flash, dùng để xử lý hoạt ảnh, “ứng cử viên” cho đồ họa Web, hiệu để đưa lên mạng ảnh vector hay dùng cho đoạn chép văn lớn (Tệp Flash thường có kích thước bé tệp GIF) Nếu sử dụng Flash, nên lưu tài liệu bạn thành tệp Flash hay phiên thấp hơn, khơng phải có chương trình plug-in để xem site bạn Cũng có số nguyên tắc khác bạn phải tuân thủ thiết kế ảnh cho Web đưa ảnh thiết kế vào trang Web thực Bất kể định dạng bạn chọn, tệp phải có độ phân giải 72 dpi Bạn phải tuân theo qui tắc đặt tên tệp Nói chung, nên tránh dùng ký tự khoảng trống tên tệp (có thể thay dấu gạch dưới) qui tắc tốt thường xuyên sử dụng chữ thường Luôn nhớ phải thêm phần mở rộng tệp (mặc dù nhiều chương trình soạn thảo đồ hoạ tự động làm việc cho bạn) Đuôi tệp GIF gif tệp JPEG jpg (.jpeg sử dụng số trường hợp, khơng phổ biến) Có thể bạn nghe nhiều ý kiến khác nhau, thực khơng có qui tắc chung liên quan tới kích thước tệp sử dụng cho Web Phần lớn chương trình đồ hoạ có số cho bạn biết thời gian ước tính tải tệp từ mạng thực định kích thước phụ thuộc vào site bạn, vào đối tượng khác hàng mục tiêu nhiều yếu tố khác Ví dụ, bạn thường xuyên phải cân yếu tố chất lượng hình ảnh thời gian tải tệp Lưu ý thêm tệp ảnh sử dụng chung cho nhiều trang khác trình duyệt lưu nhớ cache, nên bạn khơng cần phải nén nhiều Hơn nữa, bạn thiết lập phòng tranh trực tuyến, người xem yêu cầu cao chất lượng ảnh họ sẵn sàng chấp nhận thời gian tải lâu Một lỗi phổ biến nhiều người mắc phải thay đổi kích thước ảnh trình thiết kế Web Trừ số trường hợp đặc biệt, bạn không nên kéo căng ảnh so với ảnh gốc mà thực việc ảnh gốc trình thiết kế đồ hoạ Nếu ảnh bị mờ sau bị giảm độ phân giải thay đổi kích thước, sử dụng lọc “Unsharp Mask” để phục hồi lại chi tiết Lời cuối: Cám ơn bạn theo dõi hết truyện Nguồn: http://vnthuquan.net Phát hành: Nguyễn Kim Vỹ Nguồn: Theo tạp chí Internet Được bạn: mickey đưa lên vào ngày: tháng 12 năm 2004 Tạo Ebook: Nguyễn Kim Vỹ Nguồn truyện: vnthuquan.net .. .Tối ưu hoá ảnh cho Web: Một số điều nên biết Khơng rõ qt ảnh in để số hố, bạn cần lưu ý không quét độ phân giải thấp Cái xảy sau bạn cần tăng kích thước ảnh cho trang Web hay nhận... với ảnh chụp, ảnh lưu bị bớt màu chất lượng khơng ảnh gốc Tuy nhiên, tính chất không Tạo Ebook: Nguyễn Kim Vỹ Nguồn truyện: vnthuquan.net Không rõ Tối ưu hoá ảnh cho Web: Một số điều nên biết. .. số có nhiều khía cạnh khác liên quan tới Hãy cân nhắc kỹ bạn lấy phần từ ảnh gốc để tạo ảnh Web, Tạo Ebook: Nguyễn Kim Vỹ Nguồn truyện: vnthuquan.net Tối ưu hoá ảnh cho Web: Một số điều nên biết