Итак, размеры наших изображений изменяются так, как нужно, и теперь мы знаем, как ограничить размеры конкретных рисунков при их выводе на экран, если посчитаем это необходимым. Однако ранее в этой главе мы затронули проблему, связанную с масштабированием картинок. Физические размеры рисунков должны быть больше размеров при отображении, чтобы они хорошо смотрелись при воспроизведении на разных по величине экранах. В противном случае они будут выглядеть ужасно. Из-за этого размер файла рисунка почти всегда бывает больше, чем нужно для обеспечения его нормального отображения на экранах предполагаемой величины.

Многие люди бьются над решением этой проблемы, пытаясь обеспечить меньшие по размеру изображения для небольших экранов. Первым примечательным примером стало решение под названием Responsive Images (http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/). Однако недавно я перешел на Adaptive Images от Мэтта Уилкокса (Matt Wilcox) (http:// adaptive-images.com). Решение от Filament Group требовало внесения изменений в разметку, связанную с изображениями, а решение от Мэтта этого не требует и автоматически генерирует рисунки с измененными (меньшими) размерами, беря за основу полноразмерные изображения, уже указанные в разметке. Таким образом, это решение позволяет изменять размеры рисунков и при необходимости поставлять их пользователям на основании ряда контрольных точек, связанных с размерами экранов. Посмотрим, как устанавливается Adaptive Images.

В обозримом будущем любая композиция дизайна, с которой вы столкнетесь или которую станете создавать, скорее всего, будет иметь фиксированные размеры. Читать далее →