Изображение стоит тысячи слов, и оптимизированное изображение может действительно повысить скорость нашей веб-страницы, тем самым давая нам больше возможностей вставлять изображения для привлечения пользователей и сделать веб-страницу более яркой.
фон
В этом событии Double Eleven Fantasy Island обработка изображений унифицирована. С помощью этого метода обрабатываются почти все изображения. Когда некоторые изображения конвертируются в webp или увеличиваются параметры сжатия, размер может быть очень значительно уменьшен, что улучшает время выполнения. производительность.
Когда дело доходит до использования изображений на вашем веб-сайте, важно выбрать правильный формат изображения для разных моделей. Форматы изображений могут повлиять на скорость загрузки и производительность вашего веб-сайта, а также существенно повлиять на взаимодействие с пользователем.
PNG (Portable Network Graphics) — это формат изображений без потерь, обычно используемый, когда изображение требует прозрачного фона. Он поддерживает высококачественное сжатие изображений, но имеет больший размер файлов и более медленную загрузку. Напротив, JPEG — это формат изображений с потерями, подходящий для фотографий, содержащих много цветовых деталей. Это позволяет уменьшить размер файла, сохранив качество изображения, но некоторые детали могут быть потеряны.
WebP — это формат изображений, разработанный Google, который сочетает в себе алгоритмы сжатия с потерями и без потерь. Это может значительно уменьшить размер файла изображения и улучшить скорость загрузки сайта. По сравнению с PNG и JPEG формат WebP может обеспечить такое же качество изображения при меньшем размере файла. Таким образом, преобразование форматов изображений из PNG или JPEG в WebP может помочь нам более эффективно адаптироваться к различным моделям.
Однако стоит отметить, что не все устройства подходят для WebP, поэтому на этот раз наша обработка изображений в основном выполняется путем комбинирования преобразования WebP + сжатия CDN и обрезки.
Логика обработки изображений
При обработке изображений первым шагом является настройка некоторых основных параметров CDN.
▐Увеличение и обрезка изображения
Масштабируйте по длинной стороне, не изменяя исходное соотношение сторон изображения и не обрезая его.
Он поддерживает только пропорциональное уменьшение на единицы по 10 в пределах исходной ширины изображения, то есть 10x10 - 400x400.
Конец URL-адреса изображения_200x200.jpg
Например:
https://s.alicdn.com/@img/imgextra/i4/O1CN01aPJNdW23khevc9KZv_!!6000000007294-2-tps-404-94.png_200x200.jpg
▐Регулировка качества изображения
Изображения PNG не поддерживают настройку качества
Пример: https://s.alicdn.com/@img/imgextra/i4/O1CN01aPJNdW23khevc9KZv_!!6000000007294-2-tps-404-94.png_q30.jpg
В настоящее время поддерживаются значения:
_q30.jpg
_q50.jpg
_q60.jpg
_q75.jpg
_q80.jpg
_q90.jpg
_q95.jpg
преобразование формата webp
Вам нужно всего лишь вставить _.webp в URL-адрес изображения , чтобы добиться преобразования формата WebP.
Пример: https://s.alicdn.com/@sc01/kf/H358e118c7fba46deb45690f0e483bdf5E.jpg_300x300.jpg_.webp
Кроме того, существуют некоторые правила резки закругленных углов и так далее, которые здесь не используются.
Помимо настройки основных параметров, мы также помещаем процесс обработки изображений в процесс обработки изображений на основе наличия локального кэша и пользовательских конфигураций для машин высокого и низкого уровня.Это относительно полный процесс, который можно используется в проектах.
▐Некоторый опыт изучения изображений
-
Если есть прозрачность, то это будет PNG, если нет, то это будет jpg. (В редких случаях, если прозрачный PNG слишком велик, вы можете вырезать часть изображения, а затем использовать CSS для достижения всего эффекта.
-
Как вырезать наиболее подходящую картинку? Если это простое векторное изображение, разрежьте его в PNG, это сэкономит больше места. Если оно красочное, лучше выбрать jpg.
-
Для картины среднего размера психологическая цена обычно не превышает 155 тысяч. Если он слишком велик, вы можете сжать его, преобразовать в jpg или q90 и т. д., чтобы уменьшить его.
-
base64 — это встроенный метод. Никакого запроса не требуется. Если он слишком мал, вы можете напрямую использовать его в base64 или использовать в качестве автономного решения для сокрытия.
Об использовании специальных шрифтов
-
Настраиваем его в схеме зебры и добавляем нужные нам шрифты. Затем нажмите «Загрузить».
-
Хорошее решение при вводе чисел: загрузите и используйте первое решение для подмножества шрифтов на чистом JavaScript github: fontmin, затем загрузите шрифт на веб-сайт CDN, щелкните ссылку отображения Zcache, скопируйте и, наконец, процитируйте его непосредственно в записи CSS.
@font-face { font-family: "AlibabaPuHuiTi-2-95-ExtraBold"; src: // IE9 url("https://cube.elemecdn.com/383240/AlibabaPuHuiTi-2-95-ExtraBold/6ea6e9e710760f0f0a8f8c43800b4a69-AlibabaPuHuiTi-2-95-ExtraBold.eot"), /* IE6-IE8 */ url("https://cube.elemecdn.com/383240/AlibabaPuHuiTi-2-95-ExtraBold/6ea6e9e710760f0f0a8f8c43800b4a69-AlibabaPuHuiTi-2-95-ExtraBold.eot?#iefix") format("embedded-opentype"), /* chrome、firefox */ url("https://cube.elemecdn.com/383240/AlibabaPuHuiTi-2-95-ExtraBold/22108b678b3b5e3d0109a17bc3c5cff4-AlibabaPuHuiTi-2-95-ExtraBold.woff") format("woff"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */ url("https://cube.elemecdn.com/383240/AlibabaPuHuiTi-2-95-ExtraBold/dabf8547ede2d2da56d4f4d976704540-AlibabaPuHuiTi-2-95-ExtraBold.ttf") format("truetype"), /* iOS 4.1- */ url("https://cube.elemecdn.com/383240/AlibabaPuHuiTi-2-95-ExtraBold/49cd1a947d2555ed55af5d248dd1646a-AlibabaPuHuiTi-2-95-ExtraBold.svg") format("svg"); font-style: normal; font-weight: normal;}
-
Как представить полную библиотеку шрифтов
import {useFontLoader} from '@ali/alimod-font-utils'const fontFamily = useFontLoader('https://g.alicdn.com/eva-assets/44169d9add0c0d26140d6d35994da982/0.0.1/tmp/444ec60/ff754b3c-5917-47aa-99e2-cb6f4df876ea.ttf', 'sans-serif', 'FZLANTY')
<View className={styles.text} style={{fontFamily}}>淘淘总动员欢迎你</View></View>
В большинстве случаев мы можем выбрать 1 или 2, потому что это почти минимальная стоимость внедрения. Если шрифтов много, можно использовать третий метод.
В этом взаимодействии с Double Eleven мы в основном использовали план 1, потому что специальных шрифтов не так много.
На этом заканчивается введение в обработку шрифтов и изображений во взаимодействии Double Eleven. В этой статье мы обсудили обработку изображений как неотъемлемую часть современной фронтенд-разработки.
Формат WebP становится предпочтительным выбором для все большего числа разработчиков из-за его превосходной эффективности сжатия и качественного обслуживания. Уменьшение размера файла при сохранении качества изображения особенно важно для мобильных пользователей и приложений, предъявляющих строгие требования к скорости загрузки.
В то же время мы обсудили, как динамически корректировать размеры изображений с помощью интерфейсных технологий для удовлетворения потребностей различных устройств и адаптивных макетов. Это не только улучшает взаимодействие с пользователем, но также позволяет избежать ненужной передачи данных и дополнительно оптимизирует производительность.
Что касается обработки суффиксов файлов изображений, это может показаться мелочью, но правильное наименование файлов и настройки суффиксов имеют решающее значение для SEO-оптимизации и обслуживания веб-сайта. Четкое соглашение об именах может помочь поисковым системам лучше понять и индексировать содержимое веб-сайта, а также упростить обслуживание.
На пути к фронтенд-разработке эффективная работа с изображениями является постоянной проблемой. По мере развития технологий мы обязательно увидим появление новых форматов изображений и методов обработки. В будущем определенно возникнет необходимость постоянно изучать и адаптироваться к этим изменениям, чтобы гарантировать, что веб-сайт или приложение смогут обеспечить наилучшую производительность и удобство для пользователя при любых обстоятельствах.
Я с нетерпением жду будущих событий в этой области и буду продолжать следить за последними тенденциями и передовым опытом. Ведь картинка
Изображение стоит тысячи слов. Только оптимизированное изображение может действительно повысить скорость нашей веб-страницы, тем самым давая нам больше возможностей вставлять изображения для привлечения пользователей и сделать веб-страницу более яркой.
Мы — интерактивная команда Taotian Technology, отвечающая за разработку и оптимизацию таких популярных продуктов, как «Ферма Баба», «Монета золотой лихорадки», «Боевые домовладельцы» и «Маленькое странствующее общежитие». Мало того, мы также осуществляем маркетинговые взаимодействия на уровне S/A, такие как двойные рекламные акции, Весенний фестиваль и рыночный PR, предоставляя торговцам, экспертам, ведущим и т. д. интерактивный игровой процесс в частной сфере, позволяя сотням миллионов пользователей опыт более разумного, удобного и качественного потребления.
Кроме того, мы фронтенд-команда, полная энергии, воображения и умения смеяться и получать удовольствие, не занимаясь при этом формальной работой и не откладывая жизнь. Если вы хотите присоединиться к нашей веселой, необычной и высококлассной команде, не сомневайтесь! Мы ищем талантливых фронтенд-инженеров, которые хорошо владеют HTML/CSS/JavaScript и другими технологиями, которые могут легко решать сложные проблемы, любят общаться и сотрудничать с людьми, которые являются новаторскими и командными людьми. Присоединяйтесь к нам и вместе разрабатывайте более интересные и умные интерактивные продукты!
Требования к вакансии
1. Приоритет будет отдан тем, кто специализируется в области компьютеров, коммуникаций, электронной информации и т. д.
2. Знание основных стеков интерфейсных технологий и как минимум одна из интерфейсных инфраструктур React/Vue
3. Иметь хорошее понимание бизнеса, внимание к пользовательскому опыту и способность постоянно оптимизировать
4. Добродушный
Хорошие коммуникативные навыки и навыки работы в команде, приоритет будет отдаваться тем, у кого есть проекты с открытым исходным кодом и зрелые работы
5. Сильная способность к обучению, инициатива в ведении дел и сильное чувство ответственности;
