Webdesign: Ограничения ширины PNG-изображения

Question

Я хочу сделать вид слайд-шоу, основанный на прокрутке веб-страницы.

Моя проблема заключается в том, что у меня ширина изображения 78720x1015px в png-формате. Ширина изображения определяется одним изображением 1920px, которое 41 раз расположено рядом друг с другом. - Это должно быть как мультфильм, где изображение перемещается на 100% (маржа: -100%) и генерирует ощущение фильма.

Однако это приводит к ширине изображения 1920px x 41pics = 78720px.

Это огромная ширина, но меня интересует, что размер файла составляет всего 975 КБ, что на мой взгляд не так уж и велико !? - Однако для загрузки изображения в Webbrowser требуется очень много времени, и изображение не имеет такого качества, как в моем ImageViewer на рабочем столе.

Вопрос 1: Что я должен учитывать при работе с такой большой шириной изображения? Каковы пределы?

Вопрос 2: Есть ли лучший способ сделать такой вид слайд-шоу? - Считайте, что само скопление не должно быть видимым. Это должно быть как фильм, основанный на 40 картинах.

Заранее благодарен!

Answer 1

PNG сжимает очень хорошо, особенно если это мультфильм, как вы говорите, который может использовать только ограниченное количество цветов.

Однако при загрузке в память устройство должно загрузить все данные этого пикселя в ОЗУ для его отображения. Это почти 80 миллионов пикселей в вашем случае, что составит около 320 МБ несжатых данных. Вероятно, именно поэтому браузер борется, и особенно, если вы используете margin, чтобы переместить его, поскольку для этого требуется полная повторная обратная обработка изображения.

У вас могут быть лучшие результаты с transform, так как это должно использовать аппаратное ускорение, а также избегать перепланировки части перерисовки, поскольку преобразования не влияют на макет страницы.

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