Storage: Remove un-attached images #346

luukee · 2024-12-03T21:46:29Z

Issue: "On our WordPress site we need to identify unused images and delete them because our hosting storage plan is at its max."

Chat GPT response:

Step 1: Backup Your Site

Before deleting anything, create a full backup of your site, including the database and wp-content/uploads folder, in case something goes wrong.

Step 2: Identify Unused Images

Option 1: Use a Plugin

Install a Plugin
Use a plugin like [Media Cleaner](https://wordpress.org/plugins/media-cleaner/) or [Advanced Database Cleaner](https://wordpress.org/plugins/advanced-database-cleaner/).
- Media Cleaner scans your media library and identifies unused images.
- It cross-references images with posts, pages, and custom post types to detect files that are not in use.
Run a Scan
- Go to the plugin settings.
- Perform a scan to identify unused media files.
Review the List
- Carefully review the list of unused images before deleting them.

Option 2: Use WP-CLI (Advanced)

If you are comfortable using WP-CLI, you can list unattached media files:

wp media list --status=unattached

This will show images that are not attached to any post or page.

Option 3: Manual Review (Time-Consuming)

Go to Media > Library in the WordPress admin.
Switch to the "List" view and sort by the Uploaded To column.
Look for files with "Not attached" and manually verify if they're still in use.

Step 3: Delete Unused Images

Using Plugins:

After identifying unused files, plugins like Media Cleaner allow you to delete them in bulk.

Using File Manager or FTP:

Access the Server
Use cPanel's File Manager or an FTP client like FileZilla.
Navigate to wp-content/uploads/
Review old image folders for unused or orphaned files.
Delete with Caution
Cross-check files before deleting to ensure they’re not hardcoded in themes or custom post types.

Step 4: Optimize Remaining Images

Use a plugin like [Smush](https://wordpress.org/plugins/wp-smushit/) or [ShortPixel](https://wordpress.org/plugins/shortpixel-image-optimiser/) to compress images.
Remove unnecessary image sizes generated by WordPress using the remove_image_size function in your theme's functions.php.

Step 5: Prevent Future Clutter

Figure out what image sizes are not used in our theme
First we need to find what image sizes are used for each page in our theme code. Image sizes in WordPress

Disable Unnecessary Image Sizes:
Add this to your functions.php file to prevent WordPress from generating certain image sizes:

add_filter('intermediate_image_sizes_advanced', function($sizes) {
    unset($sizes['medium']);
    unset($sizes['large']);
    unset($sizes['thumbnail']);
    return $sizes;
});

Use a Media Library Organization Plugin:
Plugins like [Media Library Organizer](https://wordpress.org/plugins/media-library-organizer/) can help keep your media library clean going forward.

Final Recommendations:

Start with plugins to avoid manual effort.
Review the list of unused images carefully to avoid accidentally deleting important files.
Once unused images are deleted, monitor your storage regularly to prevent future issues.

The text was updated successfully, but these errors were encountered:

luukee · 2024-12-06T18:28:33Z

@Tominium What have you found out?

Tominium · 2024-12-09T17:20:54Z

Sizes found for Step 5 #1 (Sizes that are used on the site by the engage-2-x theme:
add_image_size('featured-post', 510, 310, true); add_image_size('featured-image', 600, 0, false); add_image_size('carousel-image', 1280, 720, true); add_image_size('small', 100, 0, false);

luukee · 2024-12-10T19:01:25Z

Great Tomin! Below is a look at all the image sizes WordPress creates on upload. Are there any of these we do not need?

We only want WordPress to create images we use on the site. They might be used on any page, so we'll have to go through each page and list out the image sizes used (desktop & mobile).

You can view the mediaengagement.org sitemap here. Learn about sitemaps here..

** another thing Kat had mentioned was how research article featured images were pixelated, so seems like we need to make sure the correct image size is used or check if CSS is expanding the image beyond its intrinsic size.

Let me know if you have any questions, thanks for working on this!

Tominium · 2025-01-22T18:51:05Z

@luukee getting started on this again

luukee · 2025-01-22T22:43:31Z

Thanks Tomin 🙏

Tominium · 2025-01-27T23:27:40Z

Image sizes used by the themes, still working on other image sizes

add_image_size( 'jetpack-portfolio-admin-thumb', 50, 50, true );
add_image_size( 'rpwe-thumbnail', 45, 45, true );
add_image_size('featured-post', 510, 310, true);
add_image_size('featured-image', 600, 0, false);
add_image_size('carousel-image', 1280, 720, true);
add_image_size('small', 100, 0, false);
add_image_size( '1536x1536', 1536, 1536 );
add_image_size( '2048x2048', 2048, 2048 );

Tominium · 2025-01-27T23:31:24Z

According to the Regenerate Thumbnail Plugin, these are all the registered (currently used) image sizes on the dev/local version of the site:

thumbnail: 150×150 pixels (cropped to fit)
medium: 300×300 pixels (proportionally resized to fit inside dimensions)
medium_large: 768×0 pixels (proportionally resized to fit inside dimensions)
large: 1024×1024 pixels (proportionally resized to fit inside dimensions)
1536x1536: 1536×1536 pixels (proportionally resized to fit inside dimensions)
2048x2048: 2048×2048 pixels (proportionally resized to fit inside dimensions)
featured-post: 510×310 pixels (cropped to fit)
featured-image: 600×0 pixels (proportionally resized to fit inside dimensions)
carousel-image: 1280×720 pixels (cropped to fit)
small: 100×0 pixels (proportionally resized to fit inside dimensions)
rpwe-thumbnail: 45×45 pixels (cropped to fit)

luukee · 2025-01-28T21:56:35Z

Amazing Tomin. Good info to keep on tab.

We need to use a specific WordPress image size across all of our .twig templates/

This way we can narrow down the only image sizes we need and remove the extras.

Reason being, with that huge list of available image sizes WordPress creates 11 image sizes every time an image is uploaded! (creates the 11 listed + the original, so 12 images).

This is taking up a ton of storage on our hosting plan!

TODO:

Find all <img elements used in the templates/ directory and make sure we are using a "WordPress" image size (Timber Docs: Use a WordPress image size)

All the templates/ files: ( I made a list in the Projects you can edit or use Google Sheets if you'd like )

├── 404.twig
├── announcement_filters.twig
├── archive.twig
├── author.twig
├── base.twig
├── comment-form.twig
├── comment.twig
├── enp-quiz-page.php
├── filters.twig
├── footer.twig
├── header.twig
├── html-header.twig
├── index.twig
├── menu.twig
├── page-about.twig
├── page-annual-report.twig
├── page-connective-democracy.twig
├── page-full-width.twig
├── page-homepage.twig
├── page-landing.twig
├── page-plugin.twig
├── page-press.twig
├── page-public-interest-standard.twig
├── page-publications.twig
├── page-quiz-landing.twig
├── page-solidarity-journalism.twig
├── page-team.twig
├── page-tips-sheet.twig
├── page-tools.twig
├── page-video-grid.twig
├── page.twig
├── partial
│ ├── article-footer.twig
│ ├── article-meta-data.twig
│ ├── article-meta.twig
│ ├── brandbar.twig
│ ├── cloud.twig
│ ├── event-meta.twig
│ ├── events-calendar.twig
│ ├── filter-item.twig
│ ├── funder.twig
│ ├── funders.twig
│ ├── hero-content.twig
│ ├── hero.twig
│ ├── heros.twig
│ ├── orbit.twig
│ ├── pagination.twig
│ ├── research-meta.twig
│ ├── researchers.twig
│ ├── search.twig
│ ├── section-header.twig
│ ├── share.twig
│ ├── social.twig
│ ├── svg.twig
│ ├── team-link.twig
│ ├── teammate-tease.twig
│ ├── teammate.twig
│ ├── teammates.twig
│ ├── teammates_new.twig
│ ├── tile-event-date.twig
│ ├── tile-intro.twig
│ └── tile.twig
├── quiz-create.twig
├── search.twig
├── sidebar.twig
├── single-password.twig
├── single.twig
├── tease-post.twig
├── tease.twig
├── tiles-annual-report.twig
└── tiles.twig

If the template file has an image we need to list what image size(s) it's using so we can filter out what image sizes we do not need anymore. I know this is a lot, maybe we should have a video chat? Let me know of your initial thoughts. Thanks! @Tominium

Tominium · 2025-01-30T22:40:17Z

These are the sizes that seem to be hardcoded in the .twig files:

Will go through the actual pages now

luukee · 2025-01-31T00:59:22Z

These are the sizes that seem to be hardcoded in the .twig files:
320x56
500x300
112x27
85x27
Will go through the actual pages now

Gotcha. For those can you add these to the list of which files these belong to for us to reference? Thanks Tomin!

Tominium · 2025-02-10T23:22:55Z

Here are the urls and main image sizes for the post-sitemap. Let me know if this is format you're looking for, will continue the other sitemaps

image_sizes.txt

luukee · 2025-02-11T00:37:47Z

Thanks the list Tomin. I apologize for not explaining this further. What we are looking for is a list of each .twig file's image size used (the list you found before) if it has one.

For example (see image below):

partial/article-meta.twig has one '<img' tag that does not use an image size from your list.
partial/brandbar.twig has two '<img' tags that are direct asset links in the theme.
partial/funder.twig has one '<img' tag that uses the 'medium' image size.

So the list would be:

partial/article-meta.twig
- .mate__img:
  - Image size: none
partial/brandbar.twig
- .brandbar__logo:
  - Image size: assets
partial/funder.twig
- .funder__img:
  - Image size: medium

This way we can 1) find the places where an image size is not used and fix it & 2) once we have a list we know which image sizes, from your list are not used and remove those from the theme + delete the image files on the server.

Does that make sense? Let me know.

Tip:

If I search the theme templates/ directory for "<img" I get 46 results:

Tominium · 2025-02-11T22:11:01Z

Yes that makes sense, will get on it!

luukee · 2025-02-12T01:09:56Z

Great Tomin! Let me know of any questions you have :)

Tominium · 2025-02-17T23:12:52Z

image sizes.txt

Here are the image sizes I found for each img tag in each twig file.

luukee · 2025-02-18T14:23:21Z

Thank you Tomin. I added your .txt file contents to the assets/img/image_sizes/image_sizes.md file. I am preparing a couple files for you to use as an example so you can fix all of these easily :) stay tuned....

