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. 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 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |