Rescale کردن تصاویر پیکسلی تصاویر با فرمت SVG مستقل از رزولوشن اند اما تصاویر پیکسلی دارای رزولوشن مطلق ارائه شده در پیکسل ها هستند. درصورتی که همه عوامل دیگر برابر باشند تصاویر دارای پیکسل بیشتر، صفحه را کندتر می کنند. به طور کلی وب با پیکسل ها سر و کار ندارد بلکه رسانه ای شناور است که جدا از یک صفحه نمایش خاص است و ممکن است در هر صفحه ای عملکردی متفاوت داشته باشد. گاهی اوقات بهتر است به مرورگر این اجازه را بدهید که تصویر را Rescale کند بنابراین در هر صفحه نمایشی به طور واکنش گرا عمل می کند. اگر تعداد پیکسلی که برای یک دستگاه ارسال می شود بیشتر از تعداد پیکسل نمایشی خود دستگاه باشد خود مرورگر آن را تغییر اندازه می دهد. بنابراین تصویر کوچک شده و مقداری از پهنای باند اضافه مصرف می شود. در کل بهتر است که شما تصاویر را بهینه سازی کنید به طوری که برای هر دستگاه تصویری بالاتر از رزولوشن مورد نیاز ارسال نشود. مخاطب سایت شما همیشه در حال تغییر است و در اینجا فرمت های SVG برتری خود را نشان می دهند. با این حال هنوز هم امکان ارتقا و بهبود هست. این خیلی بهتر است که تصاویر را برای دستگاه هایی ارائه بدهیم که قادر به استفاده از آن ها هستیم. پروژه هایی مانند Responsive Images Community Group و Zurb Interchange در حال تلاش برای بهبود امکانات این حوزه هستند.
انتخاب PNG برای عملکرد فرمت SVG برای استفاده در شکل های هندسی بسیار مناسب است درحالی که JPG برای تصاویر هنری مناسب تر است. با این حال بعضی اوقات برای یک شکل هنری نمی توان فرمت SVG پیدا کرد و تاثیرات فشرده سازی JPG باعث زشت شدن تصویر در بخش های دارای رنگ Flat یا خطوط هندسی است. به علاوه ممکن است که تصویر شما دارای پس زمینه شفاف باشد. در این مواقع بهترین گزینه فرمت PNG است که در دو حالت PNG-8 و PNG-24 وجود دارد. PNG-8 از یک پالت تطبیقی که تا 256 رنگ را پشتیبانی می کند استفاده می کند که یکی از این رنگ ها رنگ شفاف یا Transparent است. اما این شفافیت باینری است. یعنی یا بخشی از شکل کاملا شفاف است یا کاملا مات و هیچ درجه بندی جزئی برای آن وجود ندارد. اگر یک تصویر PNG-8 دارای پیکسل های روشنی باشد که روی یک پس زمینه تیره قرار باشد، لبه های ناهمواری ایجاد شده که به وضوح نشان داده می شوند اما قابلیت خوب این فرمت حجم نسبتا مناسب آن است. PNG-24 از پالت رنگی کامل و شفافیت دارای جزئیات کامل بهره می برد و در نتیجه تصاویر با وضوح و شفافیت در این فرمت خود را نشان می دهند و تنها فرمتی است که برای نشان دادن شفافیت بطور کامل بکار می رود. اما نکته منفی این فرمت حجم بالای آن است. اگر واقعا مجبورید که از فرمت PNG استفاده کنید بهتر است از PNG-8 استفاده کنید و سعی کنید تا حد امکان پالت رنگی خود را محدود تر کنید و فقط در مواقعی از PNG-24 استفاده کنید که تصویر مورد نظر دارای شفافیت درصدی است. اگر شفافیت در تمام عکس یکسان است می توانید از فرمت کم حجم تر و کمی کد نویسی CSS استفاده کنید.
از فرمت انیمیشنی GIF خیلی کم استفاده کنید فرمت GIF در دهه 1990 خیلی استفاده می شد و تازه ساخته شده بود. دلیل استفاده نکردن از این فرمت خیلی واضح است: فرمت GIF باعث افزایش حجم تصویر حتی بیشتر از یک ویدئوی HTML5 می شود. اگر هم واقعا مجبورید که از تصاویر GIF استفاده کنید حتما به حجم صفحه توجه داشته باشید .
فشرده سازی زیاد در تصاویر با سایز دو برابر هنگامی که تصاویر پیکسلی را در نمایشگرهایی با تراکم پیکسل بالا مانند صفحات رتینای اپل باز کنیم، برای نمایش درست این تصاویر باید آنها را در این نمایشگرها با سایز دو یا سه برابر اندازه عادی ارائه بدهیم. این دستگاه ها تعداد پیکسل های بیشتری را روی نمایشگر خود نمایش می دهند که به آنها پیکسل های مجازی می گویند. در آیفون های مدرن برای نمایش یک تصویر در سایز 200*200 باید آن تصویر را در سایز 400*400 ارائه بدهیم در غیر این صورت تصویر تار می شود. با این که تصاویر دارای سایز 2 برابر دارای پیکسل بیشتری هستند جالب است بدانید که اثر فشرده سازی در این سایز برای تصاویر بیشتر است!
بارگذاری تصاویر JPEG به صورت تدریجی روش بارگذاری تصاویر JPEG اصولا به این صورت است که هر بخش از تصویر از بالا به پایین دانلود می شود و بصورت بخش به بخش روی صفحه به نمایش در می آید. اما می توان آنها را بصورت تدریجی بارگذاری کرد به این صورت که ابتدا تصویر تار بارگذاری می شود و پس از چند ثانیه تصویر واضح و نهایی نشان داده می شود. این روش هیچ تاثیری روی سرعت بارگذاری تصویر ندارد اما به خاطر تاثیر ادراکی روی بیننده به نظر می رسد که سرعت بارگذاری سایت بیشتر است. چشم انسان در یک زمان تنها می تواند روی یک بخش بسیار کوچک متمرکز شود بنابراین از دید کاربران، بارگذاری تدریجی تصاویر از تار به کاملا شفاف سریعتر از حالت بارگذاری از بالا به پایین به نظر می رسد.
سعی کنید از فرمت SVG استفاده کنید گرافیک برداری مقیاس پذیر یا SVG یک زبان نشانه گذاری XML برای ذخیره سازی تصاویر وکتور است. برخلاف بسیاری از فرمت های معروف که از داده های پیکسلی برای نمایش تصاویر استفاده می کنند، SVG از نقاطی به نام بردار یا وکتور تشکیل شده است که در یک شبکه هماهنگ دو بعدی ترسیم شده اند. اکثر طراحان حرفه ای از نرم افزارهای مخصوص طراحی تصاویر وکتور مانند Adobe Illustrator استفاده می کنند اما برای طراحی های ساده تر می توان از ابزارهای رایگان و تحت وب مانند Method Draw و Mondrian استفاده کرد. فرمت SVG برای وب بسیار مناسب است چون علاوه بر رزولوشن نامحدود، دارای حجم بسیار کمی نیز است. به عبارت دیگر، می توان تصاویر وکتور را بدون افت کیفیت بزرگ کرد. این قابلیت به خاطر آن است که تصاویر وکتور به جای استفاده از پیکسل ها برای نمایش تصاویر از یکسری مختصات استفاده می کنند که بعدا این مختصات به صورت یک فایل تصویری پیکسلی، بدون در نظر گرفتن رزولوشن در می آیند. این فرمت تنها برای استفاده در تصاویر ساده گرافیکی مناسب است و در همه جا کارآمد نیست. به عنوان مثال نمی توان در تصاویر با جزئیات بالا از این فرمت استفاده کرد و هنوز برای استفاده از این تصاویر از فرمت های پیکسلی استفاده می شود. لازم به ذکر است که از این فرمت در مرورگرهای مدرن و مرورگر IE9 به بعد نیز پشتیبانی می شود.