luukee · 2025-02-18T20:25:22Z

Updating `<img>` Elements in Our WordPress Theme

Branch to Checkout:

Check out the feature-image-sizes branch:
GitHub Branch: feature-image-sizes

🔍 Relevant Commits:

Summary

Every <img> element in the .twig files must use a registered image size (see Final Image Sizes below).

Before:

<img 
    src="{{ post.thumbnail.src | resize(500,300) }}" 
    alt="{{ post.thumbnail.alt }}" 
    class="ann__header-img"/>

After:

<img 
    src="{{ post.thumbnail.src('2048x2048') }}"
    srcset="{{ post.thumbnail.srcset }}" 
    sizes="{{ post.thumbnail.img_sizes }}" 
    alt="{{ post.thumbnail.alt }}" 
    class="ann__header-img" 
    loading="eager" />

🔹 Key Changes Explained:

post.thumbnail.src('2048x2048') → Uses the largest available image size (2048x2048) to ensure high quality.
srcset="{{ post.thumbnail.srcset }}" → Enables responsive image selection so the browser picks the best size.
sizes="{{ post.thumbnail.img_sizes }}" → Defines how images scale across different screen sizes.
loading="eager" → Ensures important images load immediately instead of waiting.

Final Image Sizes

WordPress Defaults We Are Using

