We Keep Coding

srcset without high-dpi screen support

There is an image tag with srcset attribute that looks like this:
<img src="..."
srcset="small.jpg 300w, large.jpg 900w"
sizes="300px" />
On normal 1x dpi screen it loads small.jpg, but on high DPI screens (such as retina) - it loads large.jpg.
Is there some way to make it load small.jpg on high DPI screens?

This is how srcset works, intentionaly.
If you want to prevent the browser from downloading the relevant image you provide, as your sizes value shows that supporting variable viewport widths is not required in your use case, you should use a simple src without srcset:
<img src="small.jpg" width="300" />
But it means you always show the image as 300px wide, and users with screen density above 1dppx might see a low quality rendering.
Could you explain why you want this to happen?

Lazyload images without hurting SEO

We have a product details page on our website and it has a preview of a large image of the product. The problem is because of it being too large and hi-res, it takes time to load and render on our page. Now I've read about something called image upscaling or from what I've understood it works a bit more like lazyloading the images. So the concept is they generate a very small, in terms of file size and image dimension, version of the large image and set it as the initial preview of the image. Then size it up to same as the large image's original dimension. So it is stretched and they blur it out. They wait for the larger image to load then replace the smaller one with it once it is done loading. I've seen this in multiple blogs and news website and it seems like a very good solution. But my concern is, does this affect our page's SEO? If so, is there a way to implement this kind of behavior without hurting our page's SEO?

I understand that you have a problem with optimizing your images. To solve this, I recommend that you apply the following techniques:
Add the srcset attribute to the img element. The srcset attribute extends the functionality of the img element. If the browser does not support the srcset attribute, by default the image file is imported using the src attribute. If the browser supports the srcset attribute, you can specify a list of image sources and conditions (comma-separated) before the request is received. As a result, only those images that match the parameters of the device are downloaded and displayed.
Art direction in the responsive images with the element picture. If you want the images to vary depending on the characteristics of the device (art direction effect), use the element picture. The picture element specifies a declarative solution to provide multiple versions of the same image, depending on the various characteristics of the device: size, resolution, destination, and so on.
<picture>
<source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
<source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
<img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>
In the above example, if the width of the browser is not less than 800 pixels, the head.jpg or head-2x.jpg format will be used (depending on the screen resolution of the device).If the width of the browser is from 450 to 800 pixels, the formats head-small.jpg or head-small-2x.jpg (also depending on the screen resolution of the device) are applied. If we are talking about a screen width of less than 450 pixels and a device with downward compatibility, the picture element will not be supported. In this case, the browser uses the img element to display the image on the screen (it must be enabled).
Images with relative dimensions. If the final image size is unknown, it is difficult to select the pixel density descriptor for image sources. This, in particular, refers to images that are stretched proportionally to the width of the browser and change their size depending on it. In this case does not indicate the fixed image size and pixel density. Instead, you can determine the size of the image being processed by adding a handle to width. This will allow the browser to automatically calculate the optimal pixel density and select the correct image to load.
<img src="lighthouse-200.jpg" sizes="50vw"
srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
lighthouse-1800.jpg 1800w" alt="a lighthouse">
This example shows an image that takes half the width of the viewport (sizes = "50vw" when applying the viewport) and depends on the width of the browser and its ratio of logical and physical pixels. As a result, the browser can select an image that will be displayed correctly in a window of any size.
Please note that images of the JPG-JPEG format have approximately 50% less volume than PNG. Therefore, they are easier and faster to load. To change the image format and resize images, you can use this tool Photo Editor Online. To compress images, you can use this tool - JPEG and PNG compressors.
The best solution is the use of Accelerated Mobile Pages AMP. Please note that in their implementation of the image element is also used the srcset attribute.
Original source ++ Use Cases and Requirements for Standardizing Responsive Images ++ Responsive images of MDN.
You can use for preloading images of the current web page with meta preload, eg: <link rel="preload" href="//examples.com/images/img1.jpg" as="image">
Read more Preload of W3C ++ Preloading content with rel="preload" of Moz.

