Nate Allen

Fact Maven

Ethan O'Sullivan

<blockquote>
Specify Image Dimensions is a plugin that scans and inserts missing <code>width</code> and <code>height</code> in all <code><img></code> tags. Specifying the dimension allows for faster rendering by eliminating the need for unnecessary re-flows and repaints. This is particularly helpful with website speed tools such as <a href="https://gtmetrix.com" rel="nofollow ugc">GTmetrix</a> and <a href="https://developers.google.com/speed/pagespeed" rel="nofollow ugc">Google’s PageSpeed</a>.
</blockquote>
<h4>Before</h4>
<pre><code><img src="http://example.com/image.jpg" title="Some Title" />
<img src="http://example.com/vector.svg" class="svg" />
<img src="http://example.com/another-vector.webp" />
</code></pre>
<h4>After</h4>
<pre><code><img src="http://example.com/image.jpg" title"Some Title" width="100" height="25" />
<img src="http://example.com/vector.svg" class="svg" width="100%" height="auto" />
<img src="http://example.com/another-vector.webp" width="100%" height="auto" />
</code></pre>
<h4>Contribute on GitHub</h4>
Want to help improve this plugin? Head over to our <a href="https://github.com/factmaven/specify-image-dimensions" rel="nofollow ugc">GitHub page</a>

Specify Image Dimensions

Automatically specify image dimensions that are missing width and/or height attributes. Helps load faster and better ranking on website speed tools su …

th23

Provides easy admin access to define maximum width and height of uploaded images. Uploads exceeding these dimensions will be resized accordingly. Only the defined maximum size will be stored on the server. This way you will be able to save space and bandwidth and serve pages faster to your visitors due to the reduced image size.
Watermark your precious images, keeping track of them in the internet. New uploads can automatically be marked or you can add/remove watermarks via the Media Library. Unmarked copies of images are kept inaccessible to the public in case you want to restore it.
<a href="https://www.youtube.com/watch?v=umfS6tGseqI" rel="nofollow ugc"></a>
Additionally th23 Upload offers some further options:
<ul>
<li>Keep original aspect ration of uploaded images, preventing automatic cropping</li>
<li>Specify a suffix for resized images to be added to names, eg upload of too large image <code>test.jpg</code> will be stored as <code>test_resized.jpg</code></li>
<li>Set quality for resized images, allowing to save further space and bandwidth</li>
<li>Select image sizes to watermark, eg to excluding thumbnails</li>
<li>Mass-add/-remove watermarks for already uploaded image attachments</li>
<li>Select location of watermark on the image and maximum width/height to cover</li>
<li>Supports GD Library and ImageMagick (Imagick)</li>
</ul>
<h4>Usage</h4>
This plugin works in the background, even for Admins and Editors of your website.
Once configured all work upon upload of new images happens during the normal process – images are resized and watermarked as per your configuration before they are added in the post / page editor.
See intro videos about functionality and configuration for an overview: <a href="https://www.youtube.com/playlist?list=PLnpYL-vo05g3JRAJiL0xG6Dqc0HxZ1DJL" rel="nofollow ugc">Visit the th23 Upload video series on Youtube</a>.
<h4>NOTE</h4>
Only handles JPG / JPEG images, as PNG (transparency) and GIF (animation) could loose their features upon resizing.!
For manually adding / removing of watermarks visit the Media Library, where you find this function as part of an images row actions, when hovering.

th23 Upload

Resize images on upload to maximum dimensions, saving space and bandwidth. Watermark images upon upload or manually via Media Library

Specify Image Dimensions vs th23 Upload