/media/image.jpg
or /media/image.png
), but the image will be served as WebP with correct HTTP headers. You can verify this by checking your page in PageSpeed Insights. "Media" refers to the files you upload in your blog. It can be images, videos, audio, or any other file. Visit Tools → Media Library to manage your blog media.
"A picture is worth a thousand words". Adding pictures to your blog posts is a great way to make them more interesting and informative. But be careful – using too many or large images can slow down your website. Hyvor Blogs automatically optimizes images for you when possible.
You can upload images in post editor, in the media library, or in blog settings such as logo, favicon, etc. The following image formats are supported:
.png
.jpg
, .jpeg
, .jfif
, .pjpeg
, .pjp
.gif
.apng
.avif
.svg
.webp
WebP images are 25-34% smaller than JPEG/PNG images of the same quality. It is recommended nowadays to use WebP in websites whenever possible as all modern browsers support WebP images. You can upload JPEG and PNG as usual in your posts. Hyvor Blogs will automatically convert them to WebP images on the fly. You don't need to do anything.
/media/image.jpg
or /media/image.png
), but the image will be served as WebP with correct HTTP headers. You can verify this by checking your page in PageSpeed Insights. Hyvor Blogs handles responsive images for you. Here's how it works. Images (PNG, JPEG, WebP only) uploaded to the media library can be automatically resized by appending /{width}w
to the URL.
/media/image.png
- Original image/media/image/100w.png
- Resized to maximum width 100px/media/image/750w.png
- Resized to maximum width 750pxWe use this resizing feature and srcset (supported by all modern browsers) to make images in your posts responsive. These are the sizes we use:
500w
750w
1000w
1500w
For example, if you upload a 1250px image to a post, the HTML code would look like this:
<img
src="/media/image.jpg"
srcset="
/media/image.jpg/500w 500w,
/media/image.jpg/750w 750w,
/media/image.jpg/1000w 1000w,
/media/image.jpg 1250w
"
alt="Image"
/>
Then, the browser will decide the best image version to load based on the screen size and the device pixel ratio (DPR).
Note that this feature is only available for images uploaded to the media library. Externally hosted images will not be resized.