Name	Size (px)	Behavior
thumbnail	150×150	Cropped to fit
medium	300×300	Proportionally resized
2048x2048	2048×2048	Proportionally resized

Custom Image Sizes (Defined in `src/Managers/Theme.php`)

Name	Size (px)	Behavior
featured-image	600×0	Proportionally resized
carousel-image	1280×720	Cropped to fit
grid-large	404×240	Cropped to fit

More info:

WordPress Defaults We Are Not Using

Name	Size (px)	Reason
medium_large	768×0	Not needed
large	1024×1024	Not needed
1536x1536	1536×1536	Not needed

Next Steps

Update all <img> elements in the .twig files following the Before/After example.
Use the correct image size based on its usage in the theme (hero, grid, thumbnail, etc.).
Commit your changes and push to the feature-image-sizes branch.

Notes

If an image is used as a hero or full-width image, use 2048x2048.
For grid post thumbnails, use grid-large.
Avoid using unnecessary custom sizes to keep file storage low.

Let me know if you have any questions! Thanks @Tominium

luukee assigned Tominium Dec 3, 2024

luukee mentioned this issue Feb 5, 2025

Research posts: small lightbox image size #374

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Storage: Remove un-attached images #346

Storage: Remove un-attached images #346

luukee commented Dec 3, 2024 •

edited

Loading

luukee commented Dec 6, 2024

Tominium commented Dec 9, 2024

luukee commented Dec 10, 2024

Tominium commented Jan 22, 2025

luukee commented Jan 22, 2025

Tominium commented Jan 27, 2025

Tominium commented Jan 27, 2025

luukee commented Jan 28, 2025 •

edited

Loading

Tominium commented Jan 30, 2025 •

edited

Loading

luukee commented Jan 31, 2025 •

edited

Loading

Tominium commented Feb 10, 2025 •

edited

Loading

luukee commented Feb 11, 2025

Tominium commented Feb 11, 2025

luukee commented Feb 12, 2025

Tominium commented Feb 17, 2025

luukee commented Feb 18, 2025

luukee commented Feb 18, 2025

Storage: Remove un-attached images #346

Storage: Remove un-attached images #346

Comments

luukee commented Dec 3, 2024 • edited Loading

Step 1: Backup Your Site

Step 2: Identify Unused Images

Option 1: Use a Plugin

Option 2: Use WP-CLI (Advanced)

Option 3: Manual Review (Time-Consuming)

Step 3: Delete Unused Images

Using Plugins:

Using File Manager or FTP:

Step 4: Optimize Remaining Images

Step 5: Prevent Future Clutter

Final Recommendations:

luukee commented Dec 6, 2024

Tominium commented Dec 9, 2024

luukee commented Dec 10, 2024

Tominium commented Jan 22, 2025

luukee commented Jan 22, 2025

Tominium commented Jan 27, 2025

Tominium commented Jan 27, 2025

luukee commented Jan 28, 2025 • edited Loading

TODO:

Tominium commented Jan 30, 2025 • edited Loading

luukee commented Jan 31, 2025 • edited Loading

Tominium commented Feb 10, 2025 • edited Loading

luukee commented Feb 11, 2025

Tip:

Tominium commented Feb 11, 2025

luukee commented Feb 12, 2025

Tominium commented Feb 17, 2025

luukee commented Feb 18, 2025

luukee commented Feb 18, 2025

Updating <img> Elements in Our WordPress Theme

Branch to Checkout:

🔍 Relevant Commits:

Summary

Before:

After:

🔹 Key Changes Explained:

Final Image Sizes

WordPress Defaults We Are Using

Custom Image Sizes (Defined in src/Managers/Theme.php)

WordPress Defaults We Are Not Using

Next Steps

** Notes**

luukee commented Dec 3, 2024 •

edited

Loading

luukee commented Jan 28, 2025 •

edited

Loading

Tominium commented Jan 30, 2025 •

edited

Loading

luukee commented Jan 31, 2025 •

edited

Loading

Tominium commented Feb 10, 2025 •

edited

Loading

Updating `<img>` Elements in Our WordPress Theme

Custom Image Sizes (Defined in `src/Managers/Theme.php`)

Notes