In help from a web designer on a scaling problem

I’m using a theme call TrueMag from themeforest http://themeforest.net/item/true-mag-wordpress-theme-for-video-and-magazine/6755267

I did a http://gtmetrix.com test on my website http://www.militarysurprise.com/ and it said

The following images are resized in HTML or CSS. Serving scaled images could save 872.6KiB (62% reduction).

This thing gave it an F and reduced the grade.

I did a search on the authors comments and they know about the problem this is what they said about it.

You got a F due to scaled images, which is a critical point in a responsive theme. Images are often larger than needed, so they are considered “not optimized”. That cannot be solved. You can, however, prepare proper image size and compress images before uploading so it reduces loading time.

You can increase the loading speed of images by using CDN feature in your cache plugin.

Best regards,

CactusThemes

The question has come up on their comments section many times and they give the same answer in different wording.

WordPress gives three sizes to scale images why wouldn’t the theme use them and still be (responsive) mobile friendly.

Can a theme designer please confirm what they are saying that there is nothing that can be done with it. and if there is please tell me what I can say to them to fix this.

thanks

Mitch

  • Adam Czajczyk
    • Support Gorilla

    Hey HamRadioDude,

    I hope you’re well today and thank you for your question!

    I took a look at the theme description and it says that’s the “Retina ready” theme. Retina displays are are high-quality (to be precise: HD – High Density) displays which means that there’s more pixels packed within 1 inch area than in standard displays. This way those displays can show images of higher quality.

    For any website that displayed on a standard monitor with, let’s say, 1366 x 768px resolution (which is for example a standard screen resolution for typical 14-inc laptop display) you need and image of 1366 x 768 px to cover full screen. On retina display the pixel is smaller, thus there are more pixels for the same screen size. Simply speaking, to make use of retina quality you need larger image.

    Those images are then being scaled with CSS. So, technically speaking the theme developer is right: if you wish to maintain the image quality on standard displays as well as on retina displays (which becomes standard actually) you need to deal with larger images.

    Is there anything you can do about it? Well, yes. At least partially. I’m not familiar with this particular theme, apart from what I got from its description but:

    1) if you decided to sacrifice the quality on retina displays, you may scale images down (manually) if needed and then change WP default (which are probably altered by the theme itself to use bigger images) image sizes and check CSS rules – I guess the workflow now is as follows: WP serves big image and CSS is ‘squeezing” it to be smaller.

    2) if you wish to maintain the quality for retina displays, you may want to examine themes rules for “media queries” and probably add some new. Here’s more about media queries:

    https://premium.wpmudev.org/blog/how-to-customize-responsive-wordpress-themes-part-4-media-queries/

    3) You may also want to give this plugin a try:

    https://wordpress.org/plugins/responsify-wp/

    I haven’t used it personally but the reviews are good :slight_smile:

    4) Finally, I would highly recommend our WP Smush Pro plugin. You will find it here:

    https://premium.wpmudev.org/project/wp-smush-pro/

    It’s not exactly a “responsive images” solution but it will optimize your images as much as possible, thus saving your bandwith and site load which should result with better performance!

    I regret that I didn’t give you any “out-of-the-box” solutions like, for example, a code to be used in your theme or a quick-fix but it’s always hard to do such things without detailed examination of the theme’s code and site’s construction!

    Having said that, I hope it helped!

    If you have any further questions, please ask!

    Cheers,

    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.