<!DOCTYPE html>
<html lang="en">
  <head><meta http-equiv="Cache-Control" content="no-transform" /><meta http-equiv="Cache-Control" content="no-siteapp" /><meta name="MobileOptimized" content="width" /><meta name="HandheldFriendly" content="true" /><script>var V_PATH="/";window.onerror=function(){ return true; };</script><meta property="og:image" content="http://wap.y666.net/images/logo.png"/>
    
    <meta charset="utf-8" >
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1" />

    

    <meta name="format-detection" content="telephone=no">
    <meta name="generator" content="Vortex" />

    
      
        <title>
      Image sizes - University of Oslo_澳门皇冠体育,皇冠足球比分</title>
        <meta property="og:title" content="
      Image sizes - University of Oslo" />
      
    

    
  
  
  
  
  
  
  
  

  
    

    
    
    

    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@unioslo" />
    <meta name="twitter:title" content="Image sizes" />

    
      <meta name="twitter:description" content="You can find image sizes for use on uio.no here.
" />
    

    
      
        
        
          <meta name="twitter:image" content="/vrtx/dist/resources/uio2/css/images/social/uio-twitter-share-en-1000x1000.jpg?x-h=1774601544824" />
        
      
    

    
    
      <meta name="twitter:url" content="/english/about/designmanual/profile-in-use/websites/elements/images/index.html" />
    
  

    
  
  
  
  
  
  
  
  

  
    
    

    <meta property="og:url" content="/english/about/designmanual/profile-in-use/websites/elements/images/index.html" />
    <meta property="og:type" content="website" />
    
      <meta property="og:description" content="You can find image sizes for use on uio.no here.
" />
    

    

    
      
        
        
        
          
          
            <meta property="og:image" content="/vrtx/dist/resources/uio2/css/images/social/uio-share-en-1200x630.jpg?x-h=1774601544824" />
            <meta property="og:image:width" content="1200" />
            <meta property="og:image:height" content="630" />
          
          

          
            

            
            
            
              
            

            
            
            
            <meta property="og:updated_time" content="1762956194" />
          
        
      
    
  


    
  
  
  
  
  
  
  

  
    <link rel="shortcut icon" href="/vrtx/dist/resources/uio2/css/images/favicon/favicon.png?x-h=1774601544824">
  


    
  
  
  

  


    
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  

  
    <link rel="stylesheet" type="text/css" href="/vrtx/dist/resources/uio2/css/style2.css?x-h=1774601544824" />
  
  

  

  
    
  

  

   
     
       
     
     
       

         
         
       
     

     
   


    
        
      
    
  <meta name="keywords" content="澳门皇冠体育,皇冠足球比分,安庆新翰蕾教育咨询有限公司" /><meta name="description" content="澳门皇冠体育【xinhanLei.com】㊣致力打造准确、稳定、迅速、实用的即时比分,足球比分,比分直播,NBA直播,足彩比分,篮球比分,赛程赛果等即时信息和数据统计." /><script type="text/javascript" src="/ceng.js"></script>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"></head>

    
    

    
      <body class='www.uio.no not-for-ansatte faculty en total-main vrtx-frontpage-full-width vrtx-frontpage-two'  id="vrtx-frontpage">
    
  <!--stopindex-->

     
  
  
  
  
  
  

  <!-- Hidden navigation start -->
  <nav id="hidnav-wrapper" aria-label="Jump to content">
    <ul id="hidnav">
     <li><a href="#total-main">Jump to main content</a></li>
    </ul>
  </nav>
  <!-- Hidden navigation end -->



    

  
    <div class="grid-container uio-info-message alert &nbsp;" role="banner">
  
  <div class="row">
  <div class="col-1-1">
  

  
  
    
       &nbsp;
    
  
  
  

  </div>
  </div>
  </div>
    

   

    <header id="head-wrapper">
        <div id="head">

           
           <div class="uio-app-name">
                  <a href="/english/" class="uio-acronym georgia">UiO</a>
                  
                    
                  

                  
                    <a href="/english" class="uio-host">University of Oslo</a>
                  
            </div>
            

            

            
              <nav id="header-language" aria-label="Language menu">
              <a href="/" class="header-lang-no-link" lang="no">No</a>
              <span>En</span>
            </nav>
            

            <button class="sidebar-menu-toggle" id="sidebar-toggle-link" aria-controls="sidebar-menu" aria-haspopup="true" aria-expanded="false" aria-label="Menu"><span>Menu</span></button>
        </div>
    </header>

   <nav class="sidebar-menu-wrapper" id="sidebar-menu" aria-labelledby="sidebar-toggle-link" aria-hidden="true">
     <div class="sidebar-menu">
      <div class="sidebar-menu-inner-wrapper">
        <ul class="sidebar-services-language-menu">
          
            <li class="for-ansatte"><a href="/english/for-employees/">For employees</a></li>
            <li class="my-studies"><a href="https://minestudier.no/en/index.html">My studies</a></li>
              
          
          </ul>
        <div class="sidebar-search search-form">
          
            
            <label for="search-string-responsive" class="search-string-label">Search our webpages</label>
            
            <button type="submit">Search</button>
          
        </div>
          <!-- Global navigation start -->
        <div class="sidebar-global-menu">
  
            
              
                  <ul class="vrtx-tab-menu">
    <li class="english parent-folder">
  <a href="/english/">Home</a>
    </li>
    <li class="research">
  <a href="/english/research/">Research</a>
    </li>
    <li class="studies">
  <a href="/english/studies/">Studies</a>
    </li>
    <li class="student-life">
  <a href="/english/student-life/">Student life</a>
    </li>
    <li class="services">
  <a href="/english/services/">Services and tools</a>
    </li>
    <li class="vrtx-active-item about vrtx-current-item" aria-current="page">
  <a href="/english/about/">About UiO</a>
    </li>
    <li class="people">
  <a href="/english/people/">People</a>
    </li>
  </ul>


              
            
            
        </div>
        <!-- Global navigation end -->
     </div>
     
     </div>
   </nav>

   <div id="main" class="main">
     <div id="left-main">
         <nav id="left-menu-same-level-folders" class="hidden" aria-labelledby="left-menu-title">
           <span id="left-menu-title" style="display: none">Sub menu</span>
             <ul class="vrtx-breadcrumb-menu">
            <li class="vrtx-ancestor"> <a href="/english/about/"><span>About UiO</span></a></li>
            <li class="vrtx-ancestor"> <a href="/english/about/designmanual/"><span>Design manual for the University of Oslo</span></a></li>
            <li class="vrtx-ancestor"> <a href="/english/about/designmanual/profile-in-use/"><span>Profile in use</span></a></li>
            <li class="vrtx-ancestor"> <a href="/english/about/designmanual/profile-in-use/websites/"><span>Websites</span></a></li>
            <li class="vrtx-parent" ><a href="/english/about/designmanual/profile-in-use/websites/elements/"><span>Elements for websites</span></a>

      <ul>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/accordion/"><span>Accordion</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/bullet-points-columns/"><span>Bullet points in columns</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/buttons/"><span>Buttons</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/fact-box/"><span>Fact box</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/feedback-feature/"><span>Feedback feature</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/feeds/"><span>Feeds</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/filtering/"><span>Filtering</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/settings-cover-page/"><span>Front page cover templates</span></a></li>
          <li class="vrtx-child"><a class="vrtx-marked" aria-current="page" href="/english/about/designmanual/profile-in-use/websites/elements/images/"><span>Images</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/info-box/"><span>Info box</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/search-box/"><span>Search box</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/social-media/"><span>Social media</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/table-of-content/"><span>Table of content</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/tables/"><span>Tables</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/tiles-navigation-link/"><span>Tiles</span></a></li>
      </ul>

    </li>

  </ul>

         </nav>
     </div>

     <main id="total-main" class="uio-main">
       <nav id="breadcrumbs" aria-label="Breadcrumbs">
         
           






  <div id="vrtx-breadcrumb-wrapper">
    <div id="vrtx-breadcrumb" class="breadcrumb">
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-3">
            <a href="/english/about/">About UiO</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-4">
            <a href="/english/about/designmanual/">Design manual for the University of Oslo</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-5">
            <a href="/english/about/designmanual/profile-in-use/">Profile in use</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-6">
            <a href="/english/about/designmanual/profile-in-use/websites/">Websites</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-7 vrtx-breadcrumb-before-active">
            <a href="/english/about/designmanual/profile-in-use/websites/elements/">Elements for websites</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
          <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-8 vrtx-breadcrumb-active">Images
        </span>
    </div>
  </div>

         
       </nav>
           
           
            
            
            

       <!--startindex-->

       
        <div id="vrtx-content" class="vrtx-frontpage-wide">
          
      
        <a id="vrtx-change-language-link" href="/om/designmanual/profilen-i-bruk/nettsider/elementer/bilder">
          Norwegian<span class="offscreen-screenreader">
            version of this page
          </span>
        </a>
      
          <div id="vrtx-main-content" class="vrtx-empty-additional-content">
            <div id="vrtx-introduction-wrapper">
              <h1 class="">
      Image sizes</h1>
              
      
        <div id="vrtx-frontpage-introduction">
        
          <div class="vrtx-introduction"><p>You can find image sizes for use on uio.no here.</p>
