Post by ri2k » Tue Aug 25, 2020 10:44 am

My logo appears just fine on computer screen, but on mobile phone screens, it doesn't appear crispy at all, it appears extremely blurry, and pixelated.

I am using png photos, and my Opencart version is 3.0.3.6.

What should I do? Anyone has any clues?

New member

Posts

Joined
Mon Aug 24, 2020 7:31 pm

Post by litextension » Tue Aug 25, 2020 11:03 am

ri2k wrote:
Tue Aug 25, 2020 10:44 am
My logo appears just fine on computer screen, but on mobile phone screens, it doesn't appear crispy at all, it appears extremely blurry, and pixelated.

I am using png photos, and my Opencart version is 3.0.3.6.

What should I do? Anyone has any clues?
OpenCart set optimized resolution for your logo picture. It might be the case that you added a large image file, so why not trying to resize the image first.
Your file format can also affect image quality, varies by browsers. So if it's the PNG that cause the problem, try reformatting your image to JPEG.

LitExtension - Shopping Cart Migration Expert
Visit us at: https://litextension.com


User avatar
New member

Posts

Joined
Wed Aug 03, 2016 4:22 pm

Post by ri2k » Tue Aug 25, 2020 11:22 am

I tried with jpg but no luck.

In terms of size, what would be the ideal/optimum size/resolution of the photo then?

New member

Posts

Joined
Mon Aug 24, 2020 7:31 pm

Post by Dunninghams » Wed Aug 26, 2020 8:19 am

A Graphic Designer here: You may also find that you are looking at your logo image on devices with very different screen resolutions. It's quite common for many external monitors to still be "standard" resolution of anywhere from 72 to 96 pixels per inch, whereas increasingly, many mobile devices are using significantly higher resolution displays, often 150 to 300+ pixels per inch. As a result, an image that looks fine on a Standard resolution display, looks blurry and pixellated on a high resolution mobile device screen, because it is being displayed at greater than it's 1:1 pixel dimensions.
Possible solutions can include: A) generate your logo for the web at 2x the size you intend to use it, and use code to instruct it's display size on screen; B) generate two size variants of your logo, and use code to pick which one to display depending on the device it's being viewed on; C) in specific cases (often depending on the complexity of the logo), you can use a resolution independent image format such as SVG (Scalable Vector Graphics), which is rendered on the client device at the native screen resolution, so always looks crisp. Option C should be explored cautiously though, as there are other complexities and limitations with this approach, but it CAN look superb in the right context.

Newbie

Posts

Joined
Wed Aug 26, 2020 7:41 am

Post by Naheed » Wed Aug 26, 2020 2:16 pm

It would be best if you try to make your graphic double the size, as the retina display of mobile has a bigger resolution than a desktop screen.

User avatar
Active Member

Posts

Joined
Mon Aug 10, 2020 11:19 pm

Post by letxobnav » Wed Aug 26, 2020 3:11 pm

In the olden days, the different browsers (html/js/css) were a pain for web developers, today it is the different devices.

Normally, images on these high resolution screens would look very small as these screens have a much higher pixel density (ppi).
But, apparently, they fixed that, kind off:
The makers of these new monitors don’t want you to view tiny websites all the time, so they scale up the size of those objects to match the approximate 1″ length of a traditional screen, essentially “stretching” the image to fit the larger space. (You can change this view in your monitor settings, but many people don’t.) And the result of the monitor stretching the image to fit the larger size, means that the photo gets blurry because you’ve essentially zoomed in farther than the image expected you to.
So either send high resolution images to all devices (more bytes), use srcset which is a pain or try to determine the device resolution host-side which is even a bigger pain.

https://www.sitelock.com/blog/how-to-en ... %20screens.

https://premium.wpmudev.org/blog/make-i ... ina-ready/

Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces

“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.


User avatar
Expert Member

Posts

Joined
Fri Aug 18, 2017 4:35 pm
Location - Taiwan

Post by ri2k » Thu Aug 27, 2020 8:32 pm

Dunninghams wrote:
Wed Aug 26, 2020 8:19 am
A Graphic Designer here: You may also find that you are looking at your logo image on devices with very different screen resolutions. It's quite common for many external monitors to still be "standard" resolution of anywhere from 72 to 96 pixels per inch, whereas increasingly, many mobile devices are using significantly higher resolution displays, often 150 to 300+ pixels per inch. As a result, an image that looks fine on a Standard resolution display, looks blurry and pixellated on a high resolution mobile device screen, because it is being displayed at greater than it's 1:1 pixel dimensions.
Possible solutions can include: A) generate your logo for the web at 2x the size you intend to use it, and use code to instruct it's display size on screen; B) generate two size variants of your logo, and use code to pick which one to display depending on the device it's being viewed on; C) in specific cases (often depending on the complexity of the logo), you can use a resolution independent image format such as SVG (Scalable Vector Graphics), which is rendered on the client device at the native screen resolution, so always looks crisp. Option C should be explored cautiously though, as there are other complexities and limitations with this approach, but it CAN look superb in the right context.
Hello,

Thank you for your reply, much appreciated!

Do you know how I can edit the codes and define the resolution of the logo for each screen sizes? Which files should I edit within opencart and what are the codes?

Thanks again!

New member

Posts

Joined
Mon Aug 24, 2020 7:31 pm

Post by JNeuhoff » Thu Aug 27, 2020 9:55 pm

In general, your web theme should have a viewport meta tag, e.g. something like:

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1">
On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties.

See more on this here: https://developer.mozilla.org/en-US/doc ... t_meta_tag

Export/Import Tool * SpamBot Buster * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Tag Manager * Survey Plus * OpenTwig


User avatar
Guru Member
Online

Posts

Joined
Wed Dec 05, 2007 3:38 am


Post by ri2k » Thu Aug 27, 2020 10:46 pm

letxobnav wrote:
Wed Aug 26, 2020 3:11 pm
In the olden days, the different browsers (html/js/css) were a pain for web developers, today it is the different devices.

Normally, images on these high resolution screens would look very small as these screens have a much higher pixel density (ppi).
But, apparently, they fixed that, kind off:
The makers of these new monitors don’t want you to view tiny websites all the time, so they scale up the size of those objects to match the approximate 1″ length of a traditional screen, essentially “stretching” the image to fit the larger space. (You can change this view in your monitor settings, but many people don’t.) And the result of the monitor stretching the image to fit the larger size, means that the photo gets blurry because you’ve essentially zoomed in farther than the image expected you to.
So either send high resolution images to all devices (more bytes), use srcset which is a pain or try to determine the device resolution host-side which is even a bigger pain.

https://www.sitelock.com/blog/how-to-en ... %20screens.

https://premium.wpmudev.org/blog/make-i ... ina-ready/

I don't mind using higher resolution pictures, but I don't know which css/php files to edit, or what codes to write. If you could provide some guidance on it that would be much appreciated.

New member

Posts

Joined
Mon Aug 24, 2020 7:31 pm

Post by letxobnav » Fri Aug 28, 2020 9:41 am

well, the logo is not resized by OC but taken straight from you admin settings definition and uses responsive so I would suggest to replace your logo with an image double the resolution.
For product images you set the target resolutions in admin which are then used to resize the original to.
Double the target resolutions as long as you make sure your originals have higher resolutions.

That will ofcourse increase the filesizes of the resulting resized cached images and it will result in more resizing on the browser part (responsive images) but so be it.

Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces

“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.


User avatar
Expert Member

Posts

Joined
Fri Aug 18, 2017 4:35 pm
Location - Taiwan

Post by IP_CAM » Fri Aug 28, 2020 10:08 am

Just, to have it mentioned, a very impressive online PNG Compressor exists,
it's better than anything else I tried before. I still create my Images with the
old XP Imager Composer, save 'em in regular PNG format, and then
compress them single, or in Bulk, on the Site linked below. It then sends me
a ZIP File, with all compressed pics, they just need to be slightly renamed again,
to further match their 'OC defined' Image Names again.
Images / Banners should not exeed 1280 pixel full-size width, it makes not much
sense, and only add's to loading time. Theme width should be size-limited to such
a Resolution anyway, to keep a somehow 'compact' style.
Good Luck! ;)
Ernie
---
GiftofSpeed.com
https://www.giftofspeed.com/png-compressor/

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by ri2k » Fri Aug 28, 2020 10:46 am

