AI-જનરેટેડ કન્ટેન્ટ માટે ઈમેજ ઓપ્ટિમાઇઝેશન
AI ઈમેજીસ એક અનોખી પર્ફોર્મન્સ સમસ્યા ઊભી કરે છે. જ્યાં સુધી જનરેશન પૂરું ન થાય ત્યાં સુધી તમે ઈમેજનું કદ, ફોર્મેટ અથવા કન્ટેન્ટ વિશે જાણી શકતા નથી. તેમ છતાં તમારે ધીમી લોડિંગ અને લેઆઉટ શિફ્ટ (layout shifts) ને રોકવાની જરૂર છે.
જ્યારે મેં ફ્રી AI ઈમેજ જનરેટર બનાવ્યું ત્યારે મેં આ સ્ટેપ્સનો ઉપયોગ કર્યો હતો.
સ્ટાન્ડર્ડ ઓપ્ટિમાઇઝેશનમાં એવું માની લેવામાં આવે છે કે તમે ઈમેજ વિશે અગાઉથી જાણો છો. તમે ડાયમેન્શનની ગણતરી કરી શકો છો અને બિલ્ડ ટાઈમ પર ઓપ્ટિમાઇઝ કરી શકો છો. જનરેટેડ ઈમેજીસ આ નિયમ તોડે છે. જ્યાં સુધી યુઝર રિક્વેસ્ટ ન કરે ત્યાં સુધી ઈમેજ અસ્તિત્વમાં હોતી નથી.
ડિલિવરી કેવી રીતે હેન્ડલ કરવી:
- રો (Raw) AI આઉટપુટ સામાન્ય રીતે PNG હોય છે. PNG ફાઇલો ખૂબ મોટી હોય છે, જે ઘણીવાર 800KB થી 1.2MB ની વચ્ચે હોય છે.
- ઈમેજીસને WebP માં કન્વર્ટ કરો. સમાન ક્વોલિટી પર WebP ફાઇલો PNG કરતા 25% થી 35% નાની હોય છે.
- WebP માટે 85 ક્વોલિટીનો ઉપયોગ કરો. AI ઈમેજીસમાં કુદરતી ટેક્સચર નોઈઝ (texture noise) હોય છે. ઉચ્ચ સેટિંગ્સ વિઝ્યુઅલ ક્વોલિટી સુધાર્યા વગર ફાઇલ સાઈઝ વધારી દે છે.
લેઆઉટ શિફ્ટ કેવી રીતે રોકવા:
યુઝર્સ જનરેટ પર ક્લિક કરતા પહેલા એસ્પેક્ટ રેશિયો (aspect ratio) પસંદ કરે છે. આનો તમારા ફાયદા માટે ઉપયોગ કરો.
- પસંદ કરેલા રેશિયો (1:1, 16:9, વગેરે) ના આધારે કન્ટેનરનું સાઈઝ અગાઉથી નક્કી કરો (Pre-size).
- આ ઈમેજ આવતા પહેલા કન્ટેનરને સાચા કદમાં રાખે છે.
- તે ક્યુમ્યુલેટિવ લેઆઉટ શિફ્ટ (CLS) ને દૂર કરે છે.
લોડિંગ સ્પીડ કેવી રીતે સુધારવી:
જનરેટેડ ઈમેજ સામાન્ય રીતે Largest Contentful Paint (LCP) એલિમેન્ટ હોય છે.
- તમારા કોડમાં ઈમેજને પ્રાયોરિટી (priority) તરીકે માર્ક કરો.
- તમારા CDN માટે preconnect લિંકનો ઉપયોગ કરો. આ DNS અને TLS હેન્ડશેકને વહેલા હેન્ડલ કરે છે.
- એવા સ્કેલેટન લોડર (skeleton loader) નો ઉપયોગ કરો જે અંતિમ ઈમેજ જેટલી જ જગ્યા રોકે છે.
કેશિંગ સ્ટ્રેટેજી:
- ઇન્ફરન્સ લેયર (inference layer) પર કેશ કરશો નહીં. દરેક રિક્વેસ્ટ તાજી (fresh) હોવી જોઈએ.
- ડિલિવરી સ્પીડ માટે CDN લેયર પર કેશ કરો.
- દરેક ઈમેજનું યુનિક URL હોય છે, તેથી એગ્રેસિવ કેશિંગ સુરક્ષિત છે.
આ ફેરફારોના પરિણામો:
- સરેરાશ કદ: 900KB થી 200KB.
- LCP: 4.1s થી 1.9s.
- CLS: દૂર કરવામાં આવ્યું.
એક્શનનો સારાંશ:
- 85 ક્વોલિટી પર WebP માં કન્વર્ટ કરો.
- પસંદ કરેલા એસ્પેક્ટ રેશિયોનો ઉપયોગ કરીને કન્ટેનરનું સાઈઝ અગાઉથી નક્કી કરો.
- પ્રાઇમરી ઈમેજને પ્રાયોરિટી લોડિંગ પર સેટ કરો.
- CDN લેવલ પર વધુ પ્રમાણમાં કેશ કરો.
- 'Below the fold' (સ્ક્રીન પર દેખાતા ભાગની નીચેના) સેકન્ડરી કન્ટેન્ટ માટે જ લેઝી લોડિંગ (lazy loading) નો ઉપયોગ કરો.
વૈકલ્પિક લર્નિંગ કોમ્યુનિટી: https://t.me/GyaanSetuAi