Storage: Remove un-attached images

[luukee]

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

1. 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.

2. Run a Scan

   • Go to the plugin settings.
   • Perform a scan to identify unused media files.

3. 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:

1. Access the Server
   Use cPanel's File Manager or an FTP client like FileZilla.
2. Navigate to wp-content/uploads/
   Review old image folders for unused or orphaned files.
3. 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

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

---

Step 5: Prevent Future Clutter

1. 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

2. 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;
   });

3. 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.

[luukee]

@Tominium What have you found out?

[Tominium]

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]

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]

@luukee getting started on this again

[luukee]

Thanks Tomin 🙏

[Tominium]

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]

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]

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]

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

320x56
500x300
112x27
85x27

Will go through the actual pages now

[luukee]

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]

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]

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]

Yes that makes sense, will get on it!