Mac ನಲ್ಲಿ srcset ಗಾಗಿ ಸ್ಪಂದಿಸುವ WebP ಚಿತ್ರಗಳನ್ನು ರಚಿಸಿ

ನಿಮ್ಮ ಆರಂಭಿಕ ಹಂತ

PixRinse ನಲ್ಲಿ ರೆಸ್ಪಾನ್ಸಿವ್ Web ಬಳಸಿ, ನಂತರ ನಿಮ್ಮ ನಿಜವಾದ ಗಮ್ಯಸ್ಥಾನದ ವಿರುದ್ಧ ಈ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಿ.

ಅದನ್ನು ಹೇಗೆ ಮಾಡುವುದು

1. ಮೂಲ ಆಸ್ತಿಯೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ

   ನಿಮಗೆ ಅಗತ್ಯವಿರುವ ದೊಡ್ಡ ರೂಪಾಂತರಕ್ಕಾಗಿ ಸಾಕಷ್ಟು ವಿಶಾಲವಾದ ಮೂಲವನ್ನು ಬಳಸಿ. ಪ್ರತಿ ವ್ಯುತ್ಪನ್ನವನ್ನು ಪುನರಾವರ್ತಿತವಾಗಿ ಮರುಗಾತ್ರಗೊಳಿಸುವ ಬದಲು ಮೂಲದಿಂದ ರಚಿಸಲಾಗಿದೆ.

2. ರೆಸ್ಪಾನ್ಸಿವ್ Web ಆಯ್ಕೆಮಾಡಿ

   ನಾಲ್ಕು ಅಂತರ್ನಿರ್ಮಿತ ಅಗಲಗಳು ಮತ್ತು ಫೈಲ್ ಹೆಸರುಗಳನ್ನು ಪರಿಶೀಲಿಸಿ. ಮೂಲಕ್ಕಿಂತ ವಿಶಾಲವಾದ ರೂಪಾಂತರಗಳನ್ನು ಬಿಟ್ಟುಬಿಡಲಾಗಿದೆ, ಆದ್ದರಿಂದ ಯೋಜಿತ ಔಟ್‌ಪುಟ್ ಎಣಿಕೆಯನ್ನು ಪರೀಕ್ಷಿಸಿ.

3. ಇಮೇಜ್ ಸೆಟ್ ಅನ್ನು ರಫ್ತು ಮಾಡಿ

   ಎಲ್ಲಾ ಔಟ್‌ಪುಟ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಿ. ಪ್ರತಿ ಮೂಲಕ್ಕೆ ಬಹು ಉತ್ಪನ್ನಗಳಿಗೆ ಪ್ರೊ ಅಗತ್ಯವಿದೆ; ಏಕ-ಗಾತ್ರದ ಕೆಲಸದ ಹರಿವನ್ನು ಪರೀಕ್ಷಿಸಲು ಉಚಿತ ಶ್ರೇಣಿಯನ್ನು ಇನ್ನೂ ಬಳಸಬಹುದು.

4. ನಿಮ್ಮ ಪುಟಕ್ಕೆ ಚಿತ್ರಗಳನ್ನು ಸೇರಿಸಿ

   srcset ನಲ್ಲಿ ಅಗಲ ವಿವರಣೆಗಳನ್ನು ಬಳಸಿ ಮತ್ತು ನಿಜವಾದ ವಿನ್ಯಾಸವನ್ನು ಹೊಂದಿಸಲು sizes ಹೊಂದಿಸಿ. ಚಿತ್ರದ ಅಂಶದ ಮೇಲೆ ನಿಖರವಾದ ಅಗಲ, ಎತ್ತರ ಮತ್ತು ಪರ್ಯಾಯ ಪಠ್ಯವನ್ನು ಸೇರಿಸಿ.

<img
  src="vase-1280w.webp"
  srcset="vase-320w.webp 320w,
          vase-640w.webp 640w,
          vase-1280w.webp 1280w,
          vase-1920w.webp 1920w"
  sizes="(max-width: 720px) 100vw, 960px"
  width="1280" height="853"
  alt="A terracotta vase with an olive branch"
>

ಒಂದೆರಡು ಸಾಮಾನ್ಯ ಪ್ರಶ್ನೆಗಳು