Image issue. Clear in media gallery - cannot get clear images in my posts

Hi I'm frustrated. I thought I could do this on my own but I can't. I'm trying to set up a simple wordpress blog with images of my art to be shown as featured images. They are highly detailed (I've uploaded like 3 of them to the media gallery - I've got many more) and they are large file size. I've shrunk the sizes in already and they're still clear in gallery. However, when I go to post as a feature image, the end up a blurry. I need them crystal clear. I don't know how to resize any more than I've already tried, I don't know how to override Wordpress' compression policy, I don' t know how to shrink and yet keep the image quality. It's a mess right now, but I have several tests (as posts) in there. Gallery quality is fine. Image in post are not. I have downloaded plugins such as smushit, tiny png, image optimzers etc and nothing is working. In my iphone especially, the viewing is blurry upon zooming in. I don't care what theme I use either as long as it has big, good feature images and no columns, as I want a clean portfolio look. I don't want them cropped either which many themes feature images are doing (I've tried SO many themes now). I need the image files compressed/optimzed while losing NO quality of my art. I am at my wits end. Please tell me you can help me.

  • Joe J

    People with far more intelligence than me will way in but I would use different sized pictures for different uses. If the png's you have now are fine for your gallery, GREAT! But upload a larger file to use as your featured image. That should clear them up. Personally, I use FastStone Photo Resiser ( http://www.faststone.org ) because it has a batch function but there are a lot of online and downloadable options. Do a search, try a few and find something you like. If you go this route name your photos so you can tell them apart. I put the image size in the name (photo.300x300.png ). I hope this helps.

    Joe

  • Rachael

    Thanks for your reply Joe,

    I actually meant that the images are fine and clear in my Media Library - not gallery, sorry my bad. I actually don't use a gallery. I only plan to use my art pictures as featured images when I post and that's it.

    My files are actually way too large rather than small - I think that's part of the problem. Wordpress is compressing them to 90% I'd assume (as it does with all images I read?), and somewhere between Media library and uploading them as a featured image for the post, quality is getting lost and it's making my pictures blurry when viewing the images on mobile devices (when you zoom in the quality sucks bad).

    I've tried compressing because the image file sizes are large (apparently with no loss of quality) with Smush it, Imagify, saving my JPEGS as PNG's all no no avail. Still blurry when viewed in featured images when published. And most of the time it crops the top and bottom off too. I only want it to be uploaded as I see it in Media Library. Not cropped, not blurry. Just as is.

    Really appreciate your input though, every little bit of advice helps, It's driving me nuts.

  • Adam Czajczyk

    Hello Rachael

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

    I think in that case you'll actually need a "three ingredients recipe" to solve that.

    1. You have already noticed that WordPress is doing "compression". Well, it's not exactly the case because it's not actively compressing any images but when it creates additional images (thumbnails etc) it's saving them with a defined quality. JPEG format can have a quality set and WP is using by default 90% which, in 99% of cases, is good enough. That can be changed with a small snippet of code. Here's how:

    In the "function.php" file of your current theme, add this line at the end (but before

    ?>

    line if it's there):

    add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

    That will set WP default jpeg quality to 100% instead of 90%, meaning that WP will do no compression on its own.

    2. Take care of a proper image size to avoid re-scaling and cropping which both may affect quality.

    This is a bit "tricky" one but is doable. The point is to find out what are exact dimensions of the featured image used on site (though it might be difficult if there's more than one) then make sure that such exact size is registered in WordPress and then - that this exact size image is loaded by theme to display featured image. That, unfortunately, might need some additional code.

    However, I don't currently have any access to your site and the front-end is disabled (there's only a login page) so I cannot check any of that. That being said, would mind enabling support access to the site so I could take a closer look? I believe I could give you more detailed advice on this after actually checking the site and its configuration :slight_smile:

    In order to enable support access please go to the "WPMU DEV -> Support" page in your site's back-end, click on "Grant Support Access" button there and let me know here.

    3. Compressing images for faster load and less storage space taken

    Smush would help you with this, but it should be run after above steps are taken. Then, you'd need to make sure that there's no resize option set for original full size images and also make sure that "super-smushing" is disabled (with that option disabled Smush would perform lossless compression that might be less efficient but does not affect quality as it only strips visually-irrelevant data from image files).

    Additionally, between steps 2 and 3 you'd have to regenerate all the images in Media Library with a help of a plugin such as "Force Regenerate Thumbnails" or similar. But I think we should skip it for now and focus on first two steps :slight_smile:

    Best regards,
    Adam

  • Rachael

    Hi Adam,

    Thank you so much and that all makes perfect sense - I've had attempts at all of the above but I just don't know what I'm doing. I've also tried to override the WP code to not compress/resize in functions php but it tells me it's an error and wont' save (I'm not doing something right). I also tried to find what the standard feature image size is set at so I can match it but can't even find that!

    Anyhow, I've set up WPMU DEV support link so you should be able to get in - let me know if you can't otherwise I'm more than happy to give you my password if you need it.

    Two last things - before I even bring the photo into Wordpress media library I shrink it with http://www.simpleimageresizer.com (from orig approx 4mg size to 2mg) and this doesn't lose any quality at all so the issue isn't there. The second test post on my site is still large and clear in Featured Image - it's the only one that actually worked, so this shows me it IS possible. I just can't get the combination of settings/actions right from there. I'm happy to change themes if this is part of the problem. PS my site is set to private during this set up mess because I don't want anyone to see it haha but hopefully I can iron this out soon and I'm really happy you guys can help, thanks :slight_smile:

  • Predrag Dubajic

    Hi Rachael

    It looks like support access is not granted to your site so we can't access it to check this out further.
    Can you double check if the support access is granted?

    If you're having issues with granting access you can send us login details by using our contact form https://premium.wpmudev.org/contact/#i-have-a-different-question and the template below:

    Subject: "Attn: Predrag Dubajic"
    - Site login URL
    - WordPress admin username
    - WordPress admin password
    - Link back to this thread for reference
    - Any other relevant urls/info

    Best regards,
    Predrag

    • Rachael

      Hi Predrag,

      Thanks for getting back to me - I'm so sorry, I actually hadn't granted access (I thought just linking you guys to my dashboard WAS access).....OK that's done now - It's really important that this gets fixed so thank you. I'm happy to change anything on the site as I haven't even begun to set it up yet (like theme etc) to make it easier to resolve if I need to. Please let me know as soon as you can. Thank you.

  • Predrag Dubajic

    Hi Rachael,

    Thanks, I was able to access your site now.

    I checked a couple of your posts and to be honest the images look quite good in there, however I do see that you have Twenty Fifteen theme active now, was the issue perhaps happening on a different theme?

    I do see that the image is a bit blurry when you zoom in on the phone, but this is because of how WordPress works with images.
    When you upload an image to WP it will generate additional thumbnails of that image to be used in specific places, and these thumbnails are defined by your theme and plugins used.
    For example, on Twenty Fifteen theme the featured image holder is 825x510 pixels so theme has that thumbnail registered and creates a thumbnail that will fit that holder.
    When you open your post it will not load your full-size image and it will instead load that smaller thumbnail, this reduces page size and increases your loading times.

    So when you check your post on a mobile phone it will also load that smaller image, and when you zoom in the quality will be lower since you're now zooming in on 825x510 image instead of the full-size image.

    Now, what you can do about this, it's a bit tricky, you may try out "WP Retina 2x" plugin which should use larger images on mobile devices and see if that does the trick for you.
    Some other solutions include editing the theme you use so that it loads thumbnail twice the size of the holder so you have a larger image in there.
    Or use a theme that supports lightbox on featured images so when someone clicks on the image it will open its full size in a lightbox.

    Best regards,
    Predrag

  • Rachael

    Hi Predrag,

    Thanks for your suggestions - yes I am on Twenty Fifteen and the issues are with that theme. The best parts of my art are in the detail, when you zoom in on mobile devices (I'm checking on my tablet and iphone) all the detail is lost.

    Please look at my images in Media Library and zoom in - they are crystal clear there - I need them to have the same clarify/level of detail in the posts. Not blurry - all the detail is gone in the posts and this isn't okay.

    I tried Retina 2 and it doesn't appear to do anything. I've been researching how to make them mobile responsive but I just don't know what to do - there HAS to be a way?

    I don't know how to edit the theme so it loads twice the size on mobile devices but sounds like this could work? Can you please help me to this. Can you test them out - use an image in my media library and try create a post where the featured image is clear on mobile devices? I am at my wits end.

    Also the featured images are still cropping cutting off - all except one post/featured image (called "Testing Different Picture") and I don't even know how I got this to fit - a fluke I think - I need to know what size these featured images are and then work out to rezise them so they fit? I've looked in functions.php, and online and tried to find a plugin that can help me but can't find anything and they're still getting chopped off.

    My art looks bad cropped and fuzzy in these featured images. I just need them to be as clear as in image library on mobiles when you zoom in, and not cropped. Please help me work this out.

  • Predrag Dubajic

    Hi Rachel,

    As I mentioned above the phone issue is related to the theme using a smaller image that fits into that holder and when that's zoomed in the quality will be lower.

    What you can try is using a child theme to register new thumbnail and load it instead of the default one defined by the theme.
    With the larger image, you will get much better results on your phone.
    I've attached a child theme below that registers new thumbnail twice the size and edits content.php file in order to call that that new image.
    Here's and image from my test site compared to your site when viewed on mobile:

    What you would need to do is download the attached child theme, install and activate it on your site and after that regenerate your thumbnails with a plugin like Regenerate Thumbnails and that should be it.

    However, I'm afraid that there's a downside to this, when you use an image that's larger than your actual holder your sites speed score will decrease because Google and other page speed tests don't like sites that load larger images than the actual holder.
    So keep that in mind if you decide to use this child theme.

    Best regards,
    Predrag

  • Rachael

    Thanks so much Predrag I really appreciate your help. I'll try it later tonight when I'm back from work - the pictures do look better - I still see if much clearer/sharper in Image Library but I know if it's made much more higher a resolution it'll take even longer for my page to load. I'll do this bit first then work out how to stop it cropping.

    Thank you again, you've been awesome and I'll get back to you in a day when I've uploaded the child theme and tested it out.

    Kind regards,
    Rachael

  • Rachael

    Hi Predrag,

    I really appreciate your help but I think something isn't working - I added the child theme (with Plugin "Child Themify" - I called the child theme 'Bigger Sized Photos in Mobile Devices'. I copied the text from the zip file you sent me and pasted it in, then Regenerated Thumbnails and nothing. I must be missing something here - What have I done wrong? I'm so sorry, my website development skill is like a one - which is why I chose wordpress because I didn't think I'd need any.....I'm really sorry to be a pain. Can you please go in and see what's wrong? Or fix it up? I just don't understand what I'm screwing up here.

  • Predrag Dubajic

    Hi Rachel,

    Could you tell me why you used Child Themify plugin for adding the child theme?

    The file I attached is fully functional Twenty Fifteen Child theme, it doesn't require anything expect for the Twenty Fifteen parent theme in order to work.
    All you need to do is to either go to Themes panel and upload the child theme from there, or unzip the attached file and place it inside wp-content/themes/ folder.

    After that when you go to Themes panel you will see the child theme as an available option and you can activate it from there.

    Can you try adding it that way and see if it works?

    Best regards,
    Predrag

  • Rachael

    Hi Predrag,

    I didn't know how or where to install it, so I check tutorials on youtube and they told me to create the child theme first (with the plugin) - then I just copied and pasted the info into the child theme (and got told I had 79 errors) - I just couldn't see how to upload it as it was. I'll undo/uninstall the child theme now - I just get stuck at the bit where I have to unzip it and install it - I coudn't see where to install it. I'll follow your instructions closely now again and fingers crossed. I've got a feeling we're close and I'm really sorry - you're really helpful, my technical knowledge sucks and I hate this stuff so bad! I just want it to work! OK I'll let you know how I go :slight_smile:

  • Adam Czajczyk

    Hello Rachael

    I've downloaded the child theme that my colleague Predrag provided you with and I made following changes to it:

    1. I've added the code to set jpeg quality to 100% to it (as suggested in my first post here)
    2. I've replaced the default WP function that displays featured images with a bit of code that actually forces the site to use only the very specific image size regardless of what device it's displayed on.

    After these changes, I have accessed your site, updated the child theme with the new version, disabled the Retina plugin (as it would further interact with my changes), regenerated all thumbnails again and cleared all caches.

    Can you clear the cache in your mobile device and see if that improved image quality or not? For me it seems like it did but I may not be the best tester of that as I don't use high-quality-display phone and am also nearsighted, so I might be missing details, I hope you understand that :slight_smile:

    Looking forward for your reply,
    Adam