I'm having some problems on a WordPress site I am working on: http://bit.ly/1Hs41z8
TimThumb generates the thumbnails in the bottom section of the site just fine with no issues. However, in the slider, the thumbnail images are broken. When I look at the URL, it looks really long and complex so I am not sure what is causing it to break. If I go to the image url itself, the image loads fine.
Any help would be greatly appreciated!
TimThumb is no longer supported or maintained. You can read the reasons why on blog: TimThumb End of Life.
See what Google say's
I would suggest you to use PHPThumb.
From PHPThumb:
phpThumb() uses the GD library to create thumbnails from images (JPEG,
PNG, GIF, BMP, etc) on the fly. The output size is configurable (can
be larger or smaller than the source), and the source may be the
entire image or only a portion of the original image. True color and
resampling is used if GD v2.0+ is available, otherwise paletted-color
and nearest-neighbour resizing is used. ImageMagick is used wherever
possible for speed. Basic functionality is available even if GD
functions are not installed (as long as ImageMagick is installed). One
demo file uses portions of Javascript API by James Austin.
Related
My WordPress website takes a lot of time to load pages, a problem that many of us face. I used GT metrix to check my WordPress page and then checked my website waterfall.
One thing I saw taking more than half time of my page is an image which is not uploaded in my website.
check this image of gt metrix waterfall:
I checked it, and I found this is an image which I have not used in my entire webpage. Also I could not find where is this image used.
Same thing happens in different pages that has different images to it.
I deleted one image from my media but now when I check the GT metrix waterfall I get a 404 error code which means its still trying to load that image and I cannot find it.
This is a theme which I had purchased and its not a popular theme like divi or ocean and hence could not contact the support.
How to check where a particular image is used in my webpage using
the media library (can I do that?)
How to find out and remove this image? Or at least is there a way where I can delete the image from the library and hence my webpage should not look for this image wasting its time instead of getting a 404 code
Your problem is quite common indeed, for your specific case i can suggest by starting to search the image name in both code + DB, it MUST be somewhere.
If you cannot find it inside your stuff there's only one answer left: there's some JS third party script that is loading that for you, but in this case i seriously dubt it would be in the same domain as your site.
Using the media library there's not much you can understand, if you are VERY lucky it will have a message like "attached to" but that thing cover like 10% of the cases, most of the time the image ARE used but are not attached to anything like a post, so the media library won't tell you anything
I've had this happen before a few times, too. Isn't it frustrating!? If you could provide a URL, I (and others, I'm sure) would be happy to take a look and try to figure out what's going on. :)
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 noticed that my images weren't crisp, and in the inspector found the piece of code that is making them blurry. But, now I don't know where to look within the actual code to remove this. It's not assigned in CSS. This is a portfolio page. I am using the Avada theme. Any ideas?
Link: http://www.madpeagames.com/gacha-sets/
enter image description here
Looking at your theme's demo I see sharp images and the image code is different. So, the problem is not caused by your theme.
My guess is that you use Jetpack's Photon on your site. Try to deactivate the module and see if this changes anything.
However, image compression is a good thing, especially when using lots of images. Perhaps, if deactivating the Photon module solves the issue, compare the speed of your website with and without Photon. If it makes a notable difference, look in the Photon settings, to see what you could change to solve the issue.
Also, JPEG files (.jpg) may not be the best choice for your thumbnails, because you lose a lot of quality when the image isn't shown at its original size. If changing the settings doesn't help, you could try to use PNG files instead.
If Photon causes the issue and you don't find a way to solve it, while still compressing your images, I would suggest to contact Jetpack support. Alternatively you could try to use a different WordPress plugin for image compression.
I hope that helps. GL!
I ran a Mogrify script on my server and resized about 1000 images. That went fine.
However when I started editing pages in Wordpress I noticed the images all looked very odd. Thumbnails for example weren't sized correctly and looked like they had been resized incorrectly.
I checked some images in the media library and saw that their metadata showed the old resolution, before I had resized it.
Is there any way I can have Wordpress go through and update its media library with the correct image sizes?
Problem is WordPress has its own way of dealing with image sizes. And it's not only the metadata and other database info, the various versions that WP generates has the size suffixed to the file name.
You will probably need to use add_image_size in your theme's functions.php and/or adjust the Media Settings in the administrative panel.
After that, run the plugin Regenerate Thumbnails. And regarding its name, I'll quote the plugin author:
Anything that is not the fullsize image is a thumbnail. Some
thumbnails are just bigger than others. My plugin re-makes all of
them.
PS: please note that WordPress questions are better fit here: http://wordpress.stackexchange.com
for some reasons the images I upload to my Drupal website are downsampled.
For example the image I'm uploading is 857x947
I've checked the following settings:
- the size of the CCK ImageField: 420x840
- the size of image cache used to re-sample the image: 420x840
Image Toolkit: Compression: 100%
I'm using cropping functionality. But I'm not dragging a small area, just almost all the original image is selected.
What am I missing ? Maybe php is compressing the image while uploading it ?
Thanks
Just to be sure that it is not caching try to clear all Drupal caches and your browser cache as well.
Then check if the imagecache preset you're using really isn't containing any scale action, just a crop action. To be sure, again just flush the imagecache preset and check the folder that there is no old, wrong image left.
Then go to your content type -> Manage Fields -> your picture field and check if the maximum resolution in there is set correctly.
I'm not aware of any other steps that downsample an image, if you don't have any other image-related modules installed. You wrote that you checked theses things, but most likely one of those steps is responsible.
By default Drupal resamples uploaded jpgs to 75% of their original quality.
Change it in this configuration page
/admin/settings/image-toolkit
Also I noticed that Image Magick library gives better results than default GD, but depends of the format of the image, etc.
Even if you do not use any imagestyle effect and whatever the setting at /admin/settings/image-toolkit the image will always be altered, see https://drupal.stackexchange.com/questions/246398/image-derivative-size-different-from-original-even-in-absence-of-any-effect and the related Drupal 7 core issue https://www.drupal.org/node/2914964