I am using a ThemeForest Theme and it is making 8 different image thumbnail sizes automatically for every image I upload and using them for different view-port( I think ).
<img src="https://sk1cars.fancybuilds.com/wp-content/uploads/2021/03/01-24-255x161.jpg" srcset="https://sk1cars.fancybuilds.com/wp-content/uploads/2021/03/01-24-255x161.jpg 255w, https://sk1cars.fancybuilds.com/wp-content/uploads/2021/03/01-24-300x189.jpg 300w, https://sk1cars.fancybuilds.com/wp-content/uploads/2021/03/01-24-1024x646.jpg 1024w, https://sk1cars.fancybuilds.com/wp-content/uploads/2021/03/01-24-380x240.jpg 380w, https://sk1cars.fancybuilds.com/wp-content/uploads/2021/03/01-24-510x322.jpg 510w, https://sk1cars.fancybuilds.com/wp-content/uploads/2021/03/01-24-280x177.jpg 280w, https://sk1cars.fancybuilds.com/wp-content/uploads/2021/03/01-24-560x353.jpg 560w, https://sk1cars.fancybuilds.com/wp-content/uploads/2021/03/01-24-350x221.jpg 350w, https://sk1cars.fancybuilds.com/wp-content/uploads/2021/03/01-24-700x441.jpg 700w, https://sk1cars.fancybuilds.com/wp-content/uploads/2021/03/01-24-398x251.jpg 398w, https://sk1cars.fancybuilds.com/wp-content/uploads/2021/03/01-24-796x502.jpg 796w, https://sk1cars.fancybuilds.com/wp-content/uploads/2021/03/01-24.jpg 1110w" sizes="(max-width: 640px) 100vw, (max-width: 991px) 50vw, (max-width: 1170px) 33vw, 350px" alt="Lamborghini Urus 2021 Stage 2, Akrapovic Exhaust" class="img-responsive" loading="lazy">
here is the code output for frontend site. ( checked using inspect tool ).
Is there a way to change this code directly in the theme files? and how do i find the file that output this html? The theme uses Elementor and Beverbuilder( one of them ) to make the pages. so the theme structure is quite difficult to follow.
Can someone guide me on this ?
https://sk1cars.fancybuilds.com/ here is the staging version of the website.
I can’t speak to the theme specifically, so it’s a little tough to say what exactly you need to do. What I can say is do not modify the theme directly.
If you modify the theme itself, your changes will be overwritten when an update for the theme comes. You’ll want to make a child theme with your current theme as the parent. If you track down what is doing this, you can add the template directly to the child theme and then make modifications.
As a hunch, the theme is probably using `wp_get_attachment_image_srcset` to generate the srcset to deliver images based on the current screen size. This filter could help remove some sizes if you don’t want all the generated ones, `wp_calculate_image_srcset`
Edit: If you’re not familiar with creating child themes, reference this doc: https://developer.wordpress.org/themes/advanced-topics/child-themes/
Another edit: The plugin “Query Monitor” is your friend. If you install this, you’ll have a section added to the admin bar. If you hover it on the frontend you’ll see an item for “Template”. This will give you a push in the right direction as far as finding the template that is currently being used for display.