How can I increase the quality of the automatically optimized images?
#Images that are automatically resized appear low quality
calm glen
gaunt baneBOT
Hi @calm glen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Astro provides a quality property that you can use to control the quality of your images. This property can either be a preset (low, mid, high, max) that is automatically normalized between formats, or a number from 0 to 100 (interpreted differently between formats) source (https://docs.astro.build/en/guides/images#quality).
Here's an example of how you can use the quality property in your Astro project:
---
import { Image } from "astro:assets"
import penguin from "~/assets/penguin.png"
---
<Image src={penguin} quality="high" alt="a high-quality penguin" />
In this example, the quality property is set to high, which means the image will be optimized to a high quality. The resulting image will be automatically optimized for you in a modern web format, for maximum performance with minimum Cumulative Layout Shift (CLS) source (https://astro.build/blog/astro-210#built-in-image-support).
If you're using images from a CMS or CDN, you can use the image’s full URL as the src attribute in the <Image /> component, an <img> tag, or in Markdown notation. For image optimization with remote images, also configure your authorized domains or URL patterns source (https://docs.astro.build/en/guides/images#using-images-from-a-cms-or-cdn).
Remember, if you require more control over your image attributes, you can use the .mdx file format, which allows you to include Astro’s <Image /> component or a JSX <img /> tag in addition to the Markdown syntax source (https://docs.astro.build/en/guides/images#update-your-markdown-mdx-and-markdoc-files).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
calm glen
@gaunt bane Can you link me to the docs on how this works? What allows the title to be set like this
test
Let me check the knowledge base for you. One moment! :books:
I'm sorry, but the information extracts provided do not contain specific details about setting the title in the manner you've shown. However, Astro does support the use of frontmatter in Markdown files, which is a section at the top of the file that can contain metadata about the file. This is typically used to define variables like the title of a page or post.
Here's an example of how you might set the title in a Markdown file using frontmatter:
---
title: 'My First Blog Post'
---
# My First Blog Post
This is the content of my first blog post.
In this example, the title of the blog post is set to 'My First Blog Post' using frontmatter. This title can then be accessed and used elsewhere in your Astro project.