یکی از محتویاتی که در سایت ها هنگام طراحی سایت مورد استفاده قرار می گیرد و بسیار مورد استقبال کاربران است، تصاویر و عکس هایی است که روی سایت نمایش داده می شود. طراحی سایت حرفه ای مستلزم محتویات بسیاری از جمله گالری تصاویر می باشد. تصاویر انتخابی هنگام طراحی سایت باید شامل سه نوع jpg, gif, png باشند تا برای مرورگرها قابل تحلیل و نمایش شوند. اشکال هندسی مانند لوگوها که تعداد رنگ کمی در آن ها به کار می رود بهتر است از نوع gif تعریف شوند و برای تصاویری با تعداد رنگ زیاد از jpg استفاده کرد، مانند عکسی که با دوربین های عکاسی گرفته می شود. نوع png منعطف است و خصوصیات خوب هر دو نوع gif, jpg را دارا می باشد. بنابراین توصیه در طراحی سایت حرفه ای به استفاده از تصاویر با پسوند png می باشد.
به طور کلی در طراحی سایت با HTML نمایش عکس با تگ <img> انجام می شود و دارای خصوصیاتی همچون src، alt، width، height می باشد که امکاناتی را برای نمایش تصاویر ایجاد می سازد. همیشه به خاطر داشته باشید تگ <img> تگی empty elements و elements Inline می باشد و src خصوصیتی است که همیشه به همراه آن می آید.
البته چنین آدرس دهی در طراحی سایت به ویژه برای یادگیری طراحی سایت حرفه ای اشتباه است زیرا چنین آدرس دهی فقط زمانی باعث لود شدن تصاویر در مرورگر می شود که بر روی سیستم کامپیوتری خودتان انجام گیرد، اگر سایت را به کامپیوتری دیگر منتقل کنید، تصاویر قادر به لود شدن نخواهند بود. بنابراین آدرس دهی به صورت فوق که به نام آدرس دهی فیزیکی شناخته می شود در طراحی سایت ارزشی نخواهد داشت. یک نمونه آدرس دهی به نام آدرس دهی نسبی وجود دارد که مسیردهی با آن برای طراحی سایت انجام می گیرد. به مسیر تصویر فوق دقت کنید:
فایل test4.html می خواهد عکس koala.jpg را فراخوانی کند و در مرورگر به نمایش بگذارد، آدرس نسبی برای فراخوانی عکس به ان ترتیب تعریف می شود: باید فایل test4.html به اندازه هر پوشه ای که لازم است به عقب برگردد و به جای آن پوشه از ../ استفاده کند. چون فایل HTML در پوشه Desktop قرار دارد و فایل مورد نظر یعنی عکس Koala.jpg در Desktop نیست یک پوشه به عقب برگشته و از آنجایی که در پوشه Animal که در پوشه Pictures است، قرار دارد، فراخوانی را از این پوشه انجام می دهد؛