Мундариҷа
- Интихоб кунед ва тасвирҳои муҳимро пешакӣ бор кунед
- SVG-и худро ба таври худкор содда кунед
- Табдил додани GIF тасвирҳои мутаҳаррикро ба видео
- Боркунии танбал бо IntersectionObserver
Чанд таҳиягари хушбахт ва ин муаллиф имкон доштанд, ки китоби электронии оптималии тасвири нави Адди Османи, Essential Image Optimization -ро таҳрир кунанд, ки шумо онро комилан бояд бихонед.
- 10 роҳи оптимизатсияи тасвирҳо барои иҷрои беҳтар
Новобаста аз он ки шумо вебсайтҳои пурраи электронии тиҷоратӣ месозед ва ё танҳо барои портфели тарроҳии худ хонаи онлайн месозед, дар ин мақола шумо якчанд маслиҳатро аз китоби Адди меомӯзед, ки тасвирҳои шуморо ба ҳамвор ва зудтар месозад.
Интихоб кунед ва тасвирҳои муҳимро пешакӣ бор кунед
Ба сайти худ назар кунед ва дороиҳои муҳимро муайян кунед. Барои аксарият, ин як тасвири логотип ё қаҳрамонест, ки шумо мехоҳед ҳарчи зудтар онро тасвир кунед.
Ин аст, ки дар пешакӣ ишораи манбаъ ворид мешавад. пешакӣ ин усули ишора ба мизоҷ аст, ки дороӣ бояд пеш аз кашф кардани браузер пайдо карда шавад. Шумо метавонед онро барои чизи хеле зиёд истифода баред, аммо он барои пешакӣ бор кардани тасвирҳои интиқодӣ ба таври аъло кор мекунад. Ин намунаи он аст, ки дар HTML истифода мешавад сар> унсури бо мақсади пешакӣ бор кардани тасвири баннерҳои қаҳрамон:
пайванд rel = "preload" href = "/ img / logo.svg" as = "image">
Шумо инчунин метавонед пешакиро дар сарлавҳаи HTTP истифода баред:
Истинод: /img/logo.svg>; rel = пешакӣ; ҳамчун = тасвир
Дар зер шумо метавонед ду рӯйхати скриншотро дар ҳамон саҳифа дар Chrome пурбор кунед. Як сенария истифода мебарад пешакӣ то тасвири баннерҳои қаҳрамонро бор кунад, дар ҳоле ки дигаре не.
Дар мисол бо пешакӣ, тасвири баннер дар равзанаи браузер ним сония тезтар пайдо мешавад. Ҳама аз сабаби як лайнераи зуд, ки ба браузер ибтидо гузоштанд.
SVG-и худро ба таври худкор содда кунед
Оптимизатсияи SVG аз дигар намудҳои тасвир фарқ мекунад, зеро ба фарқ аз JPEG ё PNGs, SVG аз матн, алахусус аломатгузории XML иборат аст. Ин маънои онро дорад, ки оптимизатсияҳои маъмулие, ки шумо нисбати дороиҳои матнӣ татбиқ мекунед (масалан, minification, фишурдани gzip / Brotli) метавонанд ба SVGҳо низ татбиқ карда шаванд. Ғайр аз он, шумо метавонед оптимизаторро, ба монанди SVGO, истифода баред, то андозаи SVG-ҳоро коҳиш диҳед.
Аммо агар шумо на танҳо асари векториро истеъмол кунед, балки онро эҷод кунед? Агар шумо корбари Illustrator бошед, шумо метавонед ба таври худкор асари бадеии худро соддатар кунед, то миқдори нуқтаҳои лангарро дар роҳҳо тавассути равзанаи муколамаи Содда кардан кам кунед.
Ин муколамаро дар менюи Illustrator CC тавассути гузаштан ба Объект> Роҳ> Содда кардан мумкин аст. Бо кам кардани дақиқии Curve (ва ба таври ихтиёрӣ танзим кардани ҳадди аққал), имкон дорад, ки нуқтаҳои иловагии роҳро дар асари худ хориҷ кунед. Дар ин ҳолат, шумо қайд мекунед, ки коҳиши дақиқии Curve то 6% 54 нуқтаи роҳро нест мекунад. Агар оқилона истифода карда шавад, ҳатто метавонад намуди зоҳирии асарҳои шуморо беҳтар созад.
Сухан ба оқилон - бо он чӣ қадар хашмгин буданатонро эҳтиёт кунед. Дурустии Curve -ро аз ҳад зиёд зиёд кунед ва асари бадеии як бор бодиққат таҳияшудаи шумо ба варақ табдил хоҳад ёфт. Ҳарчанд тавозуни дурустро ҳифз кунед, ва шумо фоидаҳоро ба даст хоҳед овард.
Табдил додани GIF тасвирҳои мутаҳаррикро ба видео
Ҳамаи мо GIF-и мутаҳаррикро хуб дӯст медорем. Онҳо тақрибан ҳама гуна эҳсосотро ба таври муассир мерасонанд, аммо онҳо метавонанд воқеан бузург бошанд. Оптимизаторҳои тасвир, аз қабили gifsicle, метавонанд барои канда шудани килобайтҳои зиёдатӣ кӯмак кунанд, аммо чипта он аст, ки он GIF-ҳоро ба видео табдил диҳед ва дар HTML5 ҷойгир кунед видео> барчасп Дар ffmpeg Утили хати фармон барои ин вазифа хеле мувофиқ аст:
ffmpeg -i animated.gif -b: v 512K animated.webm ffmpeg -i animated.gif -b: v 512K animated.ogv ffmpeg -i animated.gif -b: v 512K animated.mp4
Фармонҳои дар боло овардашуда манбаи GIF (animated.gif) ҳамчун вуруд дар -i далел ва баромади видео бо суръати тағйирёбандаи максимум 512Kbps. Дар озмоиши худамон, мо тавонистем GIF-и аниматсионии 989Kb гирем ва онро ба 155Kb MP4, 109Kb OGV ва 85Kb WebM коҳиш диҳем. Ҳама файлҳои видеоӣ аз ҷиҳати сифат бо манбаи GIF муқоиса карда мешуданд. Азбаски дар ҳама ҷо маъмул будани видео> дастгирии барчасп дар браузерҳо, ин се форматҳои видеоиро чунин истифода бурдан мумкин аст:
video preload = "none"> source src = "/ videos / animated.webm" type = "video / webm"> source src = "/ videos / animated.ogv" type = "video / ogg"> source src = "/ videos / animated.mp4 "type =" video / mp4 "> / video>
Агар шумо қарор кунед, ки бо ин роҳ равед, ҳатман фармоиш диҳед сарчашма> барчаспҳоро тавре мегузоранд, ки аввал формати беҳтарин ва оптималии аз ҳама охирин нишон дода шаванд. Дар аксари ҳолатҳо, ин маънои онро дорад, ки шумо аввал аз видеоҳои WebM оғоз мекунед, аммо андозаи файли баромади ҳар як видеоро тафтиш кунед ва бо ҳар чизе, ки хурдтарин бошад, гузаред ва бо ҳар чӣ калонтарин ба анҷом расед.
Агар шумо FFmpeg надошта бошед ё намедонед, ки ин чист, санҷед. Насб кардан тавассути аксари менеҷерҳои бастаи системаи оператсионӣ, ба монанди Homebrew ё Chocolatey, осон аст.
Боркунии танбал бо IntersectionObserver
Тасвирҳои боркунии танбал корест, ки шумо аллакай карда метавонед, аммо бисёр скриптҳои боркунии танбал коркардкунандагони рӯйдодҳои ҳаракатро аз CPU пуршиддат истифода мебаранд. Чунин усулҳо ба ҳамкории суст дар саҳифа мусоидат мекунанд. Таҷҳизоти кӯҳнатарин, ки қудрати коркарди онҳо камтар аст, ба таъсири бади ин навъи код бештар дучор меоянд. Кӯтоҳ кардани иҷро то андозае кӯмак мекунад, аммо он ҳанӯз ҳам барои ҳалли мушаххаси бесамар ва бесамар барои муайян кардани вақте, ки унсурҳо дар намуди намоиш ҷойгиранд.
Хушбахтона, API Intersection Observer ба мо роҳи соддатар ва хеле самарабахши муайян кардани вақте ки унсурҳо дар намуди намоиш мебошанд, медиҳад. Ин намунаи баъзе нишонаҳои тасвири боркунии танбал аст:
img data-src = "/ images / lazy-loaded-image.webp" src = "/ images / placeholder.webp" alt = "Ман танбал ҳастам." width = "320" height = "240">
Дар ин ҷо, мо тасвири ҷойнишинро дар src атрибутӣ ва пас URL-ро барои тасвире, ки мо мехоҳем онҳоро бо танбалӣ дар он бор кунем, нигоҳ доред data-src аттрибутӣ. Ба болои ин ҳама, мо медиҳем имг> унсури синфи танбал барои дастрасии осон бо querySelectorAll. Аз он ҷо, мо танҳо ин рамзро истифода мебарем:
document.addEventListener ("DOMContentLoaded", function () {if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {elements = document.querySelectorAll ("img." var imageObserver = IntersectionObserver нав (функсия (вурудот, нозир)) {entries.forEach (function (entry) {if (entry.isIntersecting) {entry.target.setAttribute ("src", entry.target.getAttribute ("data-src" entry.target.classList.remove ("танбал"); imageObserver.unobserve (entry.target);}});}); elements.forEach (function (image) {imageObserver.observe (image);}) ;}});
Дар ин ҷо, мо рамзро ба ҳуҷҷат объект DOMContentLoaded чорабинӣ. Ин рамз месанҷад, ки оё Обсервери чорроҳаро браузери ҷорӣ дастгирӣ мекунад ё не. Агар маълум шавад, ки мо ҳастем им унсурҳои дорои синфи танбал бо querySelectorAll ва сипас нозиронро ба онҳо вобаста кунед.
Нозир дорои истинодҳо ба унсурҳое мебошад, ки мо мушоҳида мекунем (вурудот) ва худи нозир (нозир). Ин рамз ба ҳар як вуруди нозир вобаста аст isIntersecting арзиш. Дар ҳоле, ки унсури мушоҳидашуда аз намуди намоиш берун аст, isIntersecting бармегардад 0. Ҳангоме ки унсур ба намуди намоиш ворид мешавад, он арзиши бузургтар аз онро бармегардонад 0. Дар ин лаҳза мо мундариҷаи тасвирро иваз мекунем data-src хосият ба src атрибутӣ ва хориҷ кардани он танбал синф. Пас аз он ки тасвири додашуда танбалӣ мекунад, мушоҳидачӣ аз он хориҷ карда мешавад риоя накардан усул.
Ин раванд аз муомилаи атроф бо коркардкунандагони ҳаракат хеле осонтар аст, аммо азбаски Intersection Observer аз дастгирии универсалӣ баҳра намебарад, шумо бояд ба онҳо баргардед. Агар шумо як навъ скриптро гиред ва равед, мо як боркунаки танбалро навиштем, ки Intersection Observer -ро истифода мебарад, аммо ба усулҳои пешин низ бармегардад. Шумо метавонед онро дар ин ҷо гиред.
Ин мақола дар аввал дар шумораи 301 аз чоп шудааст тӯр, маҷаллаи серхаридори ҷаҳон барои тарроҳони веб ва таҳиягарон. Шумораи 301-ро дар ин ҷо харед ё дар ин ҷо обуна шавед.
