یک ویژگی بسیار عالی که در طراحی سایت حرفه ای انجام می شود عملیات Thumbnail است که سرعت سایت را زمان بارگذاری محتویات آن تسریع می بخشد. به عبارت دیگر با این عمل سایت کم حجمتر شده و راحتتر مورد استفاده کاربران قرار می گیرد. قابلیت Thumbnail بر روی تصاویر انجام می شود، حتما در سایت های مختلف دیده اید که تصویری در اندازه کوچک قرار داده شده است و بعد از کلیک بر روی آن تصویر را در سایز واقعی آن می توانید ببینید. با آدرس دهی نسبی در آموزش 7 برای طراحی سایت و نمایش یک عکس آشنا شدید. برای اینکه بتوانید طراحی سایت حرفه ای را بهتر بیاموزید لازم است کار با تصاویر و نمایش آن ها در مرورگر را به صورت حرفه ای تر بشناسید.
به دلیل اشتباهی که در ادرس دهی تصویر رخ داده است، تصویر قابل نمایش نمی باشد و این به دلیل تایپ نادرست Pictures اتفاق افتاده است. برای اینکه چنین اتفاق هایی ممکن است ایجاد شود یک خصوصیت با نام alt در تگ <img> می توان استفاده نمود و توضیحاتی را در پس عکس نوشت، این خصوصیت یک خصوصیت مهم برای نمایش عکس ها و تصاویر شناخته می شود.
دو خصوصیت مهم در نمایش تصاویر width، height می باشد که در به کارگیری عملیات Thumbnail تاثیر دارد و سایز تصویر را کوچک و بزرگ می کنند. البته به این نکته توجه داشته باشید که برای ان که حالت دفرم برای تصویر به وجود نیاید. بهتر است یکی از خصوصیات width، height را تغییر داد تا دیگری به نسبت آن تغییر کند و حالت دفرم برای عکس به وجود نیاید.
درست است که تصویر زیر به حالت یک مربع در آمده است اما حالتی دفرم دارد و این از جذابیت و کیفیت آن می کاهد:
در تصویر زیر تنها یکی از خصوصیات تغییر داده شده است:
بنابراین این در نظر داشتن چنین نکاتی می تواند شما را در طراحی سایت حرفه ای و کاربر پسند موفق گرداند.
به خوبی توانستیم سایز تصویر را به سایزی مناسب و کم حجم در ابعاد کوچک نمایش دهیم، حال نوبت به ان رسیده است تا برای آن لینکی تعریف کنیم و کاربران را با یک کلیک به اندازه وقعی تصویر هدایت کنیم. قطعا تگ <a> و خصوصیت href را به خاطر دارید:
به این ترتیب تصویر واقعی عکس Koala.jpg با یک کلیک نمایش داده می شود:
می توانید تصویر واقعی Koala.jpg را در فایل HTML دیگری لینک دهید و باز کنید. کافی است تصویر را در صفحه HTML دیگری قرار دهید و سپس در خصوصیت href مسیر فایل HTML که عکس با سایز واقعی در آن قرار دارد، لینک دهید: