How to Add Beautiful Images/Photos Styles in Blogger/Website using HTML Code - Shakeel File

Image with Caption and Auto Lightbox:

Photo/Imsges Styles in Blogger/Website using HTML Code

Here are a few clear, corrected versions you can use—pick the tone that fits your site best:

Simple & clear: The caption in this image will not appear in the article description or snippet. You can choose whether to keep captions visible in article previews.

More professional: The image caption will not be included in the article description or snippet. However, you may choose to display captions in article preview snippets.

User-friendly: Image captions are not shown in the article description/snippet. You can still keep captions visible in article previews if you prefer.

Short & direct: Image captions are excluded from article snippets. Captions can optionally remain visible in previews.

Image with Caption and Auto Lightbox

Image with Caption and Auto Lightbox Blog/Website HTML Code:

<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='image_title_here' class='full' src='https://4.bp.blogspot.com/.../name.png'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>Your_caption_is_here</td>
    </tr>
  </tbody>
</table>

---

Image with Scroll Layout:

Photo/Imsges Styles in Blogger/Website using HTML Code

"Scroll Layout" ka concept image ke sath design aur development dono context mein use hota hai. Aap shayad website ya app design ke liye ek aisi image dhund rahe hain jo lambi ho ya carousel ki tarah move kare.

Yahan kuch tareeqe hain jinse main aapki madad kar sakta hoon:

1. Vertical Long Image (Infographic Style)

Agar aapko ek aisi image chahiye jo upar se neeche scroll ho (jaise koi product page ya resume), toh ise "Long-form content" kehte hain.

• Use case: App screenshots dikhane ke liye ya step-by-step guide ke liye.
• Design Tip: Ismein whitespace ka use zaroori hai taake user bore na ho.

2. Horizontal Scroll (Carousel)

Ismein images side-by-side hoti hain. Mobile apps mein ye zyada common hai.

• CSS Example: Agar aap coding kar rahe hain, toh aap overflow-x: scroll; aur display: flex; ka use karke images ko line mein la sakte hain.

3. Parallax Scrolling

Ye ek trendy layout hai jahan background image slow move karti hai aur foreground text fast, jis se ek 3D effect aata hai.

Image with Scroll Layout Blog/Website HTML Code:

<!--[ Scroll Image ]-->
<div class='psImg scImg scrlH'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
</div>

---

Image with Show All Function:

Photo/Imsges Styles in Blogger/Website using HTML Code

“Show All” Function for Images: Technical & User-Level Benefits

Using the "Show All" function provides numerous advantages, especially when your blog post contains a large number of images.

Here are the main benefits:

1. Page Load Speed & Performance

When you show only 4 images initially instead of 50, the browser has to load much less data. This reduces the initial page load time drastically, allowing your website to open almost instantly.

2. User Engagement (Clean Layout)

If users see too many images at once, they may feel overwhelmed or bored and leave the page. The "Show All" function keeps your blog organized and professional, allowing users to expand content at their own pace.

3. Reduced Bounce Rate

Bounce rate is critical for Google ranking (when users leave the site immediately). A fast-loading website with a professional layout keeps users engaged longer, improving your SEO ranking.

4. Mobile Friendly Experience

Mobile screens are smaller. Displaying 20 images at once forces users to scroll excessively. The "Show All" button saves mobile users from long scrolling, improving the browsing experience.

5. Smart Bandwidth Usage

The biggest advantage is that if you have lazy loading enabled, additional images are downloaded only when the user clicks the button. This prevents unnecessary server load.

Tip: Apply a subtle fade-in animation to images when users click "Show All". This makes your website feel modern and smooth.

Show All

Image with Scroll Layout Blog/Website HTML Code:

<!-- Show All Image Section -->
<input class="inImg hidden" id="for-hideImage" type="checkbox">

<div class="psImg hdImg">
    <!-- Always visible images -->
    <img alt="image_title_here" src="https://4.bp.blogspot.com/.../name.png"/>
    <img alt="image_title_here" src="https://4.bp.blogspot.com/.../name.png"/>
    <img alt="image_title_here" src="https://4.bp.blogspot.com/.../name.png"/>

    <!-- Button to show all hidden images -->
    <div class="btImg">
        <img alt="image_title_here" src="https://4.bp.blogspot.com/.../name.png"/>
        <label for="for-hideImage" aria-label="Show all image">Show All</label>
    </div>

    <!-- Hidden images, revealed when checkbox is checked -->
    <div class="psImg shImg">
        <img alt="image_title_here" src="https://4.bp.blogspot.com/.../name.png"/>
        <img alt="image_title_here" src="https://4.bp.blogspot.com/.../name.png"/>
        <img alt="image_title_here" src="https://4.bp.blogspot.com/.../name.png"/>
        <img alt="image_title_here" src="https://4.bp.blogspot.com/.../name.png"/>
    </div>
</div>

---

Image with Grid Layout:

Photo/Imsges Styles in Blogger/Website using HTML Code

Grid Layout for Blog Images: Professional & Organized

Grid Layout means arranging images in neat boxes (like a table or board). For blog posts, grid layout is considered the most professional way.

Here are the main advantages of using a grid layout:

1. Space Saving (Compact Look)

If you place images vertically (one below another), the page becomes very long. In a grid layout, you can show 3-4 images per row, so users need less scrolling.

2. Professional & Clean Layout

Grid layout makes your website look like a modern gallery. All images are aligned and sized consistently, preventing your blog from appearing messy or scattered.

3. Responsive Design (Mobile Friendly)

The best feature of grid layout is that it automatically adjusts to different screen sizes:

• Desktop: 4 images per row
• Tablet: 2 images per row
• Mobile: 1 image per row

This ensures your site looks perfect on every device.

4. Better Comparison

If you are showing multiple photos of a subject from different angles, grid layout allows users to see everything at once. This makes comparison easy and effective.

5. Fast Scanning

Human eyes scan items in a row faster than scrolling down. Grid layout improves user experience (UX) by enabling quick visual scanning.

Image with Grid Layout Blog/Website HTML Code:

<!--[ Grid Image ]-->
<div class='psImg grImg'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
</div>

---

Lazyload Image:

Photo/Imsges Styles in Blogger/Website using HTML Code

Lazy Loading Images: Boost Your Website Speed & User Experience

Lazyloading images is one of the most effective ways to improve website speed and enhance user experience. When a website has a lot of images, the browser tries to download all images at once, which can slow down page load.

Lazyloading solves this problem. Here are the main benefits:

1. Faster Page Load

When a user opens your blog post, the browser loads only the images visible on the screen (above the fold). The rest of the images load only when the user scrolls down. This makes your page load almost instantly.

2. Data & Bandwidth Saving

If a user does not read your entire article and leaves midway, lazyloading ensures the images below are never loaded. This saves user’s mobile data and reduces your server bandwidth usage.

3. Improved SEO Ranking

Google favors websites that load faster (Core Web Vitals). Lazyloading helps improve your "Largest Contentful Paint" (LCP) score, which boosts your SEO ranking.

4. Reduced Server Load

If thousands of users visit your site at the same time, lazyloading reduces server pressure because not all images are requested at once.

How Lazy Loading Works

As shown in the diagram, images are not downloaded until the user scrolls close to them.

Easy Native Lazy Loading

Modern browsers support native lazy loading. You don’t need heavy JavaScript. Simply add loading="lazy" to your <img> tag:

<img src="image.jpg" alt="Description" loading="lazy">

That’s it! The browser handles the rest automatically, loading images only when they are about to enter the viewport.

Lazyload Image Blog/Website HTML Code:

<div class="cBx">
  <pre>&lt;img src="https://4.bp.blogspot.com/.../name.png" 
     alt="image_title_here" 
     loading="lazy"&gt;</pre>
</div>

Also Take a Look at These

👉 Please Support Us ❤️ Subscribe OUR YouTube Channel 👍

💡 Note:
We hope you found this article helpful! If so, please consider sharing it with your friends. If you have any questions or run into any issues, feel free to drop a message in the comment box or Contact Us directly. We're here to help! ✅