For SEO I'm going to assume you want to go by googles standards for my answer.
lazy loading will help your bandwidth, not your SEO google will judge your website by full page load time.
I recommend you compress your images and that will be all the difference.
if you have any pictures you can load 20 pics and the have a button saying load more, then lazy load from there.
this would be a big SEO boost as your now loading half your website.

How to use a lower resolution image for mobile?

I'm designing a responsive site using media queries to change the layout as the viewport size changes.
For mobile, I think it would be beneficial to use a lower resolution image to save on page loading times and bandwidth.
How would I disable the high quality image and replace it with the lower quality image using CSS?
Thank you.

Using the HTML5 picture element, you can specify inline media queries to size your images:
<picture>
<source srcset="sm.png" media="(max-width: 400px)">
<source srcset="mid.png" media="(max-width: 800px)">
<source srcset="lg.png">
<img src="lg.png" alt="MDN">
</picture>
The element will degrade gracefully to show the image tag in browsers that don't support it.
Read more about the picture element on MDN.
Also, a JS polyfill in case the img tag fallback isn't enough!

At the time of this writing, the picture element has virtually no browser support.
So here are two alternatives:
If the image is sourced in the CSS you can prevent it from loading with display: none.
If the image is in the HTML img tag consider that the browser calls images from the src attribute. You can work around this by using the the data attribute instead. Apply data to all images and add src only when you want to load them.
HTML
<img data-src="http://i.imgur.com/60PVLis.png" height="100" width="100" alt="">
JS
$(document).ready(function() {
$(this).find('img').each(function() {
$(this).attr("src", $(this).data("src"));
});
});

you can develop your css spreadsheet file by adding display none for large images in mobile view, the new mobile browsers wont load large images if they contain display:none in css, allowing the page to load faster and also adding display non for small images in desktop view will do the same .

It's simple - create another image with less resolution, and put it with media queries.
Media Queries can help you hide and show elements based on screen resolution and media type.
A great resource would be this article about media queries on CSSTricks which covers different devices, platforms and res

Responsive design fluid images idea

I am trying to create a page where appropriate images to load are determined by javascript, based on browser size. For example:
<img src="image1.jpg" />
javascript would change it to:
<img src="image1_800px.jpg" />
and load the 800px wide image version.
Doing this is not a problem. Problem arises when i try to do the same for browsers without javascript. The basic idea would be to hide images initially and display them with a style in NOSCRIPT tag. So browsers that support javascript will change image urls and make those images visible and browsers that don't support javascript will simply unhide those images by css. The problem is that images with display:none are loaded by browsers. And adding image url into anything but the src attribute is not an option as such image would rely on javascript to set its src.
So are there any ideas if it's possible to make this work?
For instance: i could rewrite image src attributes on domready and hope that browsers don't manage to start loading images from old src, but would that be the case? If so - would it always be the case or would some browsers work differently?

I think what you're looking for is http://adaptive-images.com/ - it uses Javascript to determine image size, but also has a back-up option if the user does not have Javascript enabled that still provides the resized image (with caveats, read the docs).

Increase size of embedded image in HTML

I have an HTML page. There is a base64 encoded image in it. I am planning on writing a javascript to increase the size of the image and content on the page. So everything on the page will appear bigger. I am able to increase the font size but not sure about the embedded image.

If you have
<img id="myImage" src="" />
Then you can do it like this:
$('#myImage').attr({
width: 150, // new width
height: 150 // new height
});

Well, you can just adjust the css for that image or the attributes. Use either height or width, just not both so they scale properly.
Jquery:
$("img").css("width","150px");
I may be confused but don't all modern browsers support Ctrl + scroll to zoom?

With images referenced by URL, you can change height and width (either the HTML attributes or CSS styles) and the browser will resize the image. I imagine it will work the same with an embedded image.

This functionality is available in most modern browsers, and as such it is unnecessary to duplicate it using client-side scripts. Consider simply informing the user that most browsers have text size controls built in (so that they may use this tool on other sites as well).