letxobnav wrote:
Fri Aug 28, 2020 9:41 am
well, the logo is not resized by OC but taken straight from you admin settings definition and uses responsive so I would suggest to replace your logo with an image double the resolution.
For product images you set the target resolutions in admin which are then used to resize the original to.
Double the target resolutions as long as you make sure your originals have higher resolutions.

That will ofcourse increase the filesizes of the resulting resized cached images and it will result in more resizing on the browser part (responsive images) but so be it.

The problem I found is that if I keep the logo image resolution too high, it would display a much bigger sized image and would look too big on my website header on the web platform. Is there a way I could fix that resolution with css?

New member

Posts

Joined
Mon Aug 24, 2020 7:31 pm

Post by khnaz35 » Fri Aug 28, 2020 11:00 am

ri2k wrote:
Fri Aug 28, 2020 10:46 am
could i fix that resolution with css?
The simple answer will be NEVER try to resize the image with your CSS, this will badly impact your site load time.

https://softwareengineering.stackexchan ... a-bad-idea
Further more search on google to understand that why everyone is still asking you to make a new image

Urgent Questions shoot here: khnaz35@gmail.com
Enjoy nature ;) :) :-*


User avatar
Active Member

Posts

Joined
Mon Aug 27, 2018 11:30 pm
Location - Malaysia

Post by letxobnav » Fri Aug 28, 2020 11:35 am

the problem I found is that if I keep the logo image resolution too high, it would display a much bigger sized image and would look too big on my website header on the web platform. Is there a way I could fix that resolution with css?
high resolution screens have a much higher pixel density, more pixels per square inch. So a 200x200px image may look good on a 5x5inch normal resolution screen but would display half the size on a screen with double the pixel density. to make it look the same size you would have to send a 400x400px image.
So send 400x400px to all but make it responsive (which is default I believe) or use srcsets, make several copies with different resolutions and have the browser decide which image to use given the device's resolution.
and don't use png for product images as that is bad.

Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces

“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.


User avatar
Expert Member

Posts

Joined
Fri Aug 18, 2017 4:35 pm
Location - Taiwan

Post by khnaz35 » Fri Aug 28, 2020 11:52 am

Check this topic also will help: viewtopic.php?t=114539

Urgent Questions shoot here: khnaz35@gmail.com
Enjoy nature ;) :) :-*


User avatar
Active Member

Posts

Joined
Mon Aug 27, 2018 11:30 pm
Location - Malaysia

Post by by mona » Fri Aug 28, 2020 12:37 pm

I am going to disagree here. It is your site do as you wish. Yes re-sizing in the browser is not recommended and is bad practice and we are all supposed to be pushing for minimum loading times - but hey - Obviously it makes a much bigger difference to the corporations, 1millisecond across a few billion is a lot of server time - that is a lot of money - and we are not going to get a reduction in the cost for doing it - and you are not going to be at the top of google if you do .. HOWEVER - If you site is the bells, whistles and the kitchen sink, don’t do it, visitors will not wait for your site to load, no matter how pretty the waiting icon looks and if your site only loads on the latest browser - it gets closed. If this is your only vice - well done - give yourself a break .. but do not do this for all your product images, that would be bad.

Double it up for the mobile and scale it down for the desktop if that makes you happy - but at least compress it. tinypng.com if you have nothing else. If you can use jpg you should, if it has a transparent background, you have no choice.
There are a number of ways depending on the issues you are experiencing when you say too big - but one would be to set a max-height to prevent it from getting too big.

Code: Select all

@media (min-width: 768px) {
#logo > a > img {
max-height: 200px;
}
}
or for each screen set (bootstrap.css logic)

Code: Select all

@media (min-width: 768px) and (max-width: 991px) {
 #logo > a > img {
max-height: 200px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
#logo > a > img {
max-height: 250px;
  }
}
@media (min-width: 1200px) {
#logo > a > img {
max-height: 300px;
  }
}
you can check the sizes per screen (google chrome tools can help you with that)

DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.


https://www.youtube.com/watch?v=zXIxDoCRc84


User avatar
Expert Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by letxobnav » Fri Aug 28, 2020 12:44 pm

