I have an old WordPress site with thousands of images that are not optimized; making the site run very slow. I have plans to optimize all the images and then replace the ones on the site with the new, smaller images. I don't want to upload all the images to the site in addition to having the old ones there. I want to delete the old ones and add the new ones. What is the best way that I can accomplish this without breaking things?
If you have FTP access, you could download all of your images and optimize however you see fit, then re-upload (just keep them the same dimensions & file name and override the old files). Be sure to back up any required full-size images because you're overriding the ones on the server this way and wont get them back.
Or use one of dozens of image optimization plugins so you have no need to replace any images manually. For example:
Smush
Ewww
Imagify
Kraken
CW
TinyPNG
Related
I created a WordPress website on which I have 14 images. I did not resize the image source files, but I installed the Smush plugin to optimize the size of the uploaded images.
However, I need to export my website (public-html directory) and it is totally oversized: 270MB. It is for a school project, and I am asked for a 200MB-max directory only.
When checking the wp-content/uploads directory, I notice that each uploaded image ended up with like 10 duplicates of different sizes. The directory overall size is more that 75MB, which is huge.
Thus I have two questions:
Are all those duplicates necessary or can I delete some of them directly from the wp-content/uploads directory?
In Smush settings, I can see that it is possible to choose which duplicate sizes we want among all those automatically generated by WordPress. If I change these settings, I suppose I'll have to re-upload all my images, right?
The "duplicates" you are talking about are, I presume, the different sizes of each image created by your WP setup.
Alternative sizes can be created by:
Wordpress by default can create 3 alternative sizes: a thumbnail, a medium image and a large image (as well as keeping the full sized image that was uploaded).
Your theme can create other images sizes that it will use.
Plugins can also create other sizes that they need.
You can't just delete the additional images or remove that size from being generated and hope for the best. Well-made themes and plugins will only add other image sizes if it uses that size on your website, so removing those images will result in broken images on your website.
Also, even when you delete them, if the code that creates them is also not removed, they will keep getting created when new images are uploaded.
What you could try:
Don't upload very large images The fact that your folder is so big for just 10 images suggests that the photos you are uploading are very large in the first place.
When Wordpress is creating the alternative sizes, it reduces the pixel size but it doesn't always created a greatly-reduced file size. So if the original images are very large, the alternative sizes are also likely to be larger than needed.
Make sure your optimiser plugin settings are optimal Smush and other optimising plugin might not be reducing the size by much depending on the settings (note that the image itself will also affect this). You might need to change the setting to favour file size over quality. Also make sure it is working on all the alternative image sizes.
Don't keep the original full-sized images. Even if your other sizes are reduced effectively, WP keeps the full-sized image by default after it created the alternative sizes.
If you know your site doesn't use the full-sized image, you don't need to keep them. Some image optimisation plugins will automatically remove the original, others will give you the option to do this.
Try a different optimiser plugin. There are a number of plugins available, some reduce the size of images automatically on upload (like Smush), others reduce the size on upload only (such as Imsanity. The image itself has a big effect on how easy they are to optimise, so try a different plugin in case it is better for your images.
In perfomance analysis I've seen, plugins such as the free version of Smush or EWWW don't give great results - the Smush developers even say "The free version of the plugin doesn’t perform that well.". In comparison, the plugins that use paid subscriptions usualy perform a lot better. Some of these have free versions with limited functionality that could work for you, e.g. reSmush.it (free up to 5MB image size) or ShortPixel Image Optimizer (Free up to 100 images per month)
You can manually delete old sizes if you know they are not being used any longer - for example if a deleted plugin or old theme had added other sizes that were no longer needed. But the fact that they were created again when you added them again shows that they are all being created by active plugins and theme.
You can unset any defined image size if you know it is not being used to prevent them from being created, for example, if you don't use some of the default image sizes created by Wordpress. You can use a plugin to do this, such as Smush or Stop Generating Unnecessary Thumbnails.
Or you can use the code below in your functions.php - it will also work for other sizes added by themes and plugins, if you pass the name that was used in add_image_size. Note that this only affects new images uploaded - you will need to delete any existing ones.
function unset_unused_image_sizes( $sizes ){
unset( $sizes[ 'thumbnail' ]);
unset( $sizes[ 'medium' ]);
unset( $sizes[ 'large' ]);
unset( $sizes[ 'full' ] );
return $sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'unset_unused_image_sizes' );
Not all the resized images will be used - once the add_image_size is added by a theme or plugin, alternative sizes of all images will be created whether they are used or not. So if you upload photos for use on one specific page only, any sizes created by a gallery plugin for example would not be needed. However you will need to do this on an image-by image basis.
Check for plugin caches. Many gallery plugins will create their own cache of images - depending on the plugin, this might be created in the uploads folder. They do use this cache so you can't remove it permanently, but for the purpose of moving a site you can delete the cache folders before you export your site to reduce the overall size. The plugins should recreate the cache on the new site when you use it (but verify this beforehand to be sure!)
Summary
My guess is that your original images are very large to start with and automatic resizing is not optimising them effectively. My first recommendation is to reduce the size before you upload them - graphics packages are usually much more effective at optimising images than Wordpress and even the plugins. As I say above, the developers of Smush say the "free version of the plugin doesn’t perform that well", so you are better off not relying on it to do the optimisation.
I want to have a website page load images faster or where the images don't stop the user from seeing the text on the pages before the images finish loading.
1. if I have text on a website page. Does the text render first so the user can see text while the images are still loading?
2. If i have 3 mb of images and have my server that is hosting the website render 1.5 and then move the other 1.5mb to something like flickr and have the image source point to flickr, will that be better and load faster. Or say I just have all the images pull from flickr?
Please help me.
Its a WordPress site, and Clouldflare free cdn does something weird to my theme. So not an option. I also don't want to lazy load for other reason.
EDIT : o yea, if I host all the images on Flickr does that give away link juice (Domain Authority Rank)?
Images do increase overall load time, but they aren't render blocking. The whole page will render (barring render-blocking CSS or Scripts) and images will pop in when they are done. If you want to avoid that flash, you can lazy-load them, or otherwise put the final image's sizes on a container element, so the text is already "moved".
You can't really "Speed Up" image loads. The best thing to do is cut down on the number of images, if applicable, and lazy-load any that don't need to be requested initially. The next best thing (and arguably more important overall, I suppose) is to optimize your images. There are a handful of WordPress plugins that will do this for you, or you can do it in PhotoShop - and even some image CDN's will do it. This basically means, don't load a 1MB image if you don't have to, for "web display" purposes, you can serve a 200kb image that looks almost as good.
A side point, you can "speed them up" a little by having them served from a faster server, but that goes for anything web related. Throw it on better hardware to get better performance (for the most part).
If they are large images, you should first and foremost, optimize them. Make sure they are the smallest file size possible. Also, don't bother splitting "1.5mb" of them over to another host. Either upload them directly all through a CDN (some even tie into your WP Library, like Cloudinary), or keep them local to your site. You'll save yourself some headaches later.
If you have a photo heavy website (photography or other types of galleries), 3mb isn't really an awful lot - but again it's best to serve a more compressed image, you can even link the image or a button to the "full resolution" one.
I am about to upload a large number of images to a Wordpress site.
I'll need to resize and replace them until the size is deemed to be the best one. I plan to make the first upload by FTP and then a plugin like Media From FTP.
Sequential uploads will be also be done by FTP. The problem is that this will not update the original image data in the database (for example the dimensions which will be different).
I've seen the plugin Enable Media Replace regenerating original image information, but only for a specific image while I want to do this in batch. I've seen thumbnail regeneration plugins but I'm uncertain that they update the original image's data so I don't know if there's a way.
Any suggestions?
Thanks!
To answer my own question, here's what I did :
Downloaded my images by FTP
Made my resize operations and re-uploaded my images using FTP
Installed WPR Rebuild Meta Data plugin to rebuild all the modified image meta data
Installed Force Regenerate Thumbnails plugin to regenerate thumbnails.
I give a more thorough description here.
I have a WordPress site that uses the WPRO (WordPress Read Only) plugin to host all media files on Amazon S3. I've changed the thumbnail and image sizes in my custom theme, and uploading new images to the media library uses the new sizes. However, when I try to regenerate all thumbnails using "Regenerate Thumbnails," it doesn't work, often complaining that the original cannot be found.
How can I force the regenerate thumbnails plugin to use the original image on S3 to recreate the thumbnails for existing images?
There is a plugin that claim it can "Force Regenerate Thumbnail" i remember using a year ago and it worked for my case at the time.
https://en-ca.wordpress.org/plugins/force-regenerate-thumbnails/
But has of today i personally never go that route anymore for efficiency reasons since a theme can change a lot and edge cases can appear depending on client/corporate needs. To circumvent any "Regeneration" you could install.
https://en-ca.wordpress.org/plugins/fly-dynamic-image-resizer/
The gist of the plugin would be that you define your sizes but are only generated when someone is calling a specific image, thus allowing you to change theme image sizes at any time without going through a Regeneration Process (which can be very long). Any generated file sizes can be deleted also at any time as long as the original exists.
I have website and i have lots of images on home page.
Almost 60 images in row and i have almost 5 rows of carousel.
But all this image comes from remote website feed so i cant optimize them and the occupy lots of size
when i test my website in gt matrix it shows me 26mb of page so it is obvious it will take
much loading time.I have applied lazy loading images,how ever the speed is very slow
What steps should i take to speed up this kind of page?I dont want to use any plugin because they brake website some times
Upon showing images from another server makes the site slow, because that server may be slow.
So better you try to get those images from your server if possible, else you can try using
plugins like wp-supercache
Minify all your JS and CSS files
For better page speed and avoid these error you should try following things.
Enable Compression from Cpanel
You are using Wordpress so use any of the cache plugin.
Use header expiry using httaccess or page header.
minimize you scripts (css,js).
Use compressed images (jpegtran,pngout).
If your image is casing issue try to use CDN for images.
This will help you to improve page speed.
Crop the images using timthumb. There is wordpress plugins for timthumb probably. Check in wordpress directory as well as it's use. Once images size is reduced, Page would be loaded fast. Additionally, follow the #Jobin Jose's comment, will help you to optimize the speed. Moreover, use WP Super Cache plugins.