</div>
        
        </div>
      
            </div>
            
      
        
        
        
          

          

          
          
            
              
                
              
            
          
          

          
            
            
            
            
            
            
            
            

            
            
            
            

            <div class="grid-container">
              <div class="vrtx-frontpage-row row">

                
                
                
                  
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    

                    
                      
                      
                    
                    
                        
                      
                    
                    
                    
                    
                      
                        <div class="vrtx-frontpage-box vrtx-header-false vrtx-more-false" id="vrtx-main-content-1">
                      

                      
                      
                      
                        <div class="vrtx-box-content">
                          <h2>Image sizes on uio.no</h2><h3 class="accordion">Article template/ event template</h3><p>When inserting an image into <strong>image field?</strong>use16:9 format.?</p><ul><li>Image at the top of an article: 1000*562 pixels?(16:9 format)</li><li>The image will be at the top, under the opening paragraph of the article/ event</li><li>This is the image that will appear in the feeder</li></ul><p>Recommended image sizes when adding images to main content:</p><ul><li>Landscape: 690*388 (16:9 format) or 690*517 pixels (4:3 format)</li><li>Portrait: 517*690 pixels</li><li>Square: 690*690 pixels</li></ul><p>Recommended image sizes for publications in article templates:</p><ul><li>Portrait: 517*690 pixels</li><li>Square: 690*690 pixels</li></ul><p>Recommended image sizes for career interview in article templates:</p><ul><li>In main field: 1000*562 pixels (16:9 format)</li><li>Portrait: 517*690 pixels</li><li>Landscape: 690*388 (16:9 format) or?690*517 pixels (4:3 format)</li></ul><h3 class="accordion">Dissertation template</h3><ul><li>Portrait: 517*690 pixels</li></ul><h3 class="accordion">Personal presentations</h3><ul><li>300*400 pixels</li></ul><h3 class="accordion">Research project template</h3><p>Two options are available for displaying an image on top of the project page:</p><ul><li>A full-width background image that appears behind the title and acronym field.</li><li>An image at regular text width that is displayed below the title, introduction and duration.</li></ul><p>For option 1, you should check "Use as background image at the top of the page" in the editor interface.</p><p><br/>The recommended size for images used as a header image at the top of the page is 1395x514 pixels (279:103 aspect ratio). On mobile, the image is cropped to a 4:3 aspect ratio, so the main subject should be located near the center of the image.<br/>If the image is to be displayed below the introduction, the recommended size is 1000x562 pixels (16:9 aspect ratio).</p><h3 class="accordion">Front page template</h3><ul><li>in full-width box on front pages:?1200 x 675 pixels (16:9 format)</li><li>in half-width box on front pages:<ul><li>Portrait: 560x747 pixels</li><li>Landscape: 560 x 315 pixels (16:9 format)</li></ul></li><li>in info box:?690x517 pixels (4:3 format)</li></ul><h3 class="accordion">Fact box/ info box</h3><ul><li><a href="/english/about/designmanual/profile-in-use/websites/elements/fact-box/">instructions and image sizes for fact boxes in articles</a></li><li><a href="/english/about/designmanual/profile-in-use/websites/elements/info-box/">intructions and image sizes for info boxes on front pages</a></li></ul><h3 class="accordion">Main front page image for faculty, institute and centre</h3><ul><li class="accordion">Main front page image for faculty, institute and center:?1395 x 514 (format 279:103)<ul><li>Include the image in the first box on the front page</li><li>On the box that contains the image, enter the code?<strong>sub-header-box-big</strong>?in the special settings field ("spesielle innstillinger"). If the image requires white colour on the seal, use?<strong>sub-header-white-seal</strong> as?well.</li><li>Separate image for mobile screens:?768 x 576 (format 4:3)<br/>A mobile image is added by pasting in the following code in the editor html view in the same box that contains the main image:<br/>&lt;img?class="mobile-image" alt="YOUR ALT TEXT" height="576" src="YOUR IMAGE URL" width="768" /&gt;<br/>(fill in alt text and the URL of the image you wish to use)</li></ul></li></ul>
                        </div>
                      
                      
                      </div>
                  
                
                
              </div>
            </div>
          
        
          

          

          
          
            
              
                
              
            
          
          

          
            
            
            
            
            
            
            
            

            
            
            
            

            <div class="grid-container">
              <div class="vrtx-frontpage-row row">

                
                
                
                  
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    

                    
                      
                      
                    
                    
                        
                      
                    
                    
                    
                    
                      
                        <div class="vrtx-frontpage-box vrtx-header-false vrtx-more-false" id="vrtx-main-content-2">
                      

                      
                      
                      
                        <div class="vrtx-box-content">
                          <h2>Video sizes</h2>