class img-responsive already handles this.

Code: Select all

    display: block;
    max-width: 100%;
    height: auto;

Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces

“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.


User avatar
Expert Member

Posts

Joined
Fri Aug 18, 2017 4:35 pm
Location - Taiwan

Post by by mona » Fri Aug 28, 2020 12:51 pm

that will change all images - as I understand he (very sexist ) or she only wants to change the logo
But yes - I am suggesting to override the height:auto

DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.


https://www.youtube.com/watch?v=zXIxDoCRc84


User avatar
Expert Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by letxobnav » Fri Aug 28, 2020 2:52 pm

that will change all images
no, only images that have that class.

An image will only look maximum sharp when it is displayed 100%.
If you resize and image up or down, by browser or css it blurs, always.

Even after resizing an image via php or photoshop, you need to sharpen it as the very resize algorithms blur.

For big product images we use:

Code: Select all

public function imagesharpen_precise() {
    $height = imagesy($this->image);
    $width  = imagesx($this->image);
    $rs = array();
    $gs = array();
    $bs = array();
    for ($y = 0; $y < $height; ++$y) {
        for ($x = 0; $x < $width; ++$x) {
            $rgb = imagecolorat($this->image, $x, $y);
            $rs[$y][$x] = $rgb >> 0x10;
            $gs[$y][$x] = $rgb >> 0x08 & 0xFF;
            $bs[$y][$x] = $rgb         & 0xFF;
        }
    }
    $height--;
    $width--;
    for ($y = 1; $y < $height; ++$y) {
        $rd = $rs[$y][0];
        $gd = $gs[$y][0];
        $bd = $bs[$y][0];
        $yd = $y - 1;
        $yi = $y + 1;
        for ($x = 1; $x < $width; ++$x) {
            $r = -($rs[$yd][$x] + $rs[$yi][$x] + $rd + $rs[$y][$x + 1]) / 4;
            $g = -($gs[$yd][$x] + $gs[$yi][$x] + $gd + $gs[$y][$x + 1]) / 4;
            $b = -($bs[$yd][$x] + $bs[$yi][$x] + $bd + $bs[$y][$x + 1]) / 4;
            $r += 2 * $rd = $rs[$y][$x];
            $g += 2 * $gd = $gs[$y][$x];
            $b += 2 * $bd = $bs[$y][$x];
            if ($r < 0) $r = 0;
            elseif ($r > 255) $r = 255;
            if ($g < 0) $g = 0;
            elseif ($g > 255) $g = 255;
            if ($b < 0) $b = 0;
            elseif ($b > 255) $b = 255;
            imagesetpixel($this->image, $x, $y, $r << 0x10 | $g << 0x08 | $b);
        }           
    }
	unset($rs);
	unset($gs);
	unset($bs);
}
then call that before saving the risized image at a high quality.

Code: Select all

$image->imagesharpen_precise();
for thumbnails we use:

Code: Select all

public function convolution() {
	$sharpenMatrix = array([-1.2, -1, -1.2],[-1, 20, -1],[-1.2, -1, -1.2]);
	$divisor = array_sum(array_map('array_sum', $sharpenMatrix)); 
	$offset = 0;
	imageconvolution($this->image, $sharpenMatrix, $divisor, $offset);
}
then call that before saving the risized image at a lower quality:

Code: Select all

$image->convolution();
There is no need to have super sharp thumbnails as you will not see the difference no matter the display quality unless your superman and superman does not do online shopping.

We do not use any of that for logos, if your company logo needs to be super sharp then maybe rethink your logo unless it is an image of the sunset or the grand canyon.

ps. when experimenting with different image settings, disable your browser cache.

Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces

“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.


User avatar
Expert Member

Posts

Joined
Fri Aug 18, 2017 4:35 pm
Location - Taiwan

Post by sw!tch » Fri Aug 28, 2020 3:07 pm

For a simple logo, consider a .SVG if you are that concerned over quality.

Full Stack Web Developer :: Send a PM for Custom Work.
Backup and learn how to recover before you make any changes!


Active Member

Posts

Joined
Sat Apr 28, 2012 2:32 pm
Who is online

Users browsing this forum: Amazon [Bot] and 126 guests