![]() ![]() ![]() 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 |