Tachyony: Imported page

2021-12-19T17:51:37Z

Imported page

New page

{{Redirect|WP:SCALE|the use of scale reference objects in photographs|WP:FIDUCIAL}}
{{Information page|WP:Autosizing|WP:Scaling|WP:AUTOSIZE|WP:SCALE}}

The following are techniques to '''auto-size''', or scale, any image ("thumb" or "frameless"), based on each user's default thumbnail size (220px for those not logged in or for those who have not changed it at [[Special:Preferences]]). Within an image link, the options are as follows:

:* <code>thumb</code> – displays the image as a framed thumbnail at the user's default size
:* <code>frameless</code> – displays the image as an unframed at the user's default size
:* <code>upright</code> – scales the image to approximately 75% of the user's default size (25% smaller)
:* <code>upright=0.8</code> – scales the image to approximately 80% of the user's default size (20% smaller)
:* <code>upright=1.2</code> – scales the image to approximately 120% of the user's default size (20% larger)
:* <code>left</code> – shifts the image to the left margin
:* <code>right</code> – shifts the image to the right margin
:* <code>center</code> – shifts the image to center between left/right margins

Each of the above sizing options can be used in any image link coded into a Wikipedia page, in the form <code><nowiki>[[File:Example.jpg|thumb|upright|left|Description]]</nowiki></code>. When a user views the page, the image will be resized based on the user's default image size setting.

== Effects of ''upright'' ==

