В чем разница между фото и миниатюрами?

Question

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

Так есть ли реальная цель использования эскизов и фото одного и того же изображения отдельно, когда можно легко изменять размеры с помощью width и height атрибут в <img> теге HTML?

Answer 1

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

Answer 2

Преимущество использования отдельных гораздо меньших файлов в виде миниатюр - это, в основном, скорость загрузки страницы и экономия полосы пропускания - вам не нужно ждать, пока все изображение будет загружено для браузера, чтобы отобразить его миниатюру. Это имеет большое значение для больших изображений (например, для HD-обоев), где изображения могут быть более 1 МБ. Если у вас есть галерея миниатюр, которые потребуется некоторое время для загрузки, даже при очень быстром подключении, вместо этого вы используете миниатюры, которые обычно меньше 100 кБ (в большинстве случаев намного меньше). Это также экономит вашу пропускную способность, потому что вы загружаете только те изображения, которые нужны пользователю, а не все из них. Это происходит из моего опыта создания веб-галерей и портфолио.