On average, webp images are 25% - 34% smaller than jpegs. With widespread support of the image format webp, it's time to use it with wild abandon. Even though the image size is responsive, telling the browser the intrinsic image size helps avoid jankiness when loading since the browser can predict how much space the image needs on the page.
The width and height attributes refer to the intrinsic size of the image. AltĮssential to accessibility and SEO, the alt tag also leverages Ghost's Handelbars templating layer to either use a supplied alt tag, entered via the post editor, or uses the post's title as a fallback. Otherwise, we tell the browser to find an image that matches the width of the viewport ( 100vw). In the sizes statement above, we tell the browser to use the 700 px image whenever the viewport is wider than 48rem. While the browser can automatically try to choose from the set of images provided, sizes gives precise instructions on which image to choose. Sizes is the trickiest part of the markup but the most powerful. It usually works to choose the middle image here. If the browser can't choose from the srcset, the src image will be used. These values will match up with those in the package.json file. After that, you let the browser know the intrinsic width of the image by giving the pixel value followed by w. The first part contains the Handlebars markup and helpers provided by Ghost that pulls in the resized images specified above.
Srcset defines the set of images from which the browser can choose. Let's walk through the markup to understand what's happening. You can then string these image sizes together to build out a set of images in your template's Handelbar file. Here, the size attribute calls in the image you defined in your package.json file above. The size names ( "s", "m", etc.) can be anything you want. The JSON snippet below shares the image sizes I use for my theme. Which sizes you want to generate will be determined by the needs of your theme. These images are defined in the package.json file located at the root of the theme. Ghost allows you to generate a set of images at specified sizes so that you can do just that. Ideally, then, you'd serve a 2000 px image to the first reader but a 360 px image to the second. For example, if your reader is on an ultrawide monitor, you may need to serve a 2000 px image, but serving that same image to a reader on a phone that has a screen that's only 360 px wide is a waste of pixels, data, and loading time. The reader's device will determine the optimal size for that image. Let's say you have a header image for your post.
#WEB OPTIMIZE USING XNCONVERT HOW TO#
This tutorial will show you how to optimize images anywhere and everywhere in your Ghost theme. While Ghost provides several tools to optimize these images, it's up to theme developers to implement them.
But what about images that show up elsewhere in your theme like a hero or card image? The good news is that Ghost automatically optimizes local images you add in the editor, generating different sizes relative to the user's viewport, adding size attributes to avoid jank, and lazy loading off-viewport images. Put another way, if your site is loading slowly (or not as fast you'd like), images are probably the chonk. In the HTTP Archive's 2021 Almanac, they found that images are the single greatest contributor to page weight or the "total number of bytes of a particular web page." Images outpace all other content (JS, CSS, and HTML) by over 70% in a measure of median bytes by content type.
0 kommentar(er)
