How to Serve Images in Next-Gen Formats in Blogger
Want to fix the “Serve images in next-gen formats” issue on your Blogger website? You can optimize Blogger image URLs and use modern image formats such as WebP to improve image delivery and potentially reduce image file sizes.
In this detailed guide, you will learn about next-generation image formats, how WebP works in Blogger, how to modify Blogger image URLs, and how to serve images in modern formats such as WebP.
- What Are Next-Generation Image Formats?
- Different Next-Generation Image Formats
- What We Are Going to Do
- How Next-Gen Image Delivery Works
- Requirements
- Step 1 — Open the Blogger Post
- Step 2 — Switch to HTML View
- Step 3 — Find the Image URL
- Step 4 — Add -rw to the URL
- Step 5 — Update and Test
- How to Use WebP on Blogger
- What Is a WebP Image?
- Complete Image Optimization Flow
- Why Use Next-Generation Images?
- Example Blogger Image URL Conversion
- Important Considerations
- Video Tutorial
- Frequently Asked Questions
- Conclusion
What Are Next-Generation Image Formats?
Next-generation image formats are modern image formats designed to use newer image compression technologies and deliver images more efficiently on the web.
Traditional Image
│
▼
PNG / JPEG
│
▼
Larger Image Files
Next-Generation Image
│
▼
Modern Compression
│
▼
WebP / AVIF
│
▼
More Efficient Image Delivery
The “Serve images in next-gen formats” recommendation commonly encourages website owners to use newer image technologies that can provide improved compression and smaller image files in supported situations.
Different Next-Generation Image Formats
There are several image formats commonly associated with modern or next-generation image delivery.
✓ WebP Image Format
✓ JPEG 2000 Image Format
✓ JPEG XR Image Format
✓ AVIF Image Format
These formats use different compression technologies and browser support may vary depending on the format and user environment.
What We Are Going to Do
In this tutorial, we will learn a simple method used in Blogger image URLs to serve images in WebP format by modifying the image URL.
✓ Open Blogger Dashboard
✓ Select the post containing images
✓ Switch to HTML view
✓ Find the image URL
✓ Locate the size parameter
✓ Add -rw to the URL
✓ Update the post
✓ Test the image format
How Next-Gen Image Delivery Works
BLOGGER IMAGE
│
▼
IMAGE URL
│
▼
MODIFY URL PARAMETER
│
▼
ADD -rw
│
▼
MODERN IMAGE DELIVERY
│
▼
TEST IMAGE
The method described in the source article uses the -rw parameter at the end of the Blogger image size section to request WebP image delivery through the Blogger image URL format.
Requirements
You only need access to your Blogger website and a post containing Blogger hosted images.
| Requirement | Purpose |
|---|---|
| Blogger Website | Required to edit your Blogger post |
| Post with Images | Required to modify an existing image URL |
| HTML View | Required to access the image source code |
| Browser | Required to test the updated image |
| Backup | Recommended before making major changes |
Step 1 — Open the Blogger Post
1 Go to Your Blogger Dashboard
First, open your Blogger Dashboard and select the blog where you want to optimize your image URLs.
Blogger Dashboard
↓
Posts
↓
Select Post
Choose a post that contains images you want to check or optimize.
Step 2 — Switch to HTML View
2 Open the Post HTML Code
After opening the Blogger post, switch to HTML view so that you can access the image source URLs.
Post Editor
↓
HTML View
↓
Find Image Code
The image source URL will usually appear inside an HTML image element.
Step 3 — Find the Image URL
3 Search for the Image Size Parameter
Press Ctrl + F and search for the image size section inside your Blogger image URL.
For example, the source article demonstrates finding a URL section similar to:
.../s16000/image-name.webp
Your image URL may use a different size value depending on the Blogger image that you are editing.
Step 4 — Add -rw to the Image URL
4 Modify the Image URL
According to the source article, add -rw after the Blogger image size parameter.
Example:
Original URL
.../s16000/image-name.webp
Updated version:
.../s16000-rw/image-name.webp
The source article specifically recommends adding -rw after the image size parameter when editing Blogger image URLs.
Step 5 — Update and Test the Post
After modifying the image URL, update or publish your Blogger post.
Modify Image URL
↓
Add -rw
↓
Update Post
↓
Open Website
↓
Check Image
↓
Test Image Format
You can check the delivered image by saving the image to your computer or by using a website performance testing tool, as described in the source article.
How to Use WebP on Blogger
The method described in the original article explains that adding -rw to the end of the relevant Blogger image URL section can request WebP delivery.
Image URL
↓
Add -rw
↓
Updated Blogger Image URL
↓
WebP Delivery Method
The source article states that Blogger images can use this URL modification when working with the newer Blogger image URL structure.
What Is a WebP Image?
WebP is a modern image format designed for web images and supports both lossy and lossless compression.
IMAGE FILE
│
▼
COMPRESSION
│
┌───────────┴───────────┐
│ │
▼ ▼
LOSSY LOSSLESS
│ │
└───────────┬───────────┘
▼
WebP
│
▼
WEB IMAGE FORMAT
The source article describes WebP as a modern image format that can provide efficient lossless and lossy compression for web images.
How Do I Add a WebP Image in HTML?
A WebP image can be used inside a normal HTML image element.
<img src="image.webp" alt="WebP Image">
The source article also discusses using multiple image versions in situations where compatibility or different display requirements need to be considered.
Complete Image Optimization Flow
BLOGGER POST
│
▼
IMAGE FILE
│
▼
IMAGE URL
│
▼
HTML EDITOR
│
▼
FIND SIZE PARAMETER
│
▼
ADD -rw
│
▼
UPDATE POST
│
▼
TEST DELIVERY
Why Use Next-Generation Images?
| Benefit | Explanation |
|---|---|
| Modern Compression | Modern formats can use more advanced image compression technologies. |
| Potentially Smaller Files | Efficient compression can reduce image file sizes in supported situations. |
| Website Performance | Optimized image delivery can contribute to faster webpage loading. |
| Better Image Optimization | Modern formats provide additional options for optimizing web images. |
Example Blogger Image URL Conversion
The following example demonstrates the URL modification method.
Original Blogger Image URL
https://blogger.googleusercontent.com/
.../s16000/image-name.webp
Updated Image URL
https://blogger.googleusercontent.com/
.../s16000-rw/image-name.webp
The source article demonstrates this same type of URL change when explaining how to serve Blogger images in WebP format.
Important Considerations
Before modifying Blogger image URLs, keep the following points in mind.
- Always keep a backup of important content before editing.
- Test the updated image after publishing the post.
- Check image URLs carefully for typing mistakes.
- Browser support may vary between image formats.
- Use properly optimized source images whenever possible.
- Check image quality after compression or format conversion.
- Test website performance after making optimization changes.
Video Tutorial
The original article also includes a video tutorial demonstrating the method.
The embedded video tutorial is included in the original source article.
Frequently Asked Questions
How do I fix “Serve images in next-gen formats” in Blogger?
You can optimize Blogger image delivery by using modern image formats and,
for the method described in this tutorial, modifying the Blogger image URL
with the -rw parameter after the size section.
How do I serve an image in next-gen format?
Next-generation image delivery involves using modern image formats that use newer image processing and compression technologies.
How do I use WebP on Blogger?
The source article describes modifying supported Blogger image URLs by adding
-rw after the image size parameter.
What are next-generation image formats?
Examples mentioned in the source article include WebP, JPEG 2000, JPEG XR and AVIF.
What is WebP?
WebP is a modern web image format that supports lossy and lossless compression.
Can WebP images be used in HTML?
Yes. A WebP image can be used using a normal HTML image tag with the image source pointing to a WebP file.
Conclusion
Serving images in next-generation formats can help improve image optimization and support more efficient image delivery on the web.
For Blogger users, the method described in the original article involves opening the post HTML, locating the Blogger image URL and adding -rw after the image size parameter before updating the post.
Modern image formats such as WebP and AVIF are commonly used for web image optimization and can be useful when improving website performance and image delivery.
Next step: Check your Blogger image URLs, test the image format after updating them and continue optimizing your website images for better loading performance.
Note: Blogger image URL behavior, browser compatibility and image format support may change over time. Always test your website and image delivery after making changes to your Blogger posts or image URLs.
Nice
ReplyDeleteBut bhai mere url me s1108 likha hua aa raha hai??
ReplyDelete