Modern English Images
Darth Gupta
AVIF and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data.
WebP is supported in the latest versions of Chrome, Firefox, Safari, Edge, and Opera and provides better lossy and lossless compression for images on the web.See A New Image Format For The Webfor more on WebP.
WebP is supported by the latest versions of Chrome, Firefox, Safari, Edge, and Opera, while AVIF support is more limited.You'll need to serve a fallback PNG or JPEG image for older browser support. SeeHow can I detect browser support for WebP? for an overview of fallback techniques and the list below for browser support of image formats.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
This beautifully illustrated book includes full-color reproductions of all the images in the atlas, in conjunction with rarely seen related material gathered from collections and archives around the world. Taking a bold new approach to the study of early modern global interactions, art historian Ccile Fromont demonstrates how visual creations such as the Capuchin vignettes, though European in form and crafstmanship, emerged not from a single perspective but rather from cross-cultural interaction. Fromont models a fresh way to think about images created across cultures, highlighting the formative role that cultural encounter itself played in their conception, execution, and modes of operation.
Modern pages and web parts are designed to be fully responsive across devices, meaning that images used in web parts will scale differently depending on where they are shown, which layout is used, and the device on which they are being viewed. For example, modern pages are designed to look great on mobile devices, and automatic image scaling helps create that attractive experience.
Because of the responsive page design, there is not a specific height or width in pixels that will ensure that an image will maintain a specific shape across devices and layouts. Images are resized and cropped automatically to show the best possible result across a variety of devices and layouts. However, there are some guidelines that can help you make sure your images look great on your pages.
An aspect ratio is the relationship between width and height of images. It is usually expressed as two numbers, such as 3:2, 4:3 or 16:9. The width is always the first number. As an example, a ratio of 16:9 could be 1600 pixels in width by 900 pixels in height. Or, it could be 1920 x 1080, 1280 x 720, or any other width/height combinations that can be calculated to equal 16:9. You can find aspect ratio calculators online and in some photo editing tools to help you determine the aspect ratios of your images.
A page can be laid out with sections that include different column types and layouts, such as full-width columns, one column, two columns, three columns, one-third left and one-third right columns. A general rule for images expected to fill the width of a column is that they be at least as wide as the column in which they are placed. For example, an image in an image web part in one column should be at least 1204 pixels wide. Following are the width guidelines for each of the column layouts:
The height of images placed within other column layouts will depend on your aspect ratio. Here are height/width guidelines for 16:9 and 4:3 aspect ratios (rounded up/down to the nearest pixel). This is helpful to keep your images at a width and height that scales appropriately for mobile devices, for example.
The layouts in the web parts you use will also affect how your images scale. The following examples show different web parts and their layouts within one column, and the aspect ratios that are used in each.
Images will expand to the width of the section containing the web part. You have the option to change the aspect ratio or free-hand crop using the Image toolbar, or use the resize handles to make your image bigger or smaller.
Images look best when they are landscape or 16:9 or greater in aspect ratio, and when they are at least 1 MB in size. Also, be sure to set a focal point to the keep the most important part of the picture in view, especially when the picture is used in thumbnails, news layouts, and search results.
Page thumbnails are shown in places like search results, highlighted content results, news posts, and more. By default, the thumbnail comes from the page title area or from the web part that is in the first order on the page (such as top left of a page layout). You can override the default and change the page thumbnail. When you do so, it is best to use an image with a 16:9 aspect ratio.
When you add an image to a page title area or hero web part, it is also best to set the focal point in the area of the image that you want to always display. To learn more about setting a focal point for these two scenarios, see Change the focal point of an image in the Hero web part and Customize the title area in a page.
I am currently sourcing images for my book and other projects, and I recently had an email from my colleague asking where to get free or discounted images for use in publications. I decided to compile a list of the institutions and agencies who I have used to get images and my thoughts on them.
Images share most of the same behaviors as pages. For example, you must check out an image to edit it. They also have the same file, review, and publish options. However, images have fewer access settings and properties compared to pages, and no source code editing.
Another way to swap images on a page is to upload the new image and overwrite the old one. The new image must have the same name and extension and be uploaded to the same location as the old one. Publish the new image to your live website, and it is automatically updated on any pages containing the old one. You may still want to check those pages, however, in case the old image had styling or proportions applied that interact strangely with the new image.
If you have binary management turned on, then your images are tracked by dependency tags. This means that when an image is renamed or moved, any pages containing that image are automatically updated so the image doesn't break. If an image is deleted, it's treated as a broken link in link check and the broken pages report.
By continuing to use this site, you agree to the storing of first- and third-party cookies on your device to enhance site navigation; analyze site, product, and service usage; and assist in our marketing and promotional efforts. Cookie Policy
Images are the most popular resource type on the web and are often the largest. Users appreciate high-quality visuals, but care needs to be taken to deliver those hero images, product photos and cat memes as efficiently and effectively as possible.
We have a reasonably wide selection of image formats to choose from when rendering images on the web. The essential difference between image formats is that the image codec used to encode or decode each image type is different. An image codec represents the algorithm used to compress and encode images to a specific file type and decode them for display on the screen.
Degree of compression, image quality, and decoding speed are key factors to be considered when comparing image performance for the web. Specific use cases may require image formats that support other features like:
JPEG has been the most widely supported image format for 25 years. Classic JPEG encoders lead to relatively weak compression, while more modern JPEG encoding efforts (like MozJPEG) improve compression but are not quite as optimal as modern formats. JPEG is also a lossy compression format. While decoding speed for JPEGs is excellent, it lacks other desirable features required of images on modern, eye-catching websites. It does not support transparency in images, animation, depth maps, or overlays.
JPEG works best with photographs, while PNG is its counterpart for other still images. PNG is a lossless format and can support alpha transparency, but the compression achieved, especially for photographs, is considerably low. JPEG and PNG are both used extensively depending on the type of image required.
The target for modern image formats is thus to overcome the limitations of JPEG and PNG by offering better compression and flexibility to support the other features discussed earlier. With this background, let us look at what AVIF and WebP have to offer.
The AV1 image file format (AVIF) is an open-source image format for storing still and animated images. It was released in February 2019 by the Alliance for Open Media (AOMedia). AVIF is the image version of the popular AV1 video format. The goal was to develop a new open-source video coding format that is both state-of-the-art and royalty-free.
AVIF supports very efficient lossy and lossless compression to produce high-quality images after compression AVIF compresses much better than most popular formats on the web today (JPEG, WebP, JPEG 2000, and so on). Images can be up to ten times smaller than JPEGs of similar visual quality. Some tests have shown that AVIF offers a 50% saving in file size compared to JPEG with similar perceptual quality. Note that there can be cases where WebP lossless can be better than AVIF lossless, so do be sure to manually evaluate.
The JPEG has blocky artifacts and visible color banding in the clouds and water, while the WebP and AVIF have noticeably less of this blockiness observable. In my opinion, the AVIF offers the overall smoothest experience of all three.
Since its release in 2019, the support for AVIF has increased considerably. While there was no direct method to create or view AVIF files earlier, you can easily do so now with the open-source utilities available.
c80f0f1006