Thay đổi kích thước Đồ hoạ và Ảnh cho iPad và iPhone - núm vú

Thay đổi kích thước hình ảnh web để hiển thị trên iPad và iPhone là quan trọng vì hai lý do: Hình ảnh phải đủ nhỏ để hiển thị tốt trên màn hình máy tính và để tải nhanh đến máy tính của người dùng. Hình ảnh nhỏ hơn thì nhanh hơn.

Mặc dù bạn có thể thay đổi kích thước hiển thị của một hình ảnh trong một trang web bằng cách thay đổi chiều cao và chiều rộng cài đặt trong Dreamweaver hoặc bất kỳ trình biên tập web nào khác, bạn sẽ nhận được kết quả tốt hơn nếu thay đổi kích thước vật lý của hình ảnh trong một trình soạn thảo chương trình như Photoshop.

Khi bạn thay đổi chiều cao và chiều cao của một hình ảnh trong mã HTML, bạn chỉ cần hướng dẫn trình duyệt web hiển thị hình ảnh ở một kích thước khác. Thật không may, các trình duyệt không thực hiện tốt công việc thay đổi kích thước hình ảnh vì các trình duyệt không tự thay đổi hình ảnh, nhưng chỉ buộc nó để phù hợp với không gian được chỉ định khi trình duyệt tải trang.

Nếu bạn đặt hình ảnh để hiển thị lớn hơn kích thước thực của nó, hình ảnh có thể trông mờ hoặc bị méo mó bởi vì hình ảnh không có đủ điểm ảnh cho tất cả các chi tiết để trông đẹp với kích thước lớn hơn. Nếu bạn thiết lập mã để hiển thị hình ảnh nhỏ hơn nó, hình ảnh có vẻ sẽ trở nên mờ và người dùng của bạn phải tải xuống một hình ảnh lớn hơn mức cần thiết.

Giảm kích thước hình ảnh để sử dụng trên web đòi hỏi hai bước. Trước tiên, bạn giảm độ phân giải của một hình ảnh, thay đổi số lượng điểm ảnh trong hình ảnh. Khi bạn đang làm việc với hình ảnh cho web, bạn muốn giảm độ phân giải xuống 72 pixel trên một inch (ppi).

Thứ hai, bạn giảm kích thước vật lý của hình ảnh bằng cách giảm kích thước của ảnh. Bạn muốn định dạng kích thước hình ảnh của mình để phù hợp với trình duyệt và làm việc trong thiết kế trang web của bạn.

Làm theo các bước dưới đây để giảm độ phân giải và giảm kích thước của một hình ảnh trong Photoshop (trong Photoshop Elements hoặc Fireworks, bạn theo một quy trình tương tự mặc dù các bước cụ thể có thể khác nhau):

1 Với một mở hình ảnh trong Photoshop, chọn Image → Resize.

Hộp thoại Hình ảnh Kích cỡ sẽ mở ra.

Nếu bạn không muốn hình ảnh gốc của mình bị mất chất lượng (hoặc bạn chỉ muốn chơi an toàn), hãy sao chép hình ảnh của bạn và thay đổi kích cỡ bản sao cho trang web của bạn.

2 Để thay đổi độ phân giải của hình ảnh, đầu tiên bỏ chọn hộp kiểm Resample Image ở cuối hộp thoại Image Size.

Để có kết quả tốt nhất, hãy bỏ chọn hộp kiểm Resample Image khi bạn thay đổi độ phân giải. Để chuẩn bị tốt nhất cho web, hãy thay đổi độ phân giải thành 72 ppi để họ tải xuống nhanh hơn.

3Click và kéo để làm nổi bật số trong trường Nghị quyết và thay thế bằng cách gõ vào số 72.

Chiều rộng Chiều rộng và Chiều cao sẽ tự động thay đổi kích thước.

4Click để chọn hộp kiểm Resample Image.

Với hộp kiểm Resample Image đã bỏ chọn, bạn không thể thay đổi kích thước Pixel để nó phải được kiểm tra khi bạn thay đổi kích thước hình ảnh.

5Nhập chiều cao và chiều rộng cho hình ảnh trong các trường Chiều cao và Chiều rộng.

Nếu hộp kiểm Constrain Proportions ở dưới cùng của hộp thoại được chọn (như trong ví dụ này), bất kỳ thay đổi nào bạn thực hiện cho chiều cao sẽ tự động ảnh hưởng đến chiều rộng (và ngược lại) để đảm bảo tỷ lệ ảnh vẫn còn không thay đổi. Nếu bạn muốn thay đổi hình ảnh và không duy trì tỷ lệ, bạn có thể bỏ chọn hộp này.

Khi bạn thay đổi kích thước một hình ảnh trong Photoshop trong khu vực Pixel Dimensions, bạn có thể chỉ định kích thước mới bằng pixel hoặc theo phần trăm của kích thước ban đầu.

Hình ảnh của các nghệ sỹ Amy Baur và Brian Boldon, từ nghệ thuật trong không gian.

6Click OK để thay đổi kích thước hình ảnh.

Nếu bạn muốn trả lại hình ảnh về kích thước trước đó, hãy chọn Chỉnh sửa → Hoàn tác. Lưu ý rằng khi bạn lưu hình ảnh, những thay đổi trở nên vĩnh viễn.