Лучшие стандартные размеры изображений для различной ширины экранов для сайта

Question

Я использую библиотеку picturefill.js, чтобы получить одно и то же изображение с разными размерами на разной ширине экрана.

Дилемма заключается в том, какое количество изображений я должен создать, имея в виду все мобильные устройства, планшеты и компьютеры? Делая это, я хочу сохранить пропускную способность.

Прямо сейчас я создаю одно и то же изображение с разными размерами ниже. Размер изображения в пикселях

240   
320 
640   
480 
600 
768 
960
992
1200
1368
1600
2400
2500
3200
4000

Если я создам изображение с такими размерами и загружу его с помощью picturefill JS, это повлияет на производительность?

Answer 1

Технически говоря, вы можете использовать все 15 разрешений и иметь 15 контрольных точек в своих медиа-запросах. Не должно быть никакого негативного влияния на производительность. Однако, обратная сторона такова: вы можете сойти с ума, поддерживая все эти медиа-запросы. Представьте, сколько времени будет длиться в вашей декларации 15 разных файлов в зависимости от разрешения.

Разумная и практичная задача - нацелиться на несколько разрешений и использовать оптимальное изображение для каждого. Вам необходимо поработать с вашим инженером UX (может быть, самим), чтобы определить эти точки останова. Скажем, например, вы нацеливаетесь:

1. мобильный A (ширина 320 пикселей)
2. мобильный B (ширина 480 пикселей)
3. мобильный C (ширина 600 пикселей)
4. планшет D (ширина 1024 пикселей)
5. планшет / рабочий стол E (ширина 1440 пикселей)

Вы бы задали свои медиа-запросы на этих контрольных точках выше. И последовательно используйте их по всему сайту. Следовательно, вы будете использовать изображения только с такой шириной, при условии, что все они являются изображениями полной ширины. Если вы хотите, чтобы они выглядели четкими даже при высоком разрешении (сетчатка), не забудьте удвоить каждое из измерений. По всей вероятности, вы получите 5 или 6 разных изображений.

Таким образом, хотя возможно иметь 15 контрольных точек, лучше для вашего здравого смысла определить несколько ключевых.