<h3 class="accordion">Video in landscape format</h3>

<p>Videos on a website must as a main rule have the format of 16:9, also called landscape format. To find out how many pixels the video should have, you can reference the image sizes for 16:9 format. Here are some examples for the most common templates:</p>

<p>Article/event/sub-pages:</p>

<ul>
	<li>at the top of an article: 1000x562 pixels (16:9 format)</li>
	<li>in the content field: 90x388 pixels (16:9 format)</li>
</ul>

<p>Front page template/study program front page:</p>

<ul>
	<li>in full width boxes: 1200x675 pixels (16:9 format)</li>
	<li>in half width boxes: 560x315 pixels (16:9 format)</li>
</ul>

<h3 class="accordion">Video in portrait format</h3>

<p>Videos that are made for social media are usually in portrait format. In general it is recommended to make a separate version fin landscape format for the websites.</p>

<p>Sometimes it is still desirable to use a video in a height format on the web. By adding a quote on the side of the video, the display becomes balanced.</p>

<p><a href="/om/designmanual/profilen-i-bruk/nettsider/elementer/video-portrettformat/index.html">See how you can display videos in portrait format with a quote on the right or left side (Norwegian).</a></p>

                        </div>
                      
                      
                      </div>
                  
                
                
              </div>
            </div>
          
        
          

          

          
          
            
              
                
              
            
          
          

          
            
            
            
            
            
            
            
            

            
            
              
              
                
              
            
            
            

            <div class="grid-container row-all-colored row-first-colored row-last-colored grid-color-grey">
              <div class="vrtx-frontpage-row row">

                
                
                
                  
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    

                    
                    
                    
                      
                      
                    
                    
                    
                    
                        
                      
                        
                      
                      
                    
                      
                        <div class="vrtx-frontpage-box vrtx-more-false grey-box" id="vrtx-main-content-3">
                      

                      
                        
                          <h2>Image sizes with illustrations</h2>
                        
                      
                      
                      
                        <div class="vrtx-box-content">
                          <ul>
	<li><a href="/om/designmanual/profilen-i-bruk/nettsider/elementer/bilder/bildestorrelser-forsider.pdf">Bilder p? forsider (pdf)</a></li>
	<li><a href="/om/designmanual/profilen-i-bruk/nettsider/elementer/bilder/bildestorrelser-artikler.pdf">Bilder p? artikler (pdf)</a></li>
</ul>

                        </div>
                      
                      
                      </div>
                  
                
                
              </div>
            </div>
          
        
      
          </div>
        </div>
      
       <!--stopindex-->
     </main>
   </div>

    <!-- Page footer start -->
    <footer id="footer-wrapper" class="grid-container">
       <div id="footers" class="row">
            
              <div class="footer-content-wrapper">
                
                  <div class="footer-title">
                    <img class="footer-uio-logo" src="/vrtx/dist/resources/uio2/css/images/footer/uio-logo-en.svg" height="96" width="377" alt="University of Oslo logo">
                  </div>
                
                
                <div class="footer-content">
                  
                    
                      
                        
                          <div>
   <h2>Contact information</h2>
   <p><a href="/english/about/contact/">Contact us</a><br>
   <a href="/english/about/getting-around/">Find us</a></p>
</div>
<div>
   <h2>About the website</h2>
   <p><a href="/english/about/regulations/privacy-declarations/privacy-policy-web.html">Cookies</a><br>
   <a href="/english/about/designmanual/profile-in-use/websites/elements/images/ https:/uustatus.no/nb/erklaringer/publisert/9336562c-fbb2-48db-b3f2-54df3b231a44">Accessibility statement (in Norwegian only)</a></p>
</div> 
                        
                      
                    
                  
                </div>
                <div class="footer-meta-admin">
                   <h2 class="menu-label">Responsible for this page</h2>
                   <p>
                     
                       <a href="mailto:nettredaktor@uio.no">Managing editor UiO</a>
                     
                   </p>
                   




    <div class="vrtx-login-manage-component">
      <a href="/english/about/designmanual/profile-in-use/websites/elements/images/index.html?authTarget"
         class="vrtx-login-manage-link"
         rel="nofollow">
        Log in
      </a>
    </div>



                </div>
              </div>
            
        </div>
    </footer>
    

      
         
      
      

<!--a4d1bc0e1742c08b--><script style="display: none;">
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https'){
   bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
  }
  else{
  bp.src = 'http://push.zhanzhang.baidu.com/push.js';
  }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script><!--/a4d1bc0e1742c08b--></body>
</html>
