I keep running up against poor quality in my uploaded images on this site: http://www.rfm-inc.com.
Particularly with the slider image on the home page.
When I inspected, I noticed some HTML that says.
<img src="http://rfm-inc.com/wp-content/uploads/2016/10/Windmill2-1140x713.jpg" alt="windmill2" width="1140" title="Our machines. Our team. Your big ideas." class="woo-image slide-image" draggable="false">
WordPress seems to be drawing on a different image than the original (which is at “http://rfm-inc.com/wp-content/uploads/2016/10/Windmill2.jpg“.
When I change the inspector text to this, it works fine.
I’d like to turn this feature off completely, and rely only on my Photoshop and CSS skills to get the desired result.
Anyone know how to do this?
Thanks!
2
Answers
I figured it out. Basically, there's a file in my theme (theme "Resort" by WooThemes) called "featured-slider.php". There was a line of code in there that was set like this:
and I changed it to this:
Now I need to figure out how to crop that image to a different height with CSS, but at least that part's over.
Thanks Guillermo et al.
When you upload an image WP automatically saves the original file plus it also creates a series of thumbnails in different sizes. These smaller images will then be uses on your theme templates when needed in order to load the optimum size image every time and improve the load speed of your site.
By default, WordPress saves the “full” size, “large”, “medium” and “thumbnail”, and you can control the px size of these from Settings -> Media.
Now that being said the reason why you are seeing some images pixelated is because your theme is loading a WP generated thumbnail that is a size too small. In order to change that you’ll need to modify your code slightly in order to tell WordPress which image size to load. You can read more about WP functions to retrieve images in different generated sizes here: https://developer.wordpress.org/reference/functions/wp_get_attachment_image