The available values for ''thumbnail size'' in [[Special:Preferences|Preferences]] (on the Appearance tab) are 120px, 150px, 180px, 200px, 220px (default), 250px, 300px, and 400px. As explained at {{section link|Wikipedia:Extended image syntax|Size}}, <code>upright=''Factor''</code> will "adjust a thumbnail's size to Factor times the default thumbnail size, rounding the result to the nearest multiple of 10". That can be calculated on Wikipedia via <code><nowiki>{{#expr:</nowiki> ''SIZE'' * ''FACTOR'' round -1}}</code>, which is how the following table was generated.

{| class="wikitable" style="text-align:center"
|+ Effects of ''upright'' on image widths available in user preferences
|-
!
! style="width:4em;" | 120px
! style="width:4em;" | 150px
! style="width:4em;" | 180px
! style="width:4em;" | 200px
! style="width:4em;" | 220px<br />(default)
! style="width:4em;" | 250px
! style="width:4em;" | 300px
! style="width:4em;" | 400px
|-
! style="text-align:left;" | upright=0.3
| {{#expr:120*0.3 round -1}}px
| {{#expr:150*0.3 round -1}}px
| {{#expr:180*0.3 round -1}}px
| {{#expr:200*0.3 round -1}}px
! {{#expr:220*0.3 round -1}}px
| {{#expr:250*0.3 round -1}}px
| {{#expr:300*0.3 round -1}}px
| {{#expr:400*0.3 round -1}}px
|-
! style="text-align:left;" | upright=0.6
| {{#expr:120*0.6 round -1}}px
| {{#expr:150*0.6 round -1}}px
| {{#expr:180*0.6 round -1}}px
| {{#expr:200*0.6 round -1}}px
! {{#expr:220*0.6 round -1}}px
| {{#expr:250*0.6 round -1}}px
| {{#expr:300*0.6 round -1}}px
| {{#expr:400*0.6 round -1}}px
|-
! style="text-align:left;" | upright=0.75<br />upright
| {{#expr:120*0.75 round -1}}px
| {{#expr:150*0.75 round -1}}px
| {{#expr:180*0.75 round -1}}px
| {{#expr:200*0.75 round -1}}px
! {{#expr:220*0.75 round -1}}px
| {{#expr:250*0.75 round -1}}px
| {{#expr:300*0.75 round -1}}px
| {{#expr:400*0.75 round -1}}px
|-
! style="text-align:left;" | upright=0.8
| {{#expr:120*0.8 round -1}}px
| {{#expr:150*0.8 round -1}}px
| {{#expr:180*0.8 round -1}}px
| {{#expr:200*0.8 round -1}}px
! {{#expr:220*0.8 round -1}}px
| {{#expr:250*0.8 round -1}}px
| {{#expr:300*0.8 round -1}}px
| {{#expr:400*0.8 round -1}}px
|-
! style="text-align:left;" | upright=0.85
| {{#expr:120*0.85 round -1}}px
| {{#expr:150*0.85 round -1}}px
| {{#expr:180*0.85 round -1}}px
| {{#expr:200*0.85 round -1}}px
! {{#expr:220*0.85 round -1}}px
| {{#expr:250*0.85 round -1}}px
| {{#expr:300*0.85 round -1}}px
| {{#expr:400*0.85 round -1}}px
|-
! style="text-align:left;" | upright=0.9
| {{#expr:120*0.9 round -1}}px
| {{#expr:150*0.9 round -1}}px
| {{#expr:180*0.9 round -1}}px
| {{#expr:200*0.9 round -1}}px
! {{#expr:220*0.9 round -1}}px
| {{#expr:250*0.9 round -1}}px
| {{#expr:300*0.9 round -1}}px
| {{#expr:400*0.9 round -1}}px
|-
! style="text-align:left;" | upright=0.95
| {{#expr:120*0.95 round -1}}px
| {{#expr:150*0.95 round -1}}px
| {{#expr:180*0.95 round -1}}px
| {{#expr:200*0.95 round -1}}px
! {{#expr:220*0.95 round -1}}px
| {{#expr:250*0.95 round -1}}px
| {{#expr:300*0.95 round -1}}px
| {{#expr:400*0.95 round -1}}px
|-
! style="text-align:left;" | upright=1
| {{#expr:120*1 round -1}}px
| {{#expr:150*1 round -1}}px
| {{#expr:180*1 round -1}}px
| {{#expr:200*1 round -1}}px
! {{#expr:220*1 round -1}}px
| {{#expr:250*1 round -1}}px
| {{#expr:300*1 round -1}}px
| {{#expr:400*1 round -1}}px
|-
! style="text-align:left;" | upright=1.05
| {{#expr:120*1.05 round -1}}px
| {{#expr:150*1.05 round -1}}px
| {{#expr:180*1.05 round -1}}px
| {{#expr:200*1.05 round -1}}px
! {{#expr:220*1.05 round -1}}px
| {{#expr:250*1.05 round -1}}px
| {{#expr:300*1.05 round -1}}px
| {{#expr:400*1.05 round -1}}px
|-
! style="text-align:left;" | upright=1.1
| {{#expr:120*1.1 round -1}}px
| {{#expr:150*1.1 round -1}}px
| {{#expr:180*1.1 round -1}}px
| {{#expr:200*1.1 round -1}}px
! {{#expr:220*1.1 round -1}}px
| {{#expr:250*1.1 round -1}}px
| {{#expr:300*1.1 round -1}}px
| {{#expr:400*1.1 round -1}}px
|-
! style="text-align:left;" | upright=1.15
| {{#expr:120*1.15 round -1}}px
| {{#expr:150*1.15 round -1}}px
| {{#expr:180*1.15 round -1}}px
| {{#expr:200*1.15 round -1}}px
! {{#expr:220*1.15 round -1}}px
| {{#expr:250*1.15 round -1}}px
| {{#expr:300*1.15 round -1}}px
| {{#expr:400*1.15 round -1}}px
|-
! style="text-align:left;" | upright=1.2
| {{#expr:120*1.2 round -1}}px
| {{#expr:150*1.2 round -1}}px
| {{#expr:180*1.2 round -1}}px
| {{#expr:200*1.2 round -1}}px
! {{#expr:220*1.2 round -1}}px
| {{#expr:250*1.2 round -1}}px
| {{#expr:300*1.2 round -1}}px
| {{#expr:400*1.2 round -1}}px
|-
! style="text-align:left;" | upright=1.25
| {{#expr:120*1.25 round -1}}px
| {{#expr:150*1.25 round -1}}px
| {{#expr:180*1.25 round -1}}px
| {{#expr:200*1.25 round -1}}px
! {{#expr:220*1.25 round -1}}px
| {{#expr:250*1.25 round -1}}px
| {{#expr:300*1.25 round -1}}px
| {{#expr:400*1.25 round -1}}px
|-
! style="text-align:left;" | upright=1.3
| {{#expr:120*1.3 round -1}}px
| {{#expr:150*1.3 round -1}}px
| {{#expr:180*1.3 round -1}}px
| {{#expr:200*1.3 round -1}}px
! {{#expr:220*1.3 round -1}}px
| {{#expr:250*1.3 round -1}}px
| {{#expr:300*1.3 round -1}}px
| {{#expr:400*1.3 round -1}}px
|-
! style="text-align:left;" | upright=1.35
| {{#expr:120*1.35 round -1}}px
| {{#expr:150*1.35 round -1}}px
| {{#expr:180*1.35 round -1}}px
| {{#expr:200*1.35 round -1}}px
! {{#expr:220*1.35 round -1}}px
| {{#expr:250*1.35 round -1}}px
| {{#expr:300*1.35 round -1}}px
| {{#expr:400*1.35 round -1}}px
|-
! style="text-align:left;" | upright=1.5
| {{#expr:120*1.5 round -1}}px
| {{#expr:150*1.5 round -1}}px
| {{#expr:180*1.5 round -1}}px
| {{#expr:200*1.5 round -1}}px
! {{#expr:220*1.5 round -1}}px
| {{#expr:250*1.5 round -1}}px
| {{#expr:300*1.5 round -1}}px
| {{#expr:400*1.5 round -1}}px
|-
! style="text-align:left;" | upright=1.8
| {{#expr:120*1.8 round -1}}px
| {{#expr:150*1.8 round -1}}px
| {{#expr:180*1.8 round -1}}px
| {{#expr:200*1.8 round -1}}px
! {{#expr:220*1.8 round -1}}px
| {{#expr:250*1.8 round -1}}px
| {{#expr:300*1.8 round -1}}px
| {{#expr:400*1.8 round -1}}px
|}

== Examples ==

=== thumb, frameless, upright ===
The following examples use the "thumb" or "frameless" options to set an image to the default size, with "upright" to scale the image larger or smaller than the default size. When using these options, a small image will never be scaled larger than its original size.

{| class="wikitable" style="font-size:92%; background-color:#F5F5F5;"
! Options used
! Large image
! Small image
|-
| <code><nowiki>|thumb</nowiki></code>
| style="vertical-align:top;" | [[File:Claude Lorrain 008.jpg|thumb]]
| style="vertical-align:top;" | [[File:Paintball single red 100px.png|thumb]]
|-
| <code><nowiki>|thumb|upright=1.35</nowiki></code>
| style="vertical-align:top;" | [[File:Claude Lorrain 008.jpg|thumb|upright=1.35]]
| style="vertical-align:top;" | [[File:Paintball single red 100px.png|thumb|upright=1.35]]
|-
| <code><nowiki>|thumb|upright=0.3</nowiki></code>
| style="vertical-align:top;" | [[File:Claude Lorrain 008.jpg|thumb|upright=0.3]]
| style="vertical-align:top;" | [[File:Paintball single red 100px.png|thumb|upright=0.3]]
|-
| <code><nowiki>|frameless</nowiki></code>
| style="vertical-align:top;" | [[File:Claude Lorrain 008.jpg|frameless]]
| style="vertical-align:top;" | [[File:Paintball single red 100px.png|frameless]]
|-
| <code><nowiki>|frameless|upright=1.35</nowiki></code>
| style="vertical-align:top;" | [[File:Claude Lorrain 008.jpg|frameless|upright=1.35]]
| style="vertical-align:top;" | [[File:Paintball single red 100px.png|frameless|upright=1.35]]
|-
| <code><nowiki>|frameless|upright=0.3</nowiki></code>
| style="vertical-align:top;" | [[File:Claude Lorrain 008.jpg|frameless|upright=0.3]]
| style="vertical-align:top;" | [[File:Paintball single red 100px.png|frameless|upright=0.3]]
|}

In the examples above, the size of the image is scaled based on each user's default image size, which can be changed at [[Special:Preferences]]. Setting image size in [[pixels]], such as "250px", would override the user's preference and display the image as 250px wide for all users who view that image on that page.

=== left, right, center ===
As shown in the prior examples, "thumb" defaults to right aligned, while "frameless" defaults to left aligned. This can be changed by using "left", "right", or "center". The following examples include [[lorem ipsum]] text before (in red) and after (in green) to show how it wraps around the image.

{| class="wikitable" style="font-size:92%; background-color:#F5F5F5;"
! Alignment
! thumb
! frameless
|-
| <code>left</code>
| style="vertical-align:top;" | {{red|Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}}[[File:Claude Lorrain 008.jpg|thumb|left]]{{green|Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.}}
| style="vertical-align:top;" | {{red|Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua}}[[File:Claude Lorrain 008.jpg|frameless|left]]{{green|Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.}}
|-
| <code>right</code>
| style="vertical-align:top;" | {{red|Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}}[[File:Claude Lorrain 008.jpg|thumb|right]]{{green|Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.}}
| style="vertical-align:top;" | {{red|Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}}[[File:Claude Lorrain 008.jpg|frameless|right]]{{green|Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.}}
|-
| <code>center</code>
| style="vertical-align:top;" | {{red|Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}}[[File:Claude Lorrain 008.jpg|thumb|center]]{{green|Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.}}
| style="vertical-align:top;" | {{red|Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}}[[File:Claude Lorrain 008.jpg|frameless|center]]{{green|Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.}}
|}

== Purpose of autosizing ==
Because many users have begun viewing Wikipedia articles on various smaller devices, not just desktop PC computers, the autosizing of images will allow each user to view those images as smaller pictures on handheld devices, such as [[laptop]]s, notebook or [[tablet computer]]s, and some [[mobile phone]]s. The users can set their [[Special:Preferences]] to select their default image size (such as: 250px, 180px, or 120px), for whichever handheld device they use for viewing Wikipedia pages.
Autosizing of images will also allow sight-impaired users, per [[WP:Access]], to enlarge their default image-size (such as 300px) to perhaps see details more clearly.

== See also ==
* [[Wikipedia:Picture tutorial]] – full description of image options & many examples

{{Wikipedia essays|building}}

:::: [ ''This essay is a quick draft to be expanded later.'' ]

[[Category:Wikipedia information pages]]
[[Category:Wikipedia essays about article formatting]]

Wikipedia:Autosizing images - Revision history

Tachyony: Imported page