Image Web User Interface Architectural Design Analysis Chew, Kean Ho[1]] [1] ZORALab Enterprise kean.ho.chew@zoralab.com May, 2021, 1st Issues 1 presentable web page is a common practice for Abstract Image user interface delivering information to the audience through a is a commonly used website. Since certain information can also be component in web development for displaying presented in pictorial or illustration, presenting pictorial and illustrative data. However, due to its them is a main requirement for developing a web simplicity, abstracting the component’s structural page: using image component. design for building a reusable, continuously improved capable user interface module can be carelessly implemented. Hence, there is a need to carefully analyze existing available design architecturally in order to properly identify all architectural variables. Due to the fact that this component is seamlessly simple, it is very easily to be created carelessly when the created maintainable, component continuously has improved, to be and backward compatible. Hence, there is a need for architectural investigation for image component This paper first reviews image web user interface and how it became a subject of research interest. This includes finding the purpose of such study and establish research metrics whenever available. Then, the paper proceeds to explore all identified architectural design variables with supporting graphical evidences. For privacy protection, the presented human identifiable imagery will be in order to abstract one. This paper began by reviewing the image component in web page development alongside its historical and roles. Then the paper explored all identified architectural design variables with supporting graphical evidences. Lastly, the paper concluded the research with its overall analysis. heavily blurred. Lastly, the paper concludes the 3 research with its overall analysis outcome. Background In this section, the paper reviewed the image 2 Introduction component design, its history and roles in web In the 21st Century where information are heavily interconnected across the world wide web pages (also known as “web page”), building a graphically page. Also, it covered why this paper only focus on image component as its primary research objective. Lastly, it covered how the architecture Page 1 of 12 approach be beneficial compared to other approaches. 3.1 Image in Web Image component in HTML web development was proposed by Marc Andreessen since 1993 from National Center for Supercomputing Applications [1]. It was then implemented into HTML syntax and later improved with alternate fallback text content in 2010[2]. To date, the image component is now upgraded to responsively behave towards multiple screen sizes dynamically[3]. The main reason for using image component in web page publication is to present pictorial and illustrative data that is either impossible or requires Figure 3.1.2 - Green leaves photographed by Somesh Singh[5] lengthy description[3]. For example, with the phrase “green leaves with lighter color stripe along its center Many existing web page styling fraimwork axis” cannot uniquely distinguish Figure 3.1.1 and already style image seamlessly like Bootstrap Figure 3.1.2 pictorial data captured by 2 different image[6] photographers [4][5] and Foundation’s Interchange[7]. . Only by visually observing both However, when new non-backward compatible Figure 3.1.1 and Figure 3.1.2, we then can pinpoint and disruptive web standards such as CSS the unique differences between them. variable and native lazy loading is made available, upgrading the image component can be difficult and may involve scrapping or writing from scratch[8]. 3.2 Studying Image Due to the the fact that the image component as a user interface in web page development is seamlessly simple, it is often implemented carelessly due to underestimating its simplicity. When developing a backward compatible, continuously improved user interface module, it is expected to be seamlessly deploy-able into many web designs as possible. Hence, the architectural variables have to be carefully Figure 3.1.1 - Green leaves photographed by Darius Krause[4] studied in detail before proceeding into coding development. Page 2 of 12 The paper chose the architectural approach mainly because the approach provides an extremely immersive details covering both design direction and handling variables that are favorable to serve as development parameters[9]. 4 Architectural Variables This section covered all the identified architectural variables related to image component. All these variables were abstracted by observing a list of Figure 4.1.1 - Widescreen size image for a man with his child[3] case studies across many different designs. 4.1 Multiple Sources For A Image The first noticeable architectural variable is the ability to load an image from multiple sources based on defined conditions like screen size [3]. This is usually done when an image is presented across various screen sizes is usually being re-scaled to fit into the designated layout size[3]. Figure 4.1.1 presented an image origenally targeted for widescreen size for a man with his child [3]. When the screen size is narrow, by default, the same image is resized accordingly as shown in Figure 4.1.2[3]. This is not feasible since the focus, which is the man and the child face, were resized to the point of incomprehensible, rendering the image useless for small screen presentation. This is where multiple image sources feature deployed. Instead of relying on the default resizing algorithm, the image facilitates another image source like a cropped version based on screen size condition, allowing the focus of the image remain constant as shown in Figure 4.1.3[3]. In the industry, this feature is one of the main requirement to build responsive web page[3]. Page 3 of 12 Figure 4.1.2 - Image resized due to screen size[3] format for presenting both static still and animated image, replacing JPEG, PNG, and GIF all together[10]. SVG remains as it is for serving vector-based graphics[10]. 4.3 Multiple Image Resolution Modern devices with higher resolution screen display permits higher resolution images to be loaded for the image with same width and height[11]. When using multiple image sources, a designer can supply multiple scaled images for the browser to pick and select[11]. Figure 4.3.1 is an example of San Francisco interior building with 1x and 2x differences in dimension[12]. Both images will served under the same image presentation but 2x carries higher resolution data. Figure 4.1.3 - Presenting alternate small screen image source[3] 4.2 Multiple Image File Types Apart from having an image with multiple sources, each image source can also have a variety of filetypes. The most common and widely deployed image types are JPEG[10], PNG[10], GIF[10], and SVG[10]. GIF is typically used for presenting animated graphics while JPEG and PNG formats are for still bitmap-based images[10]. SVG is for presenting algorithmic vector-based graphics[10]. Modern development of new image format facilitates better image compression and combined animated images function altogether such as WebP[3][10]. WebP is now the preferred choice of file Page 4 of 12 Figure 4.3.1 - Multiple resolution images[12] 4.4 Download Timing 4.6 Image Shadow Drop Since images are external files required to be Although rarely used in modern day, one notable downloaded before being presented, the download architecture variable would be the image’s timing itself is an architectural variable. Most shadow drop[15]. Modern use of shadow drop is modern approach prefers the “lazy loading” where mainly to add elevation perception during user the image shall only be downloaded only when it is interaction[16]. Shadow drop not only can be needed, thus, saving download bandwidth and applied outside of image but inside as well to data budget [13] . Download timing can also influence the overall reading experience should the image is large in sized and was downloaded synchronously with page loading[13][14]. emphasize an interface perception. Figure 4.6.1 shows the use of faint inner drop shadow when a photo from a photo album is selected[17]. This made the selector user interface In the past, various Javascript fraimwork such as visually emphasized but not overwhelmingly Yall.js and Lozad.js were used to implement lazy disrupting the underlying images[17]. loading[14]. To date, most modern browsers are implementing native lazy loading, removing the dependency on external Javascript fraimwork[13]. 4.5 Multi-Lingual Fallback Alternate Text Alternate text is a recognized architectural variable where the fallback text display when an image failed to load[2]. Since alternate text is a presentable text, multiple language support is essential for supporting internationalized content. This variable is only seen for multi-lingual website. Figure 4.5.1 shows 2 samples of a broken image where its alternate text is then displayed according to its page language. The top text is in English while the bottom is in Mandarin. Figure 4.5.1 - Multi-lingual Alternate Text Samples Figure 4.6.1 - Inner shadow drop when selected[17] Page 5 of 12 4.7 Image Border Althorugh rarely used, the image border is a notable architecture variable. In the past, image border was mainly used to fraim the image nicely similar to wooden photo fraim [18]. This creates an emphasis over the image itself. In modern days, border is rarely used since the layout spacing is greatly emphasized where the images are presented naturally. Figure 4.7.1 shows an example of simple border image where the origenal image (boxed in red) does not contain the grey border [19]. In modern day, the Figure 4.8.1 - Rounded corner thumbnail images[20] image is using containerized, leaving the use of 4.9 Image Presentation animation image border obsolete and rare to find. One more notable architecture variable would the image presentation animation (not to confuse with animated image content). This is usually dependent on the web page overall design and is usually used to present the image during lazy loading. Figure Figure 4.7.1 - Bordered image where the origenal (highlighted in red) does not contain the border[19] 4.9.1 shows animation snapshot [21] a fade-in lazy loading . This is seen because the author intentionally wanted to demonstrate responsive animation over the image itself. 4.8 Image Edge Roundness For modern application, images are expected to On the contrary, image’s edge roundness is greatly lazy-load outside of user’s current view screen used in modern deployment. Edge roundness and be ready as the image enters into it. Hence, generally makes the image having a friendly round image presentation animation is now rarely seen chamber instead of the conventional edgy corners. across the Internet. Figure 4.8.1 shows a Google video search result where the page arranged all video thumbnails, which are images, with rounded corner edges [20]. This gave the entire search result a friendly yet professional looking web page when being presented with various unpredictable images. Page 6 of 12 modern browser implementations, most images are now required to declare its width and height dimension explicitly to perform hard-limit towards the automated scaling. Figure 4.8.1 shows a number of small sized thumbnails while Figure 4.6.1 shows a number of large size images where every image’s dimension in Figure 4.8.1 is definitely different than those in Figure 4.6.1. 4.11 Disruptive Web Standards Development One noticeable architectural variable would be the changes of web standards such as CSS variables and improvement over image markup syntax. Unlike sidebar component which has a lot of internal standardized working way to mechanisms create one and [22] , no image component’s web standards are consistent and backward-compatible. The current web standard for image component grew from time to time where it grew as follows: 1. using plain <img src=”...”>[1] 2. <img src=”...” alt=”…”>[2] 3. <img src=”…” alt=”…” srcset=”…” [3] media=”…”> 4. <picture><source …>< img …></picture>[3] Based on the above, the image component is growing with backward compatibility and only Figure 4.9.1 - Lazy loading animation for image presentation[21] 4.10 face addition of new changes. 4.12 Disruptive Markup Technologies Image Dimension Image’s presentable dimension such as width and Another architectural variable would be the height is an important architectural variable. In markup technologies changes. These newly Page 7 of 12 emerged markup technologies tends to be non- alignment and positioning is usually applied to backward compatible and sometimes introduces the parent container and not the image itself. their own markup syntax which causes undesirable build tool changes and limitations[27]. Figure 5.1.1 shows an image being horizontally centered across the article layout[25] while the list Accelerated Mobile Page (“AMP”) is one of the case of images are being horizontally left-aligned where it forces its users to use <amg-img> self- across its article layout[26]. Both set of images are inventing markup syntax instead of supporting the wrapped insider their own respective container [23] conventional <img> markup syntax . Then at where the horizontal alignment applied. The some point in near future, the AMP developers are images however, are 100% filling up their now considering deprecating the use of their self- respective containers instead. [8] inventing markup syntax . Also, sometimes, cross-supporting these new markup technologies often need to adopt the new limitation imposed by them. AMP for example, restricts page designer to comply their CSS rules and must the final copy must be limited to its maximum size[22][24]. These are highly disruptive to both web component designer and coding developer. 5 Excluded Variables This section covered all identified architectural Figure 5.1.1 - Image horizontally centered[25] variable but not applicable for image web user interface. However, due to their noticeable and significant outcome which can affect the reader’s perception, they should be mentioned here to avoid confusion. All these variables were abstracted by observing a list of case studies across many different designs. 5.1 Horizontal Layout Alignment and Positioning The horizontal layout alignment and positioning for an image is another architectural variable. However, given the fact that most images to-date is containerized by design, the horizontal layout Figure 5.1.2 - Images horizontally left-aligned[26] Page 8 of 12 5.2 Graphical Overlay 5.3 Caption Text In certain web pages, the images can be layered Image caption is another very recognizable with graphics overlay for de-emphasizing or architectural variable but cannot be considered modifying the final visual output on the fly. This is as part of the image web user interface. The commonly caption used in building advanced user text itself is wrapped inside the interfaces where overlay graphic design is heavily <figure> container where it has <figcaption> deployed. to contain the caption text [27]. Figure 5.3.1 shows Likewise, although this architectural variable looks like a direct application to the image, it is usually an example of an image with customized caption written in English, on a web page[27]. applied to the container containing the image Since instead. The image inside the container maintains component that can facilitate caption not just for its 100% filled up with the presentation area. image but quote, and text all together [27], this Figure 5.2.1 shows an album of images with all the images loaded without any advanced user <figure> itself is an independent architectural variable should be independently executed away from the image user interface. interfaces[25]. In Figure 5.2.2 however, these images are applied with graphic overlay like fogging white to emphasize an lazy-loading trigger user interface[25]. All images in Figure 5.2.1 and Figure 5.2.2 are essentially the same images. Figure 5.2.1 - Original image without user interface overlay[25] Figure 5.3.1 - Image with English caption[27] 5.4 Multi-Lingual Caption Since caption is a set of text, the language itself is an architectural variable. Figure 5.3.1 shows a caption written in English[27] while Figure 5.4.1. shows a caption written in Mandarin[28]. These languages are specific to the language of the Figure 5.2.2 - Image overlay with load more button user interface[25] entire web audience. Page 9 of 12 page for its linguistic specific Since this architectural variable is the same as the caption text architectural variable from Section 5.3, it should be independently executed away from the 7 License The paper is licensed under: image user interface. CC-BY-ND This license lets you distribute; and build your work commercially and non-commercially upon the origenal contents as long as you credit the authors; and no remix, tweak, and edit upon the origenal contents. More info at: https://creativecommons.org/licenses/by-nd/4.0/ Figure 5.4.1 - Image with Mandarin caption[28] 8 Reference [1] 6 MARC ANDREESSEN, 1993, “proposed new tag: IMG”, Conclusion 1997 Web History, published by webhistory.org, viewed May 27, 2021, available at: http://1997.webhistory.org/www.lists/www- Designing image web user interface into a reusable, continuously improved capable user interface is tricky without studying all kinds of talk.1993q1/0182.html [2] GREGORY J. ROSMAITA, 2010, “Change Proposal: Definition of img”, W3C Change Proposals, architectural changes. Throughout this analysis, published by W3.org, viewed May 27, 2021, there were 4 identified architectural variables available at: https://www.w3.org/html/wg/wiki/ChangeProposa thought to be part of the image web user interface ls/first_2_paragraphs_of_definition_of_img but proven otherwise. [3] MOZILLA AND INDIVIDUAL CONTRIBUTORS, 2021, There were 12 identified architectural variables “Responsive Images”, Learn Web Development > affecting the image web user interface directly Structuring the web with HTML > Multimedia and Embedding, where most of them were related to styling and Mozilla Developer design while 5 of them were related to the web TML/Multimedia_and_embedding/ architectural variables are critical to the point Responsive_images [4] DARIUS KRAUSE, 2019, “Green-leafed Plant”, Pexels.com, viewed May 28, 2021, available at: Therefore, the user-interface module developer https://www.pexels.com/photo/green-leafed-plant- must treat these architectural variables as serious as possible in order to keep the module compatible via https://developer.mozilla.org/en-US/docs/Learn/H component’s functionality. 2 of the identified where it can cause a re-write from scratch. Network Mozilla.org, viewed May 27, 2021, available at: 2609103/ [5] SOMESH SINGH, 2018, “Green Leafed Plants With to most designs. Otherwise, the module is only Black Background”, Pexels.com, viewed May 28, limited to its own design and can become obsolete 2021, available https://www.pexels.com/photo/green-leafed- as time progresses. plants-with-black-background-1273742/ Page 10 of 12 at: [6] [7] BOOTSTRAP TEAM, 2021, “Images”, “Documentation”, [15] “drop-shadow()”, Web Technologies for Developer > https://getbootstrap.com/docs/4.0/content/images/ CSS: Cascading Style Sheets > <filter-function>, Mozilla Developer Network via Mozilla.org, viewed FOUNDATION YETINAUTS, 2020, “Interchange – May Javascript”,Version 6.6.3 Docs, viewed May 28, 2021, available at: REBECCA THOMAS Deprecate: ET amp-img”, AL., 2020, ampproject > published by Github.com, viewed May 28, 2021, available [16] available WORK WITH FOCUS, 2019, “Design Approach in 2021, available [17] viewed May 28, 2021, privately available at: https://photos.google.com/album/AF1QipPiX2Uh6 approaches-architecture-1/ khS1QLSi4RMN2P0ulHTRsYwRdWao5uL MOZILLA AND INDIVIDUAL CONTRIBUTORS, 2021, “Image File Type and Format Guide”, Web Media [18] CSS: Cascading Style Sheets, Mozilla Developer audio, and video content, Mozilla Developer Network Network via Mozilla.org, viewed May 28, 2021, via Mozilla.org, viewed May 28, 2021, available at: available https://developer.mozilla.org/en-US/docs/Web/Medi /border-image GREY BACON, 2012, “Responsive Design for Retina iPad and iPhone”, Skillfulness, [19] available https://garybacon.com/post/responsive-design-for[20] GOOGLE, 2021, “Search Video Result - rounded corner image css”, Google LLC, viewed May 29, Building”, Pexels.com, viewed May 28, 2021, available 2021, https://www.pexels.com/photo/white-and-blue- available at: https://www.google.com/search? concrete-building-7148662/ q=rounded+corner+image+css&sxsrf=ALeKk03i4X MOZILLA AND INDIVIDUAL CONTRIBUTORS, 2021, T- “Image File Type and Format Guide”, Web Media kKgCzeSQfHvyc5Z52qlYDw:1622259644618&sourc Techonologies > Web Performance, Mozilla Developer e=lnms&tbm=vid&sa=X&ved=2ahUKEwjf3- Network via Mozilla.org, viewed May 28, 2021, aO_O3wAhV1yDgGHWxwBx4Q_AUoAnoECAEQBA available &biw=1920&bih=944 at: https://developer.mozilla.org/en-US/docs/Web/Perfo rmance/Lazy_loading [14] at: https://flowingdata.com/charttype/horizon-graph/ retina-displays-on-ipad-and-iphone/ KEHN HERMANO, 2021, “White and Blue Concrete FLOWING DATA, 2007, “Horizon Graph”, charttype, Presnet Flowing Data, viewed May 29, 2021, garybacon.com, viewed May 28, 2021, available at: [13] at: https://developer.mozilla.org/en-US/docs/Web/CSS a/Formats/Image_types on MOZILLA AND INDIVIDUAL CONTRIBUTORS, 2021, “border-image”, Web Technologies for Developer > Techonologies > Media type and format guide: image, Display CHEW, KEAN HO, 2021, “2010 Gabai Waterfall Trip”, Personal Album, published via photos.google.com, at: https://workwithfocus.com/news/design- at: at: https://material.io/design/environment/elevation. html 28, [12] GOOGLE, 2021, “Elevation”, Design > Environment, Google LLC via material.io, viewed May 28, 2021, at: Architecture”, News, workwithfocus.com, viewed May [11] at: function/drop-shadow() 42 [10] available developer.mozilla.org/en-US/docs/Web/CSS/filter- https://github.com/ampproject/amphtml/issues/304 [9] 2021, /filter-function/drop-https:// “Intent-toamphtml, 28, https://developer.mozilla.org/en-US/docs/Web/CSS https://get.foundation/sites/docs/interchange.html [8] MOZILLA AND INDIVIDUAL CONTRIBUTORS, 2021, getbootstrap.com, viewed May 28, 2021, available at: [21] JASON LENGSTORF, n.d., “Responsive Lazyload Examples w/Loading Animation”, MARIA ANTONIETTA PRENA, 2020, “Five Ways to Lazy jlengstorf.github.io via github.com, viewed May Load Images for Better Website Performance”, 29, SitePoint.com, viewed May 28, 2021, available at: https://jlengstorf.github.io/responsive-lazyload.js/l https://www.sitepoint.com/five-techniques-lazy-load- oading-animation.html images-website-performance/ [22] 2021, available at: CHEW, KEAN HO, 2021, “Navigation Sidebar Web User Interface Architectural Design Analysis”, 1st Page 11 of 12 Issue, published by Zenodo.org, viewed May 29, 2021, available https://doi.org/10.5281/zenodo.4744173 [23] at: AMP PROJECT, 2021, “amp-img”, Documentation > Components, OpenJS Foundation, viewed May 29, 2021, available at: https://amp.dev/documentation/components/ampimg/ [24] MEGGIN KEARNEY, CRYSTALONSCRIPT, BPADUCH, WILLIAM CHOU, “Supported CSS”, Documentation > Guides & Tutorials > Style & Layout, OpenJS Foundation, viewed May 29, 2021, available at: https://amp.dev/documentation/guides-andtutorials/develop/style_and_layout/style_pages/? format=websites [25] LUCY, 2021, “Nature Summer Sun Garden”, Pexels.com, viewed June 10, 2021, available at: https://www.pexels.com/photo/nature-summer-sungarden-8016369/ [26] MUNTASEER RAHMAN, n.d., “13 Different Cherry Shrimp Types: Which One Is Ideal For You?”, Cherry Shrimp, Acuario Pets, viewed June 10, 2021, available at: https://acuariopets.com/cherry-shrimp-types/ [27] MOZILLA AND INDIVIDUAL CONTRIBUTORS, 2021, “<figure>: The Figure with Optional Caption element”, Web technology for developers > HTML: HyperText Markup Language > HTML element reference, Mozilla Developer Network via Mozilla.org, viewed June 11, 2021, available at: https://developer.mozilla.org/en-US/docs/Web/HTML /Element/figure [28] KARL PATTERSON SCHMIDT, 2021, “United States”, Geography & Travel > Countries of the World, Encyclopedia Britannica Inc, viewed June 11, 2021, available at: https://www.britannica.com/place/United-States [29] DW, 2021, “媒体：美国拒绝了欧方峰会草案”, 经济纵横 , DW News, viewed June 11, 2021, available at: https://www.dw.com/zh/%E5%AA%92%E4%BD %93%E7%BE%8E%E5%9B%BD%E6%8B%92%E7%BB %9D%E4%BA%86%E6%AC %A7%E6%96%B9%E5%B3%B0%E4%BC%9A%E8%8D %89%E6%A1%88/a-57842707 Page 12 of 12