एक स्केल की गई छवि क्या है और मैं किसी वेबपृष्ठ में कैसे सेवा करूं?

Question

वान मैं Google पेजस्पेड में एक परीक्षण पृष्ठ चलाता हूं। मैंने पाया उदाहरण के लिए की तरह कुछ चेतावनियों के स्केल की गई छवियों की सेवा ..

http://man-vimal.net78.net/introduction/?intro/action=main 

THe results were as such : 
The following images are resized in HTML or CSS. Serving scaled images could save 449.3KiB (99% reduction). 
http://man-vimal.net78.net/.../twitter-logo.png is resized in HTML or CSS from 367x367 to 20x20. Serving a scaled image could save 140.9KiB (99% reduction). 
http://man-vimal.net78.net/introduction/views/images/fb.png is resized in HTML or CSS from 1,692x1,692 to 20x20. Serving a scaled image could save 115.9KiB (99% reduction). 
http://man-vimal.net78.net/.../linkedin.jpg is resized in HTML or CSS from 1,024x768 to 20x20. Serving a scaled image could save 99.6KiB (99% reduction). 
http://man-vimal.net78.net/.../panorama.jpg is resized in HTML or CSS from 604x453 to 100x100. Serving a scaled image could save 81KiB (96% reduction). 
http://man-vimal.net78.net/.../googleplus.jpg is resized in HTML or CSS from 450x320 to 20x20. Serving a scaled image could save 12KiB (99% reduction). 

एक स्केल छवि क्या है और कैसे मैं इस अप ठीक कर सकते हैं ??

Answer 1

एक स्केल की गई छवि एक छवि है जिसे प्रदर्शित होने वाले आकार से मेल खाने के लिए स्केल किया गया है।

http://man-vimal.net78.net/.../twitter-logo.png is resized in HTML or CSS from 367x367 to 20x20. Serving a scaled image could save 140.9KiB (99% reduction). 

यह आपको बता रहा है कि आपकी स्रोत छवि 367x367 है लेकिन आप इसे 20x20 पर प्रदर्शित कर रहे हैं।

यह अक्षम है क्योंकि ब्राउज़र को बड़ी छवि डाउनलोड करना है और फिर इसे पुन: सहेजना है। 367x367 छवि 20x20 छवि से 140kb बड़ी होगी।

इसे ठीक करने के लिए, छवि का आकार बदलें (फ़ोटोशॉप, पूर्वावलोकन, आदि में) ताकि 20x20 हो और उस छवि की बजाय उस पर सेवा करें जिसे आप वर्तमान में सेवा कर रहे हैं।

img { width: 300px; }

:

Answer 2

आपकी छवियां बहुत बड़ी हैं। बस उनका आकार बदलें। आप ऐसा करने के लिए पेंट का भी उपयोग कर सकते हैं। एक स्केल की गई छवि मूल रूप से एक आकार बदलती छवि है।

Answer 3

ठेठ स्थिति, कहते हैं कि तुम 400px की चौड़ाई के साथ एक छवि है, लेकिन यह अपने लेआउट में फिट नहीं करता है, ताकि आप अपने शैली पत्रक के पास जाकर लिखना है यहां, आपने छवि को सीएसएस के साथ बदल दिया है। लेकिन आप अभी भी 400px आकार में छवि की सेवा कर रहे हैं और छवि को स्केल कर रहे हैं।

यहां निहितार्थ यह है कि 400px छवि का उपयोग करने के बजाय, आपको उस छवि का आकार बदलना चाहिए जिसकी आपको आवश्यकता है क्योंकि फ़ाइल का आकार छोटा होगा, और इस प्रकार पृष्ठ तेज़ी से लोड हो जाएगा।

Answer 4

उदाहरण के लिए, यदि वेबसाइट का कोई उपयोगकर्ता आकार 400px x 400px की छवि अपलोड करता है और आप इस छवि का उपयोग थंबनेल के रूप में करते हैं तो 40px x 40px html/css का उपयोग करते हुए कहते हैं।

वेब ब्राउज़र को बड़ी छवि डाउनलोड करना है और इसे छोटे आकार में गणना करना है। इस समस्या को हल करने का सबसे अच्छा तरीका छवि की एक अलग प्रतिलिपि बनाना है, 'जब उपयोगकर्ता छवि अपलोड करता है' और फिर इसे सीधे उपयोग करें।

तो वेब ब्राउज़र को छवि को अक्षमता से स्केल करने की आवश्यकता नहीं है।

मुझे उम्मीद है कि इससे मदद मिलती है।

Answer 5

एक स्केल की गई छवि एक छवि है जिसका आकार सीएसएस या एचटीएमएल में परिभाषित आकार के साथ बिल्कुल मेल खाता है।

अपनी मूल छवि कहा जाता चहचहाना-logo.png की कहते हैं कि 300 x 250 आयाम लेकिन आयाम एचटीएमएल बयान में परिभाषित किया गया है की सुविधा देता है है, तो:

<img src="http://man-vimal.net78.net/.../twitter-logo.png" width="600" height="500"> 

तो ब्राउज़र पहले मूल छवि डाउनलोड करेगा (जो 300 x 250 का आयाम है) और उसके बाद HTML कथन में परिभाषित आयामों से मेल खाने के लिए इसका आकार बदल जाएगा। यानी 600 x 500

एचटीएमएल या सीएसएस में छवियों का यह आकार बदलना समग्र पृष्ठ को काफी हद तक धीमा कर देता है और इससे बचा जाना चाहिए।

छवियों का आकार बदलने के लिए (और उन्हें लापरवाही से अनुकूलित करने के लिए) आप RIOT नामक एक मुफ्त सॉफ्टवेयर का उपयोग कर सकते हैं (केवल विंडोज के लिए उपलब्ध)।