Some images on your Showoff site may appear cropped, cutting off parts of the image. This is common in sliders, library list images, or article images. Understanding why this happens and how to optimize your images can help you maintain a professional, visually consistent site.
Why Does Auto-Cropping Happen?
Images are often displayed as background images in certain areas of your website.
What Is a Background Image?
A background image automatically fills its container proportionally, adapting its height and width depending on the device or screen size.
Why We Use Background Images
-
Responsive Design: Ensures images adapt to different screen sizes without distortion.
-
Slider Text: For images behind text (e.g., in sliders), background images maintain proper scaling across desktop and mobile.
-
Consistency: For article or list images, background images help all items line up neatly, creating a clean visual layout.
Tips for Optimizing Background Images
Image Size
-
There’s no fixed size since background images adapt to the container.
-
As a guideline, make your image slightly larger than the container.
-
For full-width sections, 1920px width is recommended as the maximum.
Avoid Text in Images
-
Do not include text in background images:
-
Text in images is not picked up by search engines, hurting SEO.
-
Text can become pixelated on large or high-resolution screens.
-
Use HTML text over the background image instead for clarity and accessibility.
-
Summary
Auto-cropping in Showoff is a feature, not a bug. It ensures images scale proportionally across devices while maintaining a neat, professional layout. By using slightly oversized images and avoiding embedded text, your site will look polished, perform well, and remain SEO-friendly.
Comments
0 comments
Please sign in to leave a comment.