Skip to content

Images: increase quality for images #4265

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 14, 2025
Merged

Images: increase quality for images #4265

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
617f10d
increase quality for images
Blargian Aug 12, 2025
d1f139d
set to 100
Blargian Aug 12, 2025
c460601
improvement to iamge quality
Blargian Aug 13, 2025
a08232b
display higher quality images
Blargian Aug 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docusaurus.config.en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330,7 +330,7 @@ const config = {
[
'@docusaurus/plugin-ideal-image',
{
quality: 85,
quality: 100,
sizes: [48, 300, 600, 1024, 2048],
disableInDev: false,
},
Expand Down
31 changes: 24 additions & 7 deletions src/theme/IdealImage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ function bytesToSize(bytes: number) {
const MAX_SIZE_FILTERS = {
logo: 48,
sm: 300,
md: 600,
lg: 1024,
md: 1024, // Increased from 600 to 1024 for better quality
lg: 2048, // Increased from 1024 to 2048 for better quality
} as const;

// Utility function to filter `srcSet` based on the `size`
Expand Down Expand Up @@ -115,6 +115,14 @@ export default function IdealImage(
const isGifInEarlyReturn = typeof img === "string" ? img.endsWith('.gif') :
(typeof img === "object" && img !== null && typeof img.default === "string" && img.default.endsWith('.gif'));

// Use 600px display size for md, even for GIFs
const getGifDisplaySize = (size: keyof typeof MAX_SIZE_FILTERS) => {
if (size === "md") return 600;
return MAX_SIZE_FILTERS[size];
};

const gifDisplaySize = getGifDisplaySize(size);

const gifStyles = isGifInEarlyReturn ? (
size === "lg"
? {
Expand All @@ -128,12 +136,12 @@ export default function IdealImage(
}
: size === "logo"
? {
width: `${MAX_SIZE_FILTERS[size]}px`,
width: `${gifDisplaySize}px`,
height: "auto",
display: "block",
}
: {
maxWidth: `${MAX_SIZE_FILTERS[size]}px`,
maxWidth: `${gifDisplaySize}px`,
width: "auto",
height: "auto",
margin: "0 auto",
Expand Down Expand Up @@ -200,6 +208,15 @@ export default function IdealImage(
const isGif = currentImage.path?.toLowerCase().endsWith('.gif') || false;

// Apply conditional styles based on the `size`
// For md size, we want to display at 600px visual size but use 1024px source for quality
const getDisplaySize = (size: keyof typeof MAX_SIZE_FILTERS) => {
if (size === "md") return 600; // Display md at 600px visual size
if (size === "lg") return "100%"; // lg remains full width
return MAX_SIZE_FILTERS[size]; // logo and sm use their original sizes
};

const displaySize = getDisplaySize(size);

const imageStyles: React.CSSProperties =
size === "lg"
? {
Expand All @@ -213,19 +230,19 @@ export default function IdealImage(
}
: size == "logo"
? {
width: `${MAX_SIZE_FILTERS[size]}px`,
width: `${displaySize}px`,
display: "block",
}
: {
width: `${MAX_SIZE_FILTERS[size]}px`,
width: `${displaySize}px`,
margin: "0 auto",
display: "block",
boxShadow: border
? "0px 1px 8px -1px rgba(21, 21, 21, 0.20)"
: "none",
// For GIFs, add maxWidth and height auto to maintain aspect ratio
...(isGif && {
maxWidth: `${MAX_SIZE_FILTERS[size]}px`,
maxWidth: `${displaySize}px`,
width: "auto",
height: "auto",
}),